Price display for products with variations

For products with variations, the highest and lowest price appear side by side as a double price.
If I hide the double price, the price of the product with the lowest price appears. However, I want the price of the product with the highest price to be displayed. I did this with custom code, but this may cause other problems.

You should add to your settings page whether the highest or lowest price is displayed as the default price.
I think this would be an easy and experience-improving developing prosccess.

Attachments:

You must be logged in to view attached files.

Hello,

Try to add the following PHP code snippet to the child theme function.php file to do this

add_filter( 'woocommerce_variable_sale_price_html', 'wpglorify_variation_price_format', 10, 2 );
add_filter( 'woocommerce_variable_price_html', 'wpglorify_variation_price_format', 10, 2 );
 
function wpglorify_variation_price_format( $price, $product ) {
 
// Main Price
$prices = array( $product->get_variation_price( 'max', true ), $product->get_variation_price( 'min', true ) );
$price = $prices[0] !== $prices[1] ? sprintf( __( 'Up To: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
 
// Sale Price
$prices = array( $product->get_variation_regular_price( 'max', true ), $product->get_variation_regular_price( 'min', true ) );
sort( $prices );
$saleprice = $prices[0] !== $prices[1] ? sprintf( __( 'Up To: %1$s', 'woocommerce' ), wc_price( $prices[0] ) ) : wc_price( $prices[0] );
 
if ( $price !== $saleprice ) {
$price = '<del>' . $saleprice . $product->get_price_suffix() . '</del> <ins>' . $price . $product->get_price_suffix() . '</ins>';
}
return $price;
}

Best Regards.

[zngntr]

This is not a discount. Therefore one of the two prices should not be crossed out. Only the price of the highest priced product should be selected by default.

I have done this before with the following code:

/**
* Display the price of the highest priced variation for WooCommerce variable products
**/
add_filter(‘woocommerce_variable_price_html’, ‘custom_variation_price’, 10, 2);

function custom_variation_price( $price, $product ) {
// Get the highest priced variation
$highest_price = $product->get_variation_price(‘max’);

if ($highest_price > 0) {
// Display the highest price
$price = wc_price($highest_price);
}

return $price;
}

CSS code:
/* Style the selected variation between “1000g” and “500g” with a green elliptical border */
.wd-swatches-product.wd-bg-style-1 .wd-swatch[data-value=”1000g”].wd-active,
.wd-swatches-product.wd-bg-style-1 .wd-swatch[data-value=”500g”].wd-active {
border: 2px solid #83B735; /* 2px solid green border */
border-radius: 14px; /* Make it elliptical */
padding: 5px; /* Adjust padding as needed */
}

/* alt text */

[class*=”wd-swatches”].wd-bg-style-1 .wd-swatch.wd-bg:is(.wd-active,:hover:not(.wd-disabled)):after, [class*=”wd-swatches”].wd-bg-style-1 :is(.wd-swatch-wrap a:hover,.wd-swatch-wrap.wd-active) .wd-swatch.wd-bg:after, [class*=”wd-swatches”].wd-text-style-1 .wd-swatch.wd-text:is(.wd-active,:hover:not(.wd-disabled)):after, [class*=”wd-swatches”].wd-text-style-1 :is(.wd-swatch-wrap a:hover,.wd-swatch-wrap.wd-active) .wd-swatch.wd-text:after {
opacity: 0 !important;
}

I was going to open another topic, but now I’ll add it under this section.
The price of the highest priced product

• This reply was modified 11 months ago by zngntr.

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been resolved or not? Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Best Regards.

I had already solved the problem with my own code and I had requested an improvement for the panel from you. The code you suggested for me did not work as I wanted because I said it perceives it as a discount and I showed my own code. There is no problem with this on my site now. I reported the problem with the variation with another ticket.
Instead of doing the operations related to variation prices with custom code, it should be done through the woodmart settings panel. This was a development suggestion. By adding a button there, the user should be able to choose which of the high price or low price will be displayed.
That’s why I mentioned that the option to display the highest price should also be added to the panel. It will be better for those of us who use your theme.

Hello,

For the betterment of the Theme you can post your suggestions/requests related to the Theme on the following Feature Request thread:
https://xtemos.com/forums/topic/features-requests-2/

So, if the Development Department finds it fits with the Theme environment then surely they will look through it.

Thanks for your understanding.

Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts