Having the variant selected by default on the homepage and in the store

My products have two variations, 1000g and 500g. I wanted the price of the 1000g variation to be displayed by default and the 1000g variation to be selected. I did this with the following codes and it worked as I wanted on the single-page product.

But on the products on the homepage and store page, the variation is not selected by default 1000g (ie the highest priced) by default. The selected variation should appear in a green elliptical frame.

functions.php

/**
* 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 settings:

/* 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;
}

Hi zngntr,

Thanks for reaching to us.

1. Single product default variation

You don’t need to use Custom coding, please edit product > scroll down to Product data > Variations tab and you can set default variations https://prnt.sc/J4JUdwCrvB5h

2. Store pages

Sorry to say but right now there is no option in Theme Settings available for that.

+ You can create a ticket here: https://woodmart.canny.io/feature-requests so our developers will consider such a feature.

+ You need to find a third party plugin to achieve more functionality that best suits you.

+ Or you can reach out directly to the WooCommerce plugin’s support team https://wordpress.org/support/plugin/woocommerce/, who are better equipped to provide you with the guidance you requires.

Regards,

I know there are no settings in the theme, but it is important for me to solve this problem. Because by default the green frame is not around 1000g, customers are constantly messaging me asking if the price is for 1000g or 500g. This creates a problem in customer experience. I hope I was able to explain how important this tiny detail is for me.
For this, I created a custom-javascript.js file in the child theme folder. I also wrote custom codes to solve the problem, but I couldn’t solve this problem. I would like to ask for your help as my technical skills are now beyond this problem.
Can you write the code that will ensure that the 1000 g variation is selected by default in the products on the shop page?
Currently, it looks like in the blue frame. I want it to appear as I show with red arrows.

I would be very grateful if you can give the necessary codes.

Attachments:

You must be logged in to view attached files.

Hi zngntr,

It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

You can create a ticket here: https://woodmart.canny.io/feature-requests so our developers will consider such a feature.

Regards,

[Author]

Posts