Since update: Error when viewing cashed product pages with attributes in the URL

Hello robertrosanke,

Thank you for contacting WooCommerce support.

I understand you’re facing a problem with preselected attributes on variable product pages after the WooCommerce update. You have noticed that server-side selection now overrides the previous JavaScript behavior, causing issues with caching and preselection.

Did this issue start with WooCommerce version 9.6.0?
Were any cache or other related plugins updated recently?

To assist further, I’ll need to review your site’s System Status Report.
Please share it via https://pastebin.com and provide the link here.

Once I have more information, I will be in a better position to assist you further.

Best regards.

Hello @doublezed2 ,

Unfortunately, I can’t say exactly which WooCommerce version started the problem.

With WooCommerce 9.5.1, if I remember correctly, everything still worked as usual.

Apparently the problem has been active since 9.5.2?
Maybe I am also wrong.

Here is the link to pastebin: https://pastebin.com/x57bxKKB

As I said: the problem occurs when a cached product page that has an identifier for a variation in the URL is called from cache.
(We ignore the pa*-parts of the query in our cache config. This is a special config. Normally, product variants are not explicitly ignored via WooCommerce and WP Rocket, so product pages with pre-selected variants are usually delivered uncached).

Caching takes place with WP Rocket.
But that shouldn’t be the problem.

It would be good if the WooCommerce frontend scripts (again) actively searched for the query parameters in the URL and, if found, selected the corresponding product variant.

Hello robertrosanke,

Thank you for your reply.

<span style=”box-sizing: border-box; margin: 0px; padding: 0px;”>To determine if a WooCommerce update caused the issue and pinpoint which one, try setting up a staging site. Then, you can use the?WP Rollback plugin?to switch to older versions and test.?</span>

It’s also a good idea to contact WP Rocket support to see if they’re aware of this issue. They might have some helpful insights.

This is a unique issue, so once I have more information I will be happy to assist you further.

Best regards.

Hello @doublezed2 ,

Unfortunately, even with rollbacks up to version 9.4.0, I couldn’t find out when the problem started.
It may have existed for some time, and we only noticed it recently.

Perhaps we can relabel the topic from “Error” to “Suggestion for improvement”.

Proposal

It would be good if there were a PHP filter that allows developers to choose between a server-side and a client-side preselection of a product variant for product pages of variable products with attribute_pa_* properties in the query parameters.

Use case

The use case clearly relates to online stores that send users directly to product pages that preselect properties via URL.
This is common for Google Shopping Ads, for example. Performance is important there, so we as store operators are very interested in delivering such specific variant page views via cache (e.g. via WP Rocket).
We therefore cache a product page without preselection and deliver this cached version, regardless of which query parameters are in the URL.
To ensure that the whole process runs smoothly, the product variant should then be selected on the client side via JavaScript after the cached product page has been delivered.

Implementation

By default, it can remain as it is.
On the server side in wc_dropdown_variation_attribute_options(), select the variants that can be read in the URL.

If the filter described above is used by a developer to perform the preselection on the client side, the following should happen:

1.) The function wc_dropdown_variation_attribute_options() or its caller ensures that only the product variation defined as the preferred variant in the backend is marked as “selected” in the HTML on the server side and delivered. (Or no variation if no preferred variation has been defined by the store operator). The query parameters in the URL are therefore ignored during server-side HTML generation.
2.) On the client side, i.e. via JavaScript, the possibly existing query parameters in the URL of a product page should be synchronized with the selectable product properties. This means: If, for example, ?attribute_pa_color=red is in the URL, then the WooCommerce JavaScript should automatically select the red product variant, if possible.

Here is an example of JavaScript code that only refers to the color example.
If you were to implement it ready for production, you would probably first go through all the properties in the add to cart form in a loop, then check the query parameters associated with the individual select fields and set any values found accordingly via JavaScript.

function initSingleProductPageVariationsForm() {
	const searchParams = new URLSearchParams(window.location.search);
	const COLOR_ATTR = "attribute_pa_color";
	const queriedValue = searchParams.has(COLOR_ATTR) ? searchParams.get(COLOR_ATTR) : '';

	const selectField = document.querySelector('form.variations_form.cart select[name="' + COLOR_ATTR + '"]');
	if (!selectField) return;

	let isQueriedValueAvailable = false;
	const selectedIndex = selectField.selectedIndex;
	for (let i = 0; i < selectField.length; i++) {
		const option = selectField.options[i];
		isQueriedValueAvailable = queriedValue === option.value;

		if (isQueriedValueAvailable) break;
	}

	selectField.value = queriedValue && isQueriedValueAvailable ? queriedValue : "";

	selectField.dispatchEvent(new Event("input", {
		bubbles: true
	}));
	selectField.dispatchEvent(new Event("change", {
		bubbles: true
	}));

	console.log({
		isQueriedValueAvailable,
		queriedValue,
		selectField
	})
}

jQuery(function() {
  initSingleProductPageVariationsForm()
});

We, and presumably many other online store operators, would be happy to see an improvement in WooCommerce in the future.

If the proposed improvement lands, then caching plugins, such as WP Rocket, can automatically and safely ignore URL parameters in the style of attribute_pa_* on product pages, so that many stores should generally benefit from this improvement in terms of loading time and thus also conversion rate.

Hello robertrosanke,

Thank you for your reply and feedback.

I understand you want a PHP filter to control variant preselection on product pages, allowing developers to choose between server-side and client-side selection.

This requires custom development and falls outside our support scope.
It would be best to consult a professional developer about this.
You can find a good developer at Codeable.io or WooExperts.

I recommend posting your suggestion on our feature request portal, where our team reviews and considers improvements based on user needs.

Let me know if you have further questions.

Best regards.

Hi @doublezed2 .

Thank you for your answer.

I have now submitted a feature request.
Anyone who would like to support this with an upvote is welcome to do so: https://woocommerce.com/feature-request/performance-caching-of-product-pages-with-preselected-product-variant/