Add to cart buttons: what makes shoppers find and use them
A visible add to cart button is the core of a product page. See what the audit looks for and how to avoid hiding it on mobile or behind options.
2 min read
Area
CRO & UX
Severity
High
Fix effort
Medium
Stores failing
5%
Of 159 stores we scanned where this check applies, 5% fail it and 94% pass. See all benchmarks.
The add-to-cart button is the one action a product page exists for. This check confirms that the page offers a visible, working add-to-cart control that a shopper can find without hunting, on desktop and on a phone.
Why it matters
A store can have a gorgeous page and still lose sales when the button is hidden below a long description, hidden by a sticky bar, or blocked until an option is chosen with no hint. On phones, those problems are worse because there is less room.
What the audit looks at
The audit looks for a visible add-to-cart or buy control on the product page, including on a phone-size screen.
What usually causes it
- A button pushed below the fold by large images or long titles
- A button disabled until a variant is picked, with no message explaining why
- A sticky bar that covers the button on small screens
- An app that replaces the button with a script that fails to load
How to fix it
Make sure a working buy button renders on the product page. The effort is medium, a theme or template edit that takes an afternoon.
- Load the product page with JavaScript disabled and check whether the button is there. If it is not, it depends on a script that may not run for everyone.
- If the button is disabled, check stock and variant settings -- a product with no variant selected by default reads as unbuyable.
- Keep the buy control above the fold on mobile, or repeat it in a sticky bar.
On Shopify
- Check Products > the product > Inventory: "Continue selling when out of stock" being off with zero stock disables the button.
- In the theme editor, confirm the product form section is present in the template you are using.
On WooCommerce
- Check the product is Published, has a price set, and is In stock -- WooCommerce hides the button when a price is missing.
- For variable products, confirm at least one variation is enabled and priced.
How to check it yourself
- Open a product page on a phone and see how far you must scroll to reach the button.
- Try every product type, including ones with variants and out-of-stock items.
- Check the button state before and after choosing options.
Frequently asked questions
Should the button be sticky on mobile?
A sticky button helps on long pages, as long as it does not cover content or the keyboard.
What if a product is sold out?
Say so plainly and offer a back-in-stock sign-up, rather than leaving a disabled button.
Related checks
Check your own store
See whether your store passes this check
Paste your store URL. The audit loads your pages in a real browser and shows the result for this check with the evidence behind it.