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
