Flynn Audio — Missing Add-to-Cart Button UX Issue
Overview
On Flynn Audio's WooCommerce shop, the Add to Cart button does not appear on product pages until the customer selects a product option (e.g., DIY vs. installation). This creates unnecessary friction at a critical conversion point — a visitor landing on a product page sees no obvious purchase path until they interact with the option selector first.
Sam (Flynn Audio) flagged this as a recent regression, noting the behavior had changed within the prior two weeks and was not intentional. The issue coincided with backend work being done across multiple client sites, suggesting an unintended side effect of a plugin update or theme/WooCommerce configuration change.
The Problem
- Expected behavior: Add to Cart button is visible on page load, regardless of whether a product variation or option has been selected.
- Actual behavior: Add to Cart button is hidden until the customer selects an option (Install vs. DIY). No button = no obvious next step = increased abandonment risk.
- Likely cause: A WooCommerce variable product or product add-on configuration that conditionally renders the button only after option selection. May have been introduced by a plugin update or a deliberate (but misguided) UX change during recent backend work.
Related Change: Installation Option Location
Separately, the "Installation" option was moved from the checkout flow to individual product pages, requiring customers to choose Install vs. DIY per item rather than once at checkout. Sam's preference is to revert this to the checkout location, particularly because:
- Customers adding multiple items would be prompted for the same choice repeatedly on each product page.
- The checkout location is less disruptive to the browsing/add-to-cart flow.
These two issues may share a root cause — both suggest a WooCommerce product options configuration was modified.
Impact
- Reduces conversion rate on the shop by removing the primary CTA from the initial product page view.
- Particularly harmful on mobile, where users may not scroll or interact further if no action is immediately visible.
- Conflicts with the principle of least resistance for e-commerce UX — the path to purchase should require as few steps as possible.
Resolution
Assigned to Karly (Asymmetric) as a tracked action item:
- [ ] Restore Add to Cart button visibility on product page load (prior to option selection)
- [ ] Move the Install/DIY option back to the checkout flow rather than individual product pages
Generalizable Lesson
WooCommerce variable/add-on products can conditionally suppress the Add to Cart button when required options are unconfigured or when "require selection before add to cart" settings are enabled. Always verify button visibility on product pages after any WooCommerce plugin update or product configuration change. Regression testing should include loading a product page while logged out and confirming the CTA is immediately visible.
This pattern — a CTA disappearing after a backend change — is easy to miss in QA because developers are typically logged in and familiar with the page flow. End-user perspective testing (logged out, fresh session) is essential.
Related
- [1]
- [2]