Add Prices Next to Woocommerce Variations

Posted by & filed under Tutorials, Web Design Tutorials, Wordpress.

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 ;)

Like this? Share it with your friends!
Facebook Twitter Linkedin Email

39 Responses to “Add Prices Next to Woocommerce Variations”

      • Derek Schmidt

        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 :)

        Reply
  1. Melissa Smith

    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!

    Reply
    • Derek Schmidt

      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?

      Reply
      • Melissa Smith

        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

        Reply
        • Derek Schmidt

          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.

          Reply
  2. Melissa Smith

    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?

    Reply
    • Derek Schmidt

      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	
      }
      ?>
      
      Reply
    • Derek Schmidt

      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.

      Reply
    • Derek Schmidt

      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
      
      Reply
      • Mario

        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!

        Reply
  3. Vikram

    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 :)

    Reply
    • Vikram

      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?

      Reply
  4. Elliot

    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!

    Reply
    • Derek Schmidt

      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.

      Reply
  5. Bas Kasteel

    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.

    Reply
  6. Eronne

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

    Reply
  7. Dave Teu

    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

    Reply
  8. Danilo Nogueira

    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

    Reply
    • Derek Schmidt

      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?

      Reply
  9. Erik

    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

    Reply
    • Derek Schmidt

      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

      Reply
  10. Jesús O

    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. :P
    Hope this helps somebody.

    Reply
  11. owcv

    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

    Reply
    • Derek Schmidt

      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..

      Reply
  12. Agnes Kelemen

    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!

    Reply
  13. Jay

    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.

    Reply

Leave a Reply