WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] Remove "From: (price)" Label (28 posts)

  1. apcgallery
    Member
    Posted 1 year ago #

    Hello,

    I've browsed around, and the closest solution I could find was a topic where the user wanted to remove "from" out of their product page.

    Here's the link

    I want to remove the entire graphic. (and the text)

    I am creating the page for an art gallery, and sell mostly "grouped" products. The graphic and label can be a bit misleading, considering a poster print is $20, but original pieces can range from hundreds to thousands of dollars.

    I worked with this code, but can only remove the text. (I pasted it in functions.php as instructed by user "bheadrick" from another thread w/ a similar issue.

    add_filter('woocommerce_variable_price_html','custom_from',10);
    add_filter('woocommerce_grouped_price_html','custom_from',10);
    add_filter('woocommerce_variable_sale_price_html','custom_from',10);
    
    function custom_from($price){
    $new_from = "Deposit";
    $price = str_replace('From',$new_from,$price);
    return $price;
    }

    This is all I was able to do. It only removed the text (but not the graphic)

    add_filter('woocommerce_variable_price_html','custom_from',10);
    add_filter('woocommerce_grouped_price_html','custom_from',10);
    add_filter('woocommerce_variable_sale_price_html','custom_from',10);
    
    function custom_from($price){
    $new_from = "Deposit";
    $price = str_replace();
    return $price;
    }

    Any help would be awesome,

    Thanks!

    http://wordpress.org/extend/plugins/woocommerce/

  2. apcgallery
    Member
    Posted 1 year ago #

    Here is what the page looks like, after inserting the code into functions.php

    http://apcfinearts.com/wordpress/?product=tide-pools

  3. apcgallery
    Member
    Posted 1 year ago #

    As you can see, the text is now gone. But what remains is something that kind-of resembles an arrow.

    Does anyone know how to remove this graphic from my grouped/variable products?

  4. samueljeden
    Member
    Posted 1 year ago #

    Hey,

    Are you wanting to completely remove it so that it no long shows anything there?

    Thanks

  5. apcgallery
    Member
    Posted 1 year ago #

    Yes, Exactly.

  6. apcgallery
    Member
    Posted 1 year ago #

    I return to this thread 4 months later with a solution

    This is a Two-Parter, because the "graphic" is actually 2 pieces. The following code removes the price label for variable/grouped products, but leaves the prices of simple products intact.

    -1- Place this code at the bottom of the Woocommerce Functions.php
    It removes the "From: $xx" label and the box that contains it.

    add_filter('woocommerce_variable_price_html','custom_from',10);
    add_filter('woocommerce_grouped_price_html','custom_from',10);
    add_filter('woocommerce_variable_sale_price_html','custom_from',10);
    
    function custom_from($price){
    $new_from = "Deposit";
    $price = str_replace('','','');
    return $price;
    }

    -2- Place this code in your custom CSS. It removes the "graphic" that I was previously unable to remove.

    .products li .price:after { content:none; }

    Code-wise there is probably a much simpler solution, but I'm not quite there yet (I have an extremely basic understanding of Javascript).

    *This only removes The "from" price labels from the catalog view. In the product view, you're still left with the remnants of a price label. If this is removed in CSS, it's removed from every product (including simple products). If anyone knows how to remove it from variable products only, please let me know!

  7. apcgallery
    Member
    Posted 1 year ago #

    Edit: The page linked to in my second post no longer exists.

    • if you want to see what changes I've made so far, just visit apcfinearts.com and go to the "Shop" section.

    Update: Since my last post, I made some changes.

    • I'm posting some of the changes i made to help others like me get started customizing their store- specifically, display of the price tag.
    • The changes are also a simple fix the "remnants of a price label" problem in my post above.
    • I assume you used the JS code from previous post to remove "from" and the price from variable products. If not, it's okay. Your simple/ variable price tags will look similar (no "ugly line" problem).

    *Note: Play around with the values if things don't look good on your page. I use Suffusion Theme & a plugin that makes Woocommerce CSS mesh with Suffusion. SO... the below CSS should work for users without Suffusion. If not, let me know.

    The price tag is actually a combination of 3 elements (price:before / price / price:after). The before and after are what make it look like a price tag. This removes them, leaving only the price as a box.

    /* Woocommerce Remove the Price Tag Tail */
    div.product p.price:before {display: none;}
    /* Woocommerce Product Page Bullet Point */
    div.product p.price:after {display: none;}

    For simple products, the code above works fine. For variable, you get an ugly blank line. The code below makes the simple product price look better, and the "ugly line" on variable products looks like it belongs.

    /* Woocommerce Product Page Price Label */
    .woocommerce div.product p.price, .woocommerce #content div.product p.price {width:95%;padding:2px 3px;text-align:center; color: #ffffff; background-color: #537ac6; font-size: 150%; border-radius: 4px; margin: 0px 10px 10px 10px;}

    This changes the price label for the shop page /categories /related products /etc. It's the same color scheme as above, and has a light shadow effect.

    /* Woocommerce Catalog Page Price Label */
    .products li .price, .woocommerce #content .products li .price {color: #ffffff; background-color: #537ac6; font-size: 150%; padding: 0px 4px;-webkit-box-shadow: 2px 2px 6px #666666; -moz-box-shadow: 2px 2px 6px #666666;box-shadow: 2px 2px 6px #666666;}
  8. hmeunues2000
    Member
    Posted 12 months ago #

    Just thought I'd drop a quick post to say thank you to apcgallery. Not only did you come back to help others...your solution worked perfectly and saved me hours of bother.

    thank you

    Chris

  9. apcgallery
    Member
    Posted 12 months ago #

    Thanks, I'm glad to hear it worked for someone other than myself!

  10. sleepymonk
    Member
    Posted 12 months ago #

    Hi apcgallery,

    I was looking at your site shop and noticed that you were able to get the sale/price badge to show up in the left hand corner of your image (related product).

    I'm trying to do this so that the sale badge doesn't push my images down in category view.

    Can you share how you did this?

    Thanks.

  11. apcgallery
    Member
    Posted 12 months ago #

    Hey Sleepymonk,

    Where does yours display?

    Link me to your store and I may be able to help

  12. sleepymonk
    Member
    Posted 11 months ago #

    Hi apcgallery,

    My site is not live yet, it's in maintenance mode so I can't share links yet.

    Actually, I think I'm confused. You got your sale price to appear as an overlay of one of your images, in the upper left hand corner.

    Similarly, I want to move the sale balloon/box (no price, just SALE!) so that it appears as an overlay rather than above the category images.

    I'm hoping it's just a simply CSS tweak.

  13. apcgallery
    Member
    Posted 11 months ago #

    Without seeing the site it's a little harder to know just what will do the trick, but I'll give it my best shot.

    I'm guessing you're talking about the prices in the books category, right?

    Here's what I got. Try adding these to your custom CSS

    .woocommerce ul.products li.product .price, .woocommerce-page ul.products li.product .price {
    display: block;
    margin-bottom: .5em;
    }
    .products li .price {
    position: absolute;
    float: left;
    top: 5px;
    }
  14. apcgallery
    Member
    Posted 11 months ago #

    As for the second part... I'm not 100% sure of what you want, but here's my crack at it.

    This works on simple products (like in the books section). None of my items were actually on sale, so the below CSS makes all simple products display "SALE!".

    So we're gonna "cover up" the price with "price:after".
    Change any of the below (except "position") to suit your needs.

    .products li .price:after {
    content: "SALE!";
    right: -15px;
    top: 0;
    font-size: 100%;
    color: #FFFFFF;
    background-color: #000000;
    position: absolute;
    border-width: 0px;

    I'll be honest; this is not the best way to do it.
    Actually it's pretty sketchy. But it's all I got right now.

  15. sleepymonk
    Member
    Posted 11 months ago #

    Thanks, apcgallery. Yes, it was the price on the catalog items that I was referring to.

    I just want to move the sale button to the upper left corner overlaying the product image, like you have done. This is helpful, I will give it a shot! I don't usually put price in, but that might be useful.

    I'd also like to change the shape of it, currently it's a box, would like to make it round, any ideas there?

    I'm just wondering what theme you've used as the basis for your website? It's very nice, clean looking.

    Thanks for your help.

  16. sleepymonk
    Member
    Posted 11 months ago #

    Hi again, apcgallery. That didn't do the trick for me, it put the price up in the left corner (actually two prices, since the display is regular price crossed out and sale price beside it), so the sale button didn't cover it up.

    I tried a few more tweaks but wasn't able to adjust it. I think I will start a new thread.

    This is part of the code for the sale flash button:

    .woocommerce ul.products li.product .onsale, .woocommerce-page ul.products li.product .onsale {
    top: 0;
    right: 0;
    left: auto;
    margin: -6px -6px 0 0;
    }
  17. apcgallery
    Member
    Posted 11 months ago #

    Okay, I figured it would be different for sale items. I created a sample sale item in my store to test things out.

    The code I gave you made the price display on top of the image, but I'm guessing it wasn't that way before, correct?

    If yes, then delete what I gave you. The solution is much easier. No "cover up" necessary. All you need to do is this:

    .woocommerce span.onsale, .woocommerce-page span.onsale { position: absolute;}

    If you want to change the look as well, here's something to get you started

    .woocommerce span.onsale, .woocommerce-page span.onsale {
    position: absolute;
    background: #000000;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    padding: 10px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    top: 0px;
    left: 0px;
    margin: 0;
    }

    ( border-radius controls the rounded edges, but its different for different browsers. That's why there's three "border radius"s )

    I use the Suffusion theme. It's free and provides a lot of functionality out of the box, including a custom CSS and JS section built into the theme for quick modifications. It takes a little getting used to at first, but I really enjoy it.

  18. sleepymonk
    Member
    Posted 11 months ago #

    Thanks for your help and examples!

    I tried your code, but it's hiding the sale flash for me (actually some of it is peeking up over the image from behind).

    I tried some position commands and got some really wacky results : ) fun, but not what I was looking for.

    This is what I currently have as edits to the sale flash. Right now the sales flash is hidden on the catalog pages, which is fine since it's not causing misalignment any more. And it still shows up on the product page at the top.

    I guess it's a compromise. it will work for now.

    /* sale flash edits*/
    ul.advanced-recent-posts li img, .instapress img, .wp-post-image {
    margin-top: 5px;
    border: 0px;
    background-color: #ffffff;
    padding: 5px;
    }
    .gallery-item img, img.size-thumbnail {
    border: 0px;
    background: none;
    padding: 4px;
    }
    /* edit sales flash*/
    .woocommerce span.onsale, .woocommerce-page span.onsale {
    padding: 4px;
    font-size: 14px;
    position: relative;
    op: 6px;
    left: 8px;
    margin: 6px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }

    I am using Simple Themes Synapse theme. My web design person just finished tweaking the css for me and it looks really great, I'm happy with the theme, it has custom css too so I'm able to try things out as well.

  19. apcgallery
    Member
    Posted 11 months ago #

    Agh, I really thought I had it that time! I'm sorry I couldn't help more, but I'm glad you found a temp workable solution. :]

  20. elsonce
    Member
    Posted 11 months ago #

    HI there, apcgallery can i ask you sth?..

    i am trying to rename ''from'' on my shop... i would like to put sth like ''PVP iva incluido'' and than the price. i used the

    `add_filter('woocommerce_variable_price_html','custom_from',10);
    add_filter('woocommerce_grouped_price_html','custom_from',10);
    add_filter('woocommerce_variable_sale_price_html','custom_from',10);

    function custom_from($price){
    $new_from = "PVP iva incluido";important;
    $price = str_replace('From',$new_from,$price);
    return $price;

    but this only removes the ''from'' any idea??
    thank you very much

  21. apcgallery
    Member
    Posted 11 months ago #

    Elsonce,

    The code you posted above is missing the function's closing bracket (see below for correct syntax).

    add_filter('woocommerce_variable_price_html','custom_from',10);
    add_filter('woocommerce_grouped_price_html','custom_from',10);
    add_filter('woocommerce_variable_sale_price_html','custom_from',10);
    
    function custom_from($price){
    $new_from = "PVP Iva Incluido";important;
    $price = str_replace('From',$new_from,$price);
    return $price;
    }

    If that was the solution, then great!

    If not, send me a link to your site.
    I'll see what I can do.

  22. elsonce
    Member
    Posted 11 months ago #

    hey apcgallery, thank you for the reply.
    my site is under construction yet, if u are online now i can unlock it for a while.

  23. elsonce
    Member
    Posted 11 months ago #

    can u send me an email address so i can send print screens, of inspect element?

  24. elsonce
    Member
    Posted 11 months ago #

    can u send me an email address so i can send print screens, of inspect element?

  25. apcgallery
    Member
    Posted 11 months ago #

    Hey Elsonce,

    Sorry for the delay. I looked more at the issue, and I just don't think I'm experienced enough to be of any help. Javascript is a little out of my comfort zone at the moment.

    The best suggestion(s) I can give are to

    * Switch to a different theme, maybe there's a theme conflict
    * Check the CSS to see if it's a display issue

    Good luck!

  26. svram
    Member
    Posted 11 months ago #

    hey apcgallery,

    any idea how to display the product attribute information like Category and Tags below the Product title? Instead of the 'From $xxx' label?

    thanks.

  27. ross@plydea.com
    Member
    Posted 6 months ago #

    Hi apcgallery,

    Thanks for the code above to remove the from and price from a grouped product, worked for me until I upgraded to 3.8.1... any ideas? Yes, I reapplied the code after updating.
    http://www.plydea.com

    thanks
    Ross

  28. apcgallery
    Member
    Posted 6 months ago #

    Hey Ross,

    I'm still using an older version of WordPress, but I have 3.8.1 on another server, along with the most recent update to Woocommerce. I created a grouped product to test with, but here's the thing: I don't get a "from/price" anymore, just the price range (ex: $10 - $100).

    Are you using the most recent version of Woocommerce (2.1)? Maybe things have changed with the newer version. If you're already up-to-date and still having trouble, can you create a sample grouped product and send me a link to where it shows "from/price"? Maybe I can take a look.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic