Add Prices Next to Woocommerce Variations

Have you ever wondered how you can add the prices next to your variations in Woocommerce?  Perhaps you are using our Woocommerce Radio Buttons Plugin and now you just want to display the price next to each option so users do not have to click each variation to find its price.

 

We are going to show you how you can add prices next to EACH variation in Woocommerce by a little snippet that you are going to want to add to your themes functions.php file.  Simply copy the snippet below and place it in your theme and you should be golden.

 

//Add prices to variations
add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );

function display_price_in_variation_option_name( $term ) {
global $wpdb, $product;

$result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );

$term_slug = ( !empty( $result ) ) ? $result[0] : $term;

$query = "SELECT postmeta.post_id AS product_id
FROM {$wpdb->prefix}postmeta AS postmeta
LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
WHERE postmeta.meta_key LIKE 'attribute_%'
AND postmeta.meta_value = '$term_slug'
AND products.post_parent = $product->id";

$variation_id = $wpdb->get_col( $query );

$parent = wp_get_post_parent_id( $variation_id[0] );

if ( $parent > 0 ) {
$_product = new WC_Product_Variation( $variation_id[0] );

//this is where you can actually customize how the price is displayed
return $term . ' (' . woocommerce_price( $_product->get_price() ) . ')';
}
return $term;

} 

Once you have copied and pasted that you just hit the save button and you should be ready to roll! Major thanks to Ratnakar for sharing this 😉

