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