How to Fix WordPress Cannot Modify Header Information Error
This error means PHP output was sent before HTTP headers; fixing it requires removing…
How to Fix WooCommerce Add to Cart Button Not Working
- Error
WooCommerce Add to Cart Button Not Working- Affects
- WordPress Errors
What Is This Error?
When you click the Add to Cart button on a WooCommerce product page and nothing happens — no item appears in the cart, the page just reloads blankly, or a spinner appears and freezes — that is this error. It is one of the most disruptive WooCommerce issues because your store looks completely normal but the single most important customer action silently fails.
WooCommerce uses JavaScript and AJAX to add items to the cart without requiring a full page reload. When something interferes with that AJAX request — a plugin, a theme, or a caching layer — the button loses its functionality entirely. The button still renders on screen, which is why this bug is so confusing to diagnose.
The good news is that this is almost never a WooCommerce core bug. It is nearly always caused by something in your specific environment, which means you can fix it by isolating the conflict.
Why Does This Happen?
- JavaScript conflict from another plugin: Optimization plugins, page builders, or script minifiers sometimes break or reorder WooCommerce’s jQuery-dependent cart scripts, cutting off the AJAX call before it fires.
- Caching plugin serving a stale page: WooCommerce cart actions use a short-lived security token called a nonce. If a caching plugin serves an old cached version of the page, that nonce is expired and every cart request fails silently.
- Theme incompatibility: Some third-party themes do not properly declare WooCommerce support or override template files incorrectly, meaning the Add to Cart button renders without the event listeners WooCommerce expects to be attached to it.
- Broken permalink structure: WooCommerce’s AJAX cart endpoint depends on WordPress permalinks being set to something other than the plain default. A plain or misconfigured permalink structure breaks the endpoint URL entirely.
- Product misconfiguration: A product set to out of stock, a variable product with no purchasable variation, or a grouped product with missing child products will all cause the Add to Cart button to appear non-functional by design.
How to Fix It — Step by Step
-
Open the browser console and check for JavaScript errors. Press F12 to open DevTools, click the Console tab, then click the Add to Cart button. Red error messages will name the exact script file causing the conflict.
You should see: Either no errors (JavaScript is not the issue) or a file path pointing to the conflicting plugin or theme script.
-
Clear every cache layer — not just the browser. Purge your server-side caching plugin (WP Rocket, LiteSpeed Cache, W3 Total Cache), clear your browser cache, and if you use a CDN like Cloudflare, purge that as well. Missing any one layer will make this step useless.
You should see: The product page loads fresh with no cached version. If the button now works, stale caching was the entire problem.
-
Flush your WordPress permalinks. Go to Settings → Permalinks in your WordPress dashboard and click Save Changes without modifying anything. This rebuilds the rewrite rules that WooCommerce relies on for its AJAX cart endpoint.
You should see: A “Settings saved” notice. Test the Add to Cart button again immediately after.
-
Switch temporarily to the Storefront theme. Go to Appearance → Themes and activate Storefront (it is free in the WordPress repository). Test the button on the same product page.
You should see: If the button works in Storefront, your active theme is the conflict. Contact the theme developer or check for a WooCommerce compatibility update.
-
Deactivate all plugins except WooCommerce, then reactivate one at a time. Go to Plugins → Installed Plugins, deactivate everything except WooCommerce, and test the button. If it works, reactivate plugins one by one — testing after each — until the button breaks again.
You should see: The last plugin you activated before the button broke is your conflict. Disable it or contact its developer for a WooCommerce-compatible version.
-
Check the product configuration itself. Open the product in the editor and inspect the Product Data panel. Confirm stock status is set to In Stock, the product type is correct, and for variable products, every required attribute has a matching purchasable variation with a price.
You should see: No missing data warnings in the Product Data panel, and the Add to Cart button becomes fully functional on the frontend.
-
Make sure jQuery is not being deregistered. Search your active theme’s functions.php and any custom plugins for the following line and remove it immediately if found — it breaks WooCommerce completely:
// Remove this line if it exists — it kills WooCommerce cart functionality wp_deregister_script('jquery');You should see: jQuery present in your page source and no “$ is not a function” errors in the browser console.
Common Mistakes When Fixing This
- Clearing only the browser cache: This is most people’s first and only step — but server-side caches from plugins like WP Rocket or LiteSpeed are far more likely to be holding the stale nonce. Always clear all layers at once, not just the browser.
- Testing while logged in as admin: Admin accounts often bypass caching layers and behave differently from regular visitors. Always reproduce the issue in an incognito window while logged out to confirm you are seeing what your customers see.
- Reinstalling WooCommerce first: Reinstalling is almost never the fix and can reset settings or create data inconsistencies. Start with conflict testing — reinstalling should only happen as an absolute last resort after everything else fails.
- Running plugin conflict tests on a live store: Deactivating plugins on a production site can break things for active customers mid-purchase. Run conflict tests on a staging copy of your site, or at minimum during off-peak hours with a maintenance page active.
Get free WordPress & AI tips
Join 500+ readers. No spam, unsubscribe anytime.
Frequently Asked Questions
The button works on desktop but not on mobile — what causes that?
This usually points to a theme that loads different templates or scripts for mobile viewports. It can also be caused by a touch event conflict in a theme’s JavaScript. Activate Storefront and test on mobile — if it works there, the issue is in your theme’s mobile-specific code or template overrides.
Can Cloudflare cause the Add to Cart button to stop working?
Yes. Cloudflare’s Rocket Loader feature can delay or break WooCommerce’s AJAX scripts. Certain firewall rules also block requests to admin-ajax.php or URLs containing ?wc-ajax=. Temporarily set your Cloudflare zone to Development Mode and test the button. If it works, disable Rocket Loader and audit your firewall rules for blocks on those two URL patterns.
The button works for simple products but not variable ones — is this a different bug?
Not exactly a different bug, but a different trigger. Variable products require the customer to select all required attributes before the Add to Cart button activates. If the button stays grey or unresponsive, check that every attribute used in your variations is assigned, and that at least one variation is marked In Stock with a price set.
Will switching to Storefront for testing delete my theme customizations?
No. Switching themes only changes which theme is active — all your saved customizations remain in the database. When you switch back to your original theme, everything is restored. The one exception is the WordPress Customizer, where some settings are stored per-theme and will not carry over between different themes.
