Error in displaying the right variant after reload

[Fletsch]

There seems to be a bug in the theme, which is also present in your demo. If you click on a variant on the product page and then reload the page, the variant or its price is still active, but it is not marked as active. So it is not visually apparent which variant is selected.

You can test it in our demo here: https://woodmart.xtemos.com/shop/lighting/montes-scelerisque/

The product images remain the previously selected ones when the page is reloaded. But the Swatch image is no longer underlined.

I have on my site different prices per variation and then of course everything is distorted, because price is displayed, of which you do not know to which varainte it belongs.

In short: The variations should still be visually highlighted even after a reload if the price stays. If not the price should be reseted.

Could you please solve this? Thanks id advance.

Best regards

• This topic was modified 1 year, 10 months ago by Fletsch.

Hello,

On my side it works well, please check the below video.

https://monosnap.com/file/QOZ15tZoRpeDvmYRvxACCt38g80nqs

If I missed something, please let me know. Also, please send me a video of how it works on your side.

I await your response.

Kind Regards

Hi Luke

Thanks for your answer. May I ask which browser you are using? I use Firefox and thehre the problem does exist, see my screen recording. But after your answer I also tried it in Safari and there the problem doesn’t exist. I did the recording in Safe Mode so it’s not coming from a browser extension.

https://1drv.ms/v/s!AttD-ea4FT8mgQ8SEyO67v465DYF?e=rNoc7z

Best regards

Hello,

I am using the Chrome browser. I have check this issue on the default theme in the Firefox browser and there the issue persists as well so in this case it is not related to our theme because the default theme has the same issue, please check the below video.

https://monosnap.com/file/DqLEgAQVjhs8WRgyyavb1ugbtPVi1r

Kind Regards

Hi Luke

Thaks for your answer and checking it. But I think you missunderstood me a bit. It’s not basically a problem, that a variant is still selected after reloading. The problem is that the selected variant is not highlighted anymore in Woodmart after reloading the site. It’s verry confusing to the user if you have different prices for different variants if the variant is not visually selected anymore. In the basic WooCommerce installation with a dropdown the variant stays selected and the variant is also still selected in the dropdown. So selection, price and variant images are stringent to each other. But while using the Swatches in Woodmart this isn’t working. As you can see in my previous video the variant is selected but not visually recognizable as selected after a relaod. The underline oder circle around the variant (based on theme settings) is missing.

Best regards

Hello,

Please add the below code to the “On document ready” area in Theme Settings -> Custom JS.

(function($) {
$('.variations_form').on('show_variation', function(e, variation) {
	if ( ! $(this).find('.wd-swatch.wd-active').length ) {
						$(this).find('select').each(function () {
							var $select = $(this);
							var value = $select.val();

							if ( ! value ) {
								return;
							}

							$select.siblings('.wd-swatches-product').find('.wd-swatch[data-value=' + value + ']').addClass('wd-active');
						});
					}
	});
})(jQuery);

Then clear the cache and recheck the issue.

Kind Regards

[Author]

Posts