show variation price in dropdown
-
On my Woocommerce site, product variations range in size and each size has a different price. But only min and max price show in a range on the single product page. The middle option price is unknown until a customer selects that option and views the cart.
I would really like the “Choose an option” dropdown to show, not just the 3 sizes of the product that are available, but also the price beside each size.
I found some older code on Stackoverflow.com that seems to accomplish this. However, I am concerned about using this code from 2016. I don’t know PHP, and I worry that this code could have errors that might emerge later or conflict with Woocommerce updates…
Is there a way to accomplish this goal using a method or code that Woocommerce has authored or sanctions?
Thank you for your help!
-
This topic was modified 6 years, 9 months ago by
susantau.
The page I need help with: [log in to see the link]
-
This topic was modified 6 years, 9 months ago by
-
I found some older code on Stackoverflow.com that seems to accomplish this. However, I am concerned about using this code from 2016. I don’t know PHP, and I worry that this code could have errors that might emerge later or conflict with Woocommerce updates…
That is a valid worry. Code is always changing. However if it’s working now, there is a good chance it will continue working. We don’t have any “sanctioned” code that will do this. Even if we had custom code listed on our site, there would be the same worry because code has to be maintained and updated. If you aren’t comfortable working with php, I recommend establishing a relationship with a developer that you can go to for custom coding questions. I found that super helpful when I was a merchant.
The middle option price is unknown until a customer selects that option and views the cart.
Another idea (it’s a hacky-y idea mind you) is to enter the price in the variation’s description. That way when the customer selects the variation, the price will show up beneath it and they don’t have to wait until they view the cart to see it.
I’ll show you what I mean:
Screenshot of the variation description in the backend: https://cld.wthms.co/AijD9p
Screenshot of the customer view: https://cld.wthms.co/aMgOBUIf you change prices or do a sale you’d need to remember to change it there too, so it’s not ideal, but thought it might help to mention it.
@kristinaplauche
Wow, Kristina, thank you so much for your thoughtful and informative reply! I think I will probably hang in with that code addition to functions.php that I got from STackoverflow for now – cause I just think it looks so great to have the prices right beside the variations in the dropdown — BUT I am going to keep an eagle eye on the site for issues that this aging code could be causing. If I begin to suspect problems, I will definitely opt for the method you suggest – I don’t think it’s so hack-y at all!
??Again, thanks for the insightful and helpful response!! !
SusanSo glad that was helpful! Thanks for letting me know Susan. ?? I’ll marked this as resolved now. Good luck with your site!
Dynamic data like price should never be statically included in descriptions. Here’s some useful code from the good folks at Designloud (who I don’t know at all, but found in the quest for an good solution to this problem). https://designloud.com/add-prices-next-to-woocommerce-variations/
//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;}
Dear John, THANK you for sharing this code! Could you tell me if the code you are giving above is superior to the code that I am currently using? (I got it here: https://stackoverflow.com/questions/12272733/woocommerce-get-variation-product-price)
Pasting code below:
// display the product variation price inside the variations dropdown
add_filter( ‘woocommerce_variation_option_name’, ‘display_price_in_variation_option_name’ );
function display_price_in_variation_option_name( $term ) {
global $wpdb, $product;if ( empty( $term ) ) return $term;
if ( empty( $product->id ) ) return $term;$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] );
return $term . ‘ (‘ . wp_kses( woocommerce_price( $_product->get_price() ), array() ) . ‘)’;
}
return $term;}
Thanks again
This is how it works on my site with no direct db queries:
(Tested with WP 5.0 and WC 3.5.2)
Please note that this works only if you have one attribute per product (e.g. size or color, but not both), otherwise my function will return original variation (without price).function display_price_in_variation_option_name( $term ) { $product = wc_get_product(); $id = $product->get_id(); if ( empty( $term ) || empty( $id ) ) { return $term; } if ( $product->is_type( 'variable' ) ) { $product_variations = $product->get_available_variations(); } else { return $term; } foreach($product_variations as $variation){ if(count($variation['attributes']) > 1){ return $term; } foreach($variation['attributes'] as $key => $slug){ if("attribute_" == mb_substr( $key, 0, 10 )){ $taxonomy = mb_substr( $key, 10 ) ; $attribute = get_term_by('slug', $slug, $taxonomy); if($attribute->name == $term){ $term .= " (" . wp_kses( wc_price($variation['display_price']), array()) . ")"; } } } } return $term; } add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
@branahr , is there a way I could make this work if there is more than one attribute per product? For example, I have clothing items that vary in price according to their size attribute, but not their colour attribute. Yours is the only code that I’ve found that works for me thus far, but I’m loathe to add each colour variation as a seperate product simply to keep the drop down price variations visible and functional. Please tell me there is a way!
@brinnjal we can not show the variation price if there is more than one attribute because in this case the price is the result of attribute combinations. I believe you understand that. But if you have only one attribute that affect the price (size) and another one that doesn’t (color), then you could edit my function to following:
function display_price_in_variation_option_name( $term ) { $product = wc_get_product(); $id = $product->get_id(); if ( empty( $term ) || empty( $id ) ) { return $term; } if ( $product->is_type( 'variable' ) ) { $product_variations = $product->get_available_variations(); } else { return $term; } foreach($product_variations as $variation){ /*if(count($variation['attributes']) > 1){ return $term; }*/ foreach($variation['attributes'] as $key => $slug){ if("attribute_" == mb_substr( $key, 0, 10 )){ $taxonomy = mb_substr( $key, 10 ) ; if( $taxonomy =="pa_size"){ $attribute = get_term_by('slug', $slug, $taxonomy); if($attribute->name == $term){ $term .= " (" . wp_kses( wc_price($variation['display_price']), array()) . ")"; } } } } } return $term; } add_filter( 'woocommerce_variation_option_name', 'display_price_in_variation_option_name' );
As a result, you should have prices shown only in size variations, but not in colors or any other attribute dropdowns. I hope it helps.
@branahr thank you so much for your reply! I apologise, yes I should have better clarified that only one attribute would be linked to a change in the price in any given product. I am so happy I found this topic, I’ve been struggling for a while, thank you thank you!
Seems as if all of your codes above don’t work anymore. As well as code for another product tab,
That’s the code for the tabs.
add_filter( 'woocommerce_product_tabs', 'wp_bibel_de_add_woocommerce_product_tabs' ); function wp_bibel_de_add_woocommerce_product_tabs( $tabs ) { $tabs['wp_bibel_de_custom_tab'] = array( 'title' => __( 'text' ), 'priority' => 10, 'callback' => 'wp_bibel_de_new_product_tab_callback' ); return $tabs; }
Has anyone an idea?
@branahr
Thanks a lot for providing such a great code snippet.
Works like a charm …@tajdarkhan You are welcome!
@branahr thank you for your code. It works great in my website for all products except for one. Is it possible to edit the original code you provided to exclude one specific product ID or product category, OR for it to apply to only specific product categories? If so, how would I edit the php you provided to be able to do that? Thank you in advance!
@leahjm77 This is for products that you want to exclude:
After this line at the top:
$id = $product->get_id();
add following code:$products_to_exclude = array(10, 20, 30); if(in_array($id, $products_to_exclude)){ return $term; }
As you can guess, products with IDs 10, 20 and 30 will be excluded and original term will be returned (without override).
If you want to apply override only to specific products, then change this code to this:
$products_to_include = array(10, 20, 30); if(!in_array($id, $products_to_include)){ return $term; }
@branahr thank you very much for your reply, I really appreciate it. I was mistaken in that I originally was using the code that @johnlunceford provided. I also have a bit extra code because I’m using the Woo Discount Rules plugin. I tried changing the original part of the code to what you provided. It seemed to work but then I found an issue in my cart. I switched back to the code I had which solved the cart issue except for the one product that’s not showing the prices correctly. I was wondering if you would know how to edit this code to exclude a product as you provided previously? Thanks again, I really appreciate it.
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] ); return $term . ' (' . woocommerce_price( $_product->get_price() ) . ')'; } return $term; } function woocs_fixed_raw_woocommerce_price_method($tmp_val, $product_data, $price){ remove_filter('woocs_fixed_raw_woocommerce_price', 'woocs_fixed_raw_woocommerce_price_method', 10, 3); global $flycart_woo_discount_rules; if(!empty($flycart_woo_discount_rules)){ global $product; if(empty($product)){ $discount_price = $flycart_woo_discount_rules->pricingRules->getDiscountPriceOfProduct($product_data); if($discount_price !== null) $tmp_val = $discount_price; } } add_filter('woocs_fixed_raw_woocommerce_price', 'woocs_fixed_raw_woocommerce_price_method', 10, 3); return $tmp_val; } add_filter('woocs_fixed_raw_woocommerce_price', 'woocs_fixed_raw_woocommerce_price_method', 10, 3);
- The topic ‘show variation price in dropdown’ is closed to new replies.