56 Comments

  1. Melissa Smith on August 15, 2013 at 3:52 am

    I did this and it works except it adds the span tag to the amount like this: ($175.00). How do I get this to stop happening? See on my product http://melissasmithart.com/product/pet-portait-painting/ under the size drop-down.

    • Melissa Smith on August 15, 2013 at 3:53 am

      meaning it lists out the span tag in text instead of translating the code

      • Derek Schmidt on August 15, 2013 at 12:36 pm

        Hmm, this was a post created as a follow up to using the radio buttons plugin for woocommerce. You probably see this because you are still using the drop downs. So try adding this in place of the sample code above and it should solve your problems:

        //Add prices to variations
        add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
        
        function display_price_in_variation_option_name( $term ) {
        global $wpdb, $product;
        
        $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );
        
        $term_slug = ( !empty( $result ) ) ? $result[0] : $term;
        
        $query = "SELECT postmeta.post_id AS product_id
        FROM {$wpdb->prefix}postmeta AS postmeta
        LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
        WHERE postmeta.meta_key LIKE 'attribute_%'
        AND postmeta.meta_value = '$term_slug'
        AND products.post_parent = $product->id";
        
        $variation_id = $wpdb->get_col( $query );
        
        $parent = wp_get_post_parent_id( $variation_id[0] );
        
        if ( $parent > 0 ) {
        $_product = new WC_Product_Variation( $variation_id[0] );
        
        $itemPrice = strip_tags (woocommerce_price( $_product->get_price() ));
        //this is where you can actually customize how the price is displayed
        return $term . ' (' . $itemPrice . ')';
        }
        return $term;
        
        }  
        
        

        Enjoy 🙂

  2. Melissa Smith on August 15, 2013 at 6:14 pm

    That worked!!! Thank you so much!!! 🙂

  3. Melissa Smith on August 15, 2013 at 11:28 pm

    Sorry to bother you again but would you happen to know if this code can be customized to only show the price for a variant that actually has a price? I have two variations and one has a price but the other doesn’t. So now the code makes it look like it’s an additional charge which it’s not (http://melissasmithart.com/product/benny/). Thanks for any help you can provide!

    • Derek Schmidt on August 15, 2013 at 11:46 pm

      Sure it can, although the easiest thing to do would be to mark that in your variation by setting the price to something like “Free” or “0”. Is that an option?

      • Melissa Smith on August 16, 2013 at 12:33 am

        No that’s not an option. Actually I worded that wrong previously. The two drop-downs are attributes and each attribute selection combination make up a different variation. I want the price to change with the first attribute and I want the image to change with the second attribute…this is why I’m using variations, otherwise I would just use a Product Add-On. Screenshot: http://melissasmithart.com/wp-content/uploads/Screen-shot-2013-08-15-at-7.26.20-PM-450×450.png

        • Derek Schmidt on August 16, 2013 at 1:22 pm

          So based on your screenshot and the page you linked to, is the problem that the price “$96” is showing up in that second dropdown even though you dont have a price set for those?

          You will need to setup each variation in the backend: i.e. 8×8 – No Saying = $15, 8×8 – Saying 1 = $20.00, 8×8 – Saying 2 = $30.00 and so one. The problem looks to be that you dont have variations or prices set for those particular variations.

    • Sabine Chelsett on November 20, 2016 at 4:21 am

      I have been in your position and needed more flexibility in showing prices in variation dropdowns. While looking for solutions I found the slightly clumsy named plugin Variation Price Hints (https://codecanyon.net/item/woocommerce-variation-price-hints/18772255) that can display prices (or price differences) even with multiple variation attributes. It can also be configured to not show prices that do not differ. Hope this helps!

  4. Melissa Smith on August 16, 2013 at 3:43 pm

    I do it’s just that an 8×8 No Saying is two attributes and the code puts the price next to each attribute. Could I just have the code to display prices only work on a certain product category?

    • Derek Schmidt on August 16, 2013 at 4:24 pm

      Yes, you just need to wrap the code in an if statement with the is_product_category conditional tag like so:

      < ?php
      //available conditional tags: http://docs.woothemes.com/document/conditional-tags/
      
      if (is_product_category( 'category ')) {
      
      //Add prices to variations
      add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
      
      function display_price_in_variation_option_name( $term ) {
      global $wpdb, $product;
      
      $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );
      
      $term_slug = ( !empty( $result ) ) ? $result[0] : $term;
      
      $query = "SELECT postmeta.post_id AS product_id
      FROM {$wpdb->prefix}postmeta AS postmeta
      LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
      WHERE postmeta.meta_key LIKE 'attribute_%'
      AND postmeta.meta_value = '$term_slug'
      AND products.post_parent = $product->id";
      
      $variation_id = $wpdb->get_col( $query );
      
      $parent = wp_get_post_parent_id( $variation_id[0] );
      
      if ( $parent > 0 ) {
      $_product = new WC_Product_Variation( $variation_id[0] );
      
      $itemPrice = strip_tags (woocommerce_price( $_product->get_price() ));
      //this is where you can actually customize how the price is displayed
      return $term . ' (' . $itemPrice . ')';
      }
      return $term;
      
      }  
      
      } else {
        //another block of code or leave this to do nothing	
      }
      ?>
      
  5. Melissa Smith on August 16, 2013 at 4:55 pm

    hmmmm…. I think the “< ?php" tags in this code broke my site. How else would I get the condition incorporated? Sorry I don't know code.

    • Derek Schmidt on August 16, 2013 at 5:34 pm

      So you will want to remove the opening and closing PHP tags like so:

      //available conditional tags: http://docs.woothemes.com/document/conditional-tags/
      
      if (is_product_category( 'category ')) {
      
      //Add prices to variations
      add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
      
      function display_price_in_variation_option_name( $term ) {
      global $wpdb, $product;
      
      $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );
      
      $term_slug = ( !empty( $result ) ) ? $result[0] : $term;
      
      $query = "SELECT postmeta.post_id AS product_id
      FROM {$wpdb->prefix}postmeta AS postmeta
      LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
      WHERE postmeta.meta_key LIKE 'attribute_%'
      AND postmeta.meta_value = '$term_slug'
      AND products.post_parent = $product->id";
      
      $variation_id = $wpdb->get_col( $query );
      
      $parent = wp_get_post_parent_id( $variation_id[0] );
      
      if ( $parent > 0 ) {
      $_product = new WC_Product_Variation( $variation_id[0] );
      
      $itemPrice = strip_tags (woocommerce_price( $_product->get_price() ));
      //this is where you can actually customize how the price is displayed
      return $term . ' (' . $itemPrice . ')';
      }
      return $term;
      
      }  
      
      } else {
        //another block of code or leave this to do nothing	
      }
      

      NOTE: You will want to replace the other code with the one posted here.

  6. Melissa Smith on August 17, 2013 at 2:07 am

    hmmm that didn’t work… it removed the prices. I replaced ‘category’ with ‘pet-portait-painting’ for this product category but they are no longer showing prices. http://melissasmithart.com/product/pet-portait-painting/

    • Derek Schmidt on August 17, 2013 at 2:19 am

      Your category is actually custom-pet-portrait-painting. Try that one then we can troubleshoot more if needed.

  7. Melissa Smith on August 17, 2013 at 5:45 am

    Yes I’m sorry I do have it as “if (is_product_category(‘custom-pet-portrait-painting’))” but it turned off all prices.

    • Derek Schmidt on August 17, 2013 at 5:01 pm

      Hi Melissa, can you try this? If this doesnt work then send me an email and I can help you troubleshoot from there.

      Replaces original code –

      //get prices of variations
      function display_price_in_variation_option_name( $term ) {
      global $wpdb, $product;
      
      $result = $wpdb->get_col( "SELECT slug FROM {$wpdb->prefix}terms WHERE name = '$term'" );
      
      $term_slug = ( !empty( $result ) ) ? $result[0] : $term;
      
      $query = "SELECT postmeta.post_id AS product_id
      FROM {$wpdb->prefix}postmeta AS postmeta
      LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id )
      WHERE postmeta.meta_key LIKE 'attribute_%'
      AND postmeta.meta_value = '$term_slug'
      AND products.post_parent = $product->id";
      
      $variation_id = $wpdb->get_col( $query );
      
      $parent = wp_get_post_parent_id( $variation_id[0] );
      
      if ( $parent > 0 ) {
      $_product = new WC_Product_Variation( $variation_id[0] );
      
      $itemPrice = strip_tags (woocommerce_price( $_product->get_price() ));
      //this is where you can actually customize how the price is displayed
      return $term . ' (' . $itemPrice . ')';
      }
      return $term;
      
      }
      
      //Add prices to variations
      function get_variation_price_from_category() {
      global $post;
      $terms = wp_get_post_terms( $post->ID, 'product_cat' );
      foreach ( $terms as $term ) $categories[] = $term->slug;
      
      if ( in_array( 'custom-pet-portrait-painting', $categories ) ) {
      	
        add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
        
      } 
      } //end function
      
      • Mario on October 28, 2013 at 7:59 pm

        Hi Derek! Thanks for this piece of code, it’s being very helpful. I have the same problem as Melissa, some of my products has two attributes (i.e: size & color) and I only want to show the price in the size dropdown, because the price does not depends on the color. I just need to filter the action to only show the price on certain attributes but I can’t make it work. Could you help me? Thanks a lot!

  8. Melissa Smith on August 17, 2013 at 8:05 pm

    That didn’t work either. What’s your email address and how much will this cost me?

    • Derek Schmidt on August 17, 2013 at 8:22 pm

      You can use the contact form on the website soni dont get spammed. Not costing you anything, just trying to help

  9. Vikram on September 18, 2013 at 5:48 am

    hey Derek,

    works great! any idea on how to obtain the variation id and price of a product given that i have the product id, attribute name and attribute slug?

    i am trying to change the layout of my variable product page by replacing the structure with a tabbed menu for each of the attributes. So, the price will be displayed alongside the product attributes along with an add-to-cart button. I have tried to do this by making modifications to the variable.php file. So far, the tab layout is working fine but still need to figure out a way to display the product price next to the attribute. Further, I am linking the add-to-cart button to the cart page by creating a URL like http://mysite.com/?add-to-cart/product_ID=ID&variation_ID=ID&attribute_name=attribute_slug/

    Any ideas if this approach is the best way to go about it? Thanks a lot 🙂

    • Vikram on September 18, 2013 at 8:40 am

      Ok i tried the following piece of code to get all available variations for a product but it isnt echoing anything:

      $available_variations = $product->get_available_variations();?>

      any suggests?

  10. Elliot on September 24, 2013 at 6:54 pm

    Hi – This is fantastic. Thanks for providing this. One thing: If I have a variation as 1 1/2lb or 1.5lb then the price does not show. I imagine the charector / or decimal point is causing a conflict. Have you an update on the code that will fix this.

    Thanks!

    • Derek Schmidt on September 26, 2013 at 11:23 am

      That has driven me crazy in the past. It seems to be a core issue in woocommerce. I have not had the time to find a work around but I need to. If I find one I will update you as soon as I get it.

  11. Bas Kasteel on September 25, 2013 at 11:28 am

    I tried it and i can see prices for the variations other than the default. The default shows no price at all. Can you help me.
    With the followwing change if ( $parent >= 0 i get it to list zero as price but its not the one that is allocated to the default product variation.

  12. Eronne on September 26, 2013 at 11:58 pm

    Hi great plugin! Works flawlessly on single product page , however it can’t make it work on archive (catalog) page. Any idea?
    Thanx!!

  13. Dave Teu on October 12, 2013 at 8:23 am

    All I can say is this is one of the best tutorial sites I visited, and your codes just work! Thank you very much Derek.

    Looking forward to hack allowing us to let woocommerce users visiting the product catalog page knows there’s actually different variation available in the product e.g. Available in S / m / l

  14. Danilo Nogueira on October 19, 2013 at 7:09 am

    Hello Derick, do not know if you remember me, but it helped me in big trouble adapting the radio button in my theme.

    I had problems doing the code in question work. I copied and pasted in functions.php of my theme but it did not work. Is not displaying anything on the side of values​​.

    http://www.tarumaperfumes.com.br

    • Derek Schmidt on October 20, 2013 at 11:48 pm

      Hi Danilo, I can try to help you trouble shoot this if you want — do you want to private message me a temporary login info so that I can sign in and see what is going on?

  15. Erik on November 9, 2013 at 2:52 am

    Hey, Great plugin,
    Is there anyway to show the sku number and limit number of the variation along with the price? Is that a possibility. Thank you so much

    • Derek Schmidt on November 13, 2013 at 5:46 pm

      Should be able to use something similar to

      < ?php echo $product->get_sku(); ?>
      

      You would do something similar for the price but it would change to get_price() or just price.

      Hope that helps

  16. Jesús O on November 21, 2013 at 11:56 pm

    Hi.
    Nice snippet.
    I just write to say the trick won’t work if you don’t define the attributes in Products->Attributes. At first I had only defined my attribute on the fly in the product page and got no prices in the dropdown. 😛
    Hope this helps somebody.

  17. owcv on January 16, 2014 at 5:21 pm

    When I use this code it first seem to work, but when I buy something I get this error on the cart page:
    Warning: Invalid argument supplied for foreach() in /var/www/mydomain.com/wp-content/plugins/woocommerce/classes/class-wc-product-variation.php on line 85

    • Derek Schmidt on January 17, 2014 at 1:36 am

      Thats weird, it worked for me and the others.. What theme/plugins are you using?

  18. bakko on January 28, 2014 at 3:46 pm

    I try it but i see 0€ ?!?

  19. Agnes Kelemen on February 10, 2014 at 12:07 pm

    Hi Derek,

    thanks for the snippet. I use Woo Radio Buttons for WooCoommerce variations, and added this snippet to my themes (Enfold) functions.php, at the very bottom, but only the first variation has the price, all other not. Please look at the product page: http://hungarianpianist.com/product/liszt/

    Thanks

    • Derek Schmidt on February 10, 2014 at 1:46 pm

      I remember someone having trouble with variations when having special characters on the attribute name. Try removing the “.” from No1. and so on. Instead try to make it say No 1 (no period) and see if that works..

  20. Agnes Kelemen on February 10, 2014 at 3:15 pm

    Hi Derek,

    I made all from the beginning, I made new Attributes and new product with variations, now all the prices are diplayed. So when someone uses this snippet, and something not work well,I recommend to make the Attributes and Variationes new. It will work!

  21. km on March 3, 2014 at 3:08 pm

    So the problem I’m having is in spaces. If I have attribute values with spaces it doesn’t work, If I remove spaces it works. Check the screenshot: http://f.cl.ly/items/3P46030a410x3L0L3T0G/dropdown-woo-price.jpg Any Idea?

  22. Jay on March 13, 2014 at 9:51 pm

    This is great! I was wondering if there is a way to include all the prices for all variables. At the moment, the code only shows all but the “from/lowest” price.

  23. Frank on May 7, 2014 at 6:29 am

    Thanks, that works great.
    Is there an Ajax price updater out there? Means, when I select an Variation with a different price, the poduct price gets automtically updated with the Variation price?

  24. Emily on May 12, 2014 at 12:16 am

    Great piece of code. I’m just having an issue with products that have more than one attribute. For example I have type 1) standard and 2) premium. They can then have the option for it to be assembled 1) yes and 2) no. In the back end I’ve set pricing for standard & yes, standard & no, premium & yes, and premium & no. On the front end it shows odd prices that don’t match up – is there a way to make them show dynamic pricing or not show the yes/ no pricing until the first variable has been selected?

    • Derek Schmidt on June 2, 2014 at 3:27 am

      Sure you could do this with a conditional statement or by using jquery. It would be hard for me to guess this without seeing your site so it would be nothing more than a guess but you could display none on the yes/no pricing then when user selects the first variable you could toggle that section to show.

  25. adam on June 29, 2014 at 12:11 pm

    Hi I display both inc vat and exc vat on my website and I am using the woocommerce code to revert to old v2.0 price display for variations so they show ‘From:’
    This works however the price now displays without the tax suffix ie exc vat | inc vat. Is there a piece of code to output this? (Its set in the price suffix box under tax settings tab).
    Deseratly need to sort. thanks

  26. Chris Werstiuk on September 13, 2014 at 9:20 pm

    Thanks! This worked perfectly in the pulldown!

  27. Jo on September 24, 2014 at 4:34 pm

    Hi Adam,
    I also have a site I’m working on that needs to have some products to show with/without to which I have set in the tax suffix, but they also want to show some with the total price, so frustrating as I can’t find the answer any where, how did you over come this problem in the end?

  28. Bree on October 23, 2014 at 8:54 am

    OMG THANK YOU. And even *more* thank you for also adding the adjustment for dropdowns that gets rid of the span tag. You’re site is forever bookmarked 🙂 🙂

  29. Bree on October 23, 2014 at 9:04 am

    Whoops- I guess I do have a question.. on a couple products I have multiple variations that can change the price, see here: http://deboskitchen.com/shop/beef-lasagna/. The first variation prices are correct and the total is correct when you make a 2nd variation selection, but the 2nd variations prices in the dropdown are arbitrary prices.. Do you understand why its choosing those particular values and how I might change it?

    THANK YOU 🙂

  30. Kandra on December 7, 2014 at 8:28 pm

    Ditto all the other comments re: Thank you for this code! It’s working great on single products, but we have product bundles, and the prices are not displaying in the drop down on the bundled product pages. Would you have any assistance towards that?

  31. Chris Darts on January 20, 2015 at 7:58 am

    Is it possible to order the variations by price within this code?

  32. David on March 21, 2015 at 7:50 pm

    This is exactly what I needed. A client wanted this feature. It works great on most of her product lines, except for the “bundle” products where items are combined, and in that case a price only shows up next to one product, but none of the other product bundles do and it has code around it like this: $40.00. Any idea why this would happen just to the bundle products?

    • David on March 21, 2015 at 7:51 pm

      Obviously code doesn’t appear in these comments. There is a “span” tag around the price when it shows up next to the one bundle item that shows a price. Just to clarify.

  33. Will on July 21, 2015 at 5:10 am

    Just worth noting that woocommerce_price is now Deprecated and you should use wc_price instead.

  34. Jonathan on June 3, 2017 at 8:40 am

    Hello Derek,
    Thanks for posting this information. I’ve had a heck of a time finding any code online for making price display next to variations. Which I thought would be a popular request.

    I tried your code,
    `
    //Add prices to variations
    add_filter( ‘woocommerce_variation_option_name’, ‘display_price_in_variation_option_name’ );

    function display_price_in_variation_option_name( $term ) {
    global $wpdb, $product;
    $result = $wpdb->get_col( “SELECT slug FROM {$wpdb->prefix}terms WHERE name = ‘$term'” );
    $term_slug = ( !empty( $result ) ) ? $result[0] : $term;
    $query = “SELECT postmeta.post_id AS product_id FROM {$wpdb->prefix}postmeta AS postmeta LEFT JOIN {$wpdb->prefix}posts AS products ON ( products.ID = postmeta.post_id ) WHERE postmeta.meta_key LIKE ‘attribute_%’ AND postmeta.meta_value = ‘$term_slug’ AND products.post_parent = $product->id”;
    $variation_id = $wpdb->get_col( $query );
    $parent = wp_get_post_parent_id( $variation_id[0] );
    if ( $parent > 0 ) { $_product = new WC_Product_Variation( $variation_id[0] );
    $itemPrice = strip_tags (woocommerce_price( $_product->get_price() )); //this is where you can actually customize how the price is displayed
    return $term . ‘ (‘ . $itemPrice . ‘)’;
    } return $term;
    }
    `
    But I suspect it needs some changes for the latest WC versions.
    It partly works, except that it makes the main product price and the variation prices (in the drop down) all have the dollar sign after the amount. Like 56.99$

    Any idea what needs updating?

    • Jonathan on June 3, 2017 at 8:45 am

      Actually, Please ignore my comment. I’ve just discovered this issue is happening on the site even without your code. So, something else must have changed, and screwed things up, prior to me making this edit. Back to the drawing board!

  35. Will on July 17, 2017 at 2:11 am

    This snippet still works a treat. For those who come after me:-

    I am using WC Variations Radio Buttons plugin (Woocommerce Radio Buttons Plugin mentioned in this post has not been updated for 2 years) so I used the code from the first comment and replaced the deprecated ‘woocommerce_price’ with WC_price.

    Thank you

Leave a Comment