Variation Selection Broken on Personalized Products (Desktop & Mobile)

Hi,

We have identified a serious usability issue affecting our personalized products. This is causing significant problems for customers during the ordering process and likely results in abandoned purchases.

Product 1:

Desktop

When selecting a variation (in this case the country flag), the selected flag is not visually highlighted or updated. However, the SKU below the product meta changes, which indicates that the variation is actually selected in the background.

This is very confusing because customers assume that their click was not registered.

Mobile

There are two issues:

1. After entering a name in the personalization field, selecting a flag immediately adds the product to the cart instead of simply selecting the variation.
2. Even before entering anything, tapping almost anywhere on the page automatically focuses the name input field. This makes it very difficult to select the product variations first.

⸻

Product 2:

The same behavior occurs here.

No matter which variation the customer tries to select, the focus immediately jumps to the name input field, making it nearly impossible to choose any variation.

⸻

Impact

This issue has become a major problem for our customers. Many users are struggling to configure and purchase personalized products correctly, especially on mobile devices.

Could you please investigate what is causing this behavior and provide a proper fix?

The expected behavior should be:

* Variation selections should immediately display their selected state.
* Clicking a variation must never automatically add the product to the cart.
* The personalization input should only receive focus when the customer intentionally taps the input field.
* Customers should be able to select all variations first and enter their personalization afterwards without any unexpected interactions.

Since these products generate a significant portion of our sales, we would appreciate if this issue could be treated with high priority.

Thank you!

Hello,

To troubleshoot this, please deactivate all plugins except the essential ones:
– WoodMart Core
– WooCommerce
– WPBakery Page Builder or Elementor

If the issue disappears, reactivate the others one by one to find the conflict.

If it persists with everything else off, please share your admin credentials in the Private content field and confirm we may temporarily deactivate plugins and switch themes for testing (15 to 20 minutes). Please back up your site before granting access.

Best regards,
XTemos Studio

[ytodae]

Hello,

Thank you for your guidance. We followed the recommended troubleshooting process and identified WP Rocket as the source of the issue.

We deactivated all plugins except:

– WoodMart Core
– WooCommerce
– WPBakery Page Builder

With this configuration, the problem disappeared completely. After reactivating WP Rocket, the issue immediately returned.

We then disabled the following WP Rocket setting:

WP Rocket -> File Optimization -> CSS Files -> Optimize CSS Delivery

After saving the setting and clearing the WP Rocket and CDN caches, the issue disappeared.

Further investigation showed that the visible WooCommerce add-to-cart button had the correct dimensions:

– Width: approximately 174 px
– Height: 42 px

However, its ::before pseudo-element had expanded to approximately:

– Width: 1,200 px
– Height: 4,457 px

The computed styles showed:

Button position: static
Button overflow: visible
::before position: absolute

This invisible pseudo-element covered almost the entire boxed content area and caused the following behavior:

– Clicking almost anywhere triggered the add-to-cart button.
– If the required personalization field was empty, the browser focused that field because the form validation was triggered.
– If the personalization field was completed, clicking a variation or an empty area could add the product directly to the cart.
– The oversized invisible button layer also interfered with the visual interaction of the variation swatches.

Our confirmed workaround was:

1. Go to WP Rocket -> File Optimization -> CSS Files.
2. Disable “Optimize CSS Delivery”.
3. Save the changes.
4. Clear the WP Rocket cache.
5. Clear the RocketCDN cache if RocketCDN is active.
6. Test the product page again in a private browser window.

We did not add any custom CSS. Disabling WP Rocket’s “Optimize CSS Delivery” option was sufficient to resolve the problem.

The product variations are now selectable and visually updated correctly. Clicking empty areas no longer triggers the add-to-cart button, and the personalization field only receives focus when clicked intentionally.

This appears to be a compatibility issue between WoodMart’s add-to-cart button styling and WP Rocket’s optimized CSS generation.

We are posting these findings as a workaround for other WoodMart users who may experience the same problem.

• This reply was modified 4 days, 21 hours ago by ytodae.

Hi there,

Thanks a lot for the very detailed investigation and for sharing the exact steps and findings.

From your description, this is indeed a conflict triggered by WP Rocket’s “Optimize CSS Delivery” altering the computed styles of the add-to-cart button (its ::before pseudo-element), which then overlays the page and blocks/hi-jacks clicks on variation swatches and focuses the personalization field. Your workaround is correct: disabling Optimize CSS Delivery and fully clearing both WP Rocket and RocketCDN caches resolves it.

Thank you again for posting the workaround; this will be helpful for other users as well.

Kind regards,
XTemos Studio

[Author]

Posts