Add Prices Next to Woocommerce Variations

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

Add Prices Next to Woocommerce Variations was last modified: July 28th, 2013 by Derek Schmidt

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

Add Prices Next to Woocommerce Variations was last modified: July 28th, 2013 by Derek Schmidt

43 Responses to “Add Prices Next to Woocommerce Variations”

  1. 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
  2. Frank

    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?

    Reply
  3. Emily

    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?

    Reply
    • Derek Schmidt

      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.

      Reply
  4. adam

    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

    Reply

Leave a Reply

Please Note: We do our best to reply to all comments within a timely manner. However sometimes we can get pretty busy and this may delay our response a bit. If you need immediate assistance with a technical question, you may want to also try using Wordpress Forums or Stack Overflow.