Skip to content

Everything for WordPress, web development — and beyond

🔧 How to fix the missing Add to Cart button in WooCommerce

🔧 How to fix the missing Add to Cart button in WooCommerce

Why the "Add to cart" button disappears from WooCommerce products

You were setting up your store, added a dozen products, but when you open the page there's nothing where the "Add to cart" button should be. Customers can't buy. Panic. But the problem is easier to solve than it might seem at first glance.

There are exactly five reasons for the missing button: from an incomplete product card to server-side mod_security. Two of them can be fixed in two clicks. Two more with a couple lines of code. And only one requires calling your hosting provider. Below is a step-by-step breakdown with code, screenshots, and specific actions.

💡 Quick overview:

  • First check the product card: price and stock status are required
  • Disable all plugins at once and enable only WooCommerce: if the button appears, a conflict is to blame
  • Go to the theme customizer: the button might simply be hidden by a toggle
  • Fix the theme template through the code editor: replacing three lines in single.php
  • Open the browser console: JavaScript error → call your host, the problem is mod_security

1. Check the product card: price and stock status

WooCommerce shows the "Add to cart" button only when the product can be purchased. Can't be purchased, no button. Simple logic.

Open Products → All Products → select the problematic one → Edit. In the "Product data" block, check three fields:

  • Price: regular price is required, even if the product is on sale. The "Price" field must not be empty.
  • Stock status: "In stock" or "Available on backorder". The value "Out of stock" hides the button.
  • Variable products: each variation must have its own price and stock status.

Common mistake: you created a variable product, added attributes (color, size), but didn't enter prices for specific variations. In this case WooCommerce doesn't know what price to sell at and simply doesn't show the button.

Filled in → Update → open the product page on the site. In most simple cases the problem is already solved at this step.

2. Find the plugin conflict

WordPress assembles code from the active theme and all active plugins. If two plugins use identical function names, hook into the same hooks, or are simply incompatible, WooCommerce may lose the button.

Diagnostic procedure:

  • Go to Plugins → Installed. Select all (checkbox at the top), in the "Bulk Actions" dropdown choose "Deactivate" → Apply.
  • Enable only WooCommerce. Open the problematic product page.
  • Button appeared: conflict confirmed. Enable plugins one by one, checking the product page after each. The plugin after whose activation the button disappears again is the culprit.
  • Replace the problematic plugin with an alternative or contact its developer.

A separate subtype of this problem is a conflict with the woocommerce_show_variation_price filter. Some themes and plugins return false for this hook, and WooCommerce hides the variation price and loses the button. If the button is in place after disabling all plugins but there's no visible "culprit," check the active theme's functions.php for lines containing woocommerce_show_variation_price.

You can force display with this filter:

1add_filter('woocommerce_show_variation_price', function() {
2 return true;
3});

Insert this code into the functions.php of your active (child) theme or via the Code Snippets plugin. After saving, check the product.

Adding a PHP filter through the WordPress code editor

3. Theme customizer: the invisible toggle

Some themes add their own button visibility toggle. The developers' logic: "let's give users flexibility." In practice the toggle defaults to "hide," and the store owner doesn't know about it.

Go to Appearance → Customize. Look for a section:

  • WooCommerce → Product Page (or Content → WooCommerce, depending on the theme);
  • Parameter "Add to Cart Button" → Visible (or "Show").

Save settings and check the product. This works for themes that use customizer sections for WooCommerce on top of the standard template. It's popular with ThemeForest themes: Avada, Flatsome, WoodMart.

4. Fix the theme template in the editor

If the previous steps didn't help, the problem runs deeper: the theme uses a non-standard product page template and doesn't call the WooCommerce function that outputs the button.

What's happening. WordPress loads the product page through the theme file single.php (or index.php as fallback). Inside there's a get_template_part() call that includes the content block. The theme should hand control to WooCommerce by calling wc_get_template_part('content', 'single-product'), but some themes don't do this. Result: the theme's layout is there, but the button is not.

How to fix:

  • Appearance → Theme File Editor. Confirm the WordPress warning.
  • In the right column find the files single.php and index.php:
List of theme files in the WordPress code editor
  • Open single.php (if present). If not, index.php.
  • Find the line with get_template_part. Replace the entire content output block with:
1if (is_singular('product')) {
2 wc_get_template_part('content', 'single-product');
3} else {
4 wc_get_template_part('content', get_post_format());
5}
  • Save the file.
Final product template code with WooCommerce call

Before editing, back up the theme file. Copy the contents to a text editor or use a child theme: directly editing the parent theme will be reset on the next update.

After saving, open the product page. The button should appear.

5. Server problem: mod_security blocks scripts

If you've made it this far and the button still isn't there, the cause is most likely on the server side. The mod_security module (Apache/LiteSpeed firewall) blocks loading of WooCommerce JavaScript files. Without JavaScript the cart doesn't work.

Diagnosis:

  • Open the problematic product page.
  • Press F12Console tab.
  • Look for a WooCommerce script loading error, usually cart.min.js, add-to-cart.min.js, or jquery.blockUI.min.js with code 403 Forbidden.
  • If you see it, the problem is mod_security.

Solution: contact your hosting provider and ask them to add an exception for the URL path /wp-content/plugins/woocommerce/ in the mod_security rules. Support handles this in a few minutes.

Alternatively, disable mod_security for the domain via .htaccess (if your host allows):

1<IfModule mod_security.c>
2 SecFilterEngine Off
3 SecFilterScanPOST Off
4</IfModule>

But it's better to coordinate with your host: on shared hosting mod_security protects the entire server, and disabling it creates a security risk.

Summary table: what to check

Problem

Symptom

Time to fix

Product card not filled in

Button missing on specific product

2 min

Plugin conflict

Button disappeared after installing a new plugin

5-15 min

Theme customizer

Button missing on all products, ThemeForest theme

1 min

Template code

Button missing, custom or obscure theme

5 min

mod_security

JS error in console (403)

Call to host

Detailed video guide covering all five steps: from the product card to template editing and server diagnostics.

⁉️🤔 Frequently asked questions

The button disappeared only for variable products. What's going on?

Almost certainly the variation prices aren't filled in. Open the product, "Variations" tab, expand each one: the "Price" field must be filled in. An empty variation price means WooCommerce considers the product "not for sale" and removes the button. For 50 or more variations use CSV import: Products → Import.

The button disappeared after a theme update. What should I do?

The theme update overwrote single.php. Restore the edit from step 4. To avoid repeating this with every update, move the template to a child theme: create a /woocommerce/ folder in the child theme and copy the corrected single-product.php there.

Can I restore the button without editing code?

Yes, in half the cases: check the product card (step 1) and the theme customizer (step 3). Code is only needed when the theme outputs the product template non-standardly or when a plugin or theme suppresses the woocommerce_show_variation_price hook.

The button is there but doesn't work. You click and nothing happens?

This is a JavaScript error. Open the browser console (F12) and see which scripts are failing. Most often it's a jQuery version conflict (the theme loads an old jQuery over the standard WordPress one) or cached minified JS that didn't refresh. Clear your caching plugin's cache and regenerate minified scripts.

Do I need to disable AJAX add-to-cart?

Only for diagnostics. Go to WooCommerce → Settings → Products and uncheck "Enable AJAX add to cart buttons." If the button appears after this, the problem is in your specific theme's AJAX handler. Leave AJAX disabled or replace the theme.

What to do if the button still hasn't appeared

The five steps above cover the vast majority of cases where the "Add to cart" button disappears. If none of them worked, the problem runs deeper and requires manual debugging.

Quick last-resort checklist:

  • Switch the theme to Storefront, the official WooCommerce theme. Did the button appear? The problem is in your theme.
  • Check WooCommerce → Status → Scheduled Actions for any stuck cron tasks.
  • Go to WooCommerce → Status → Logs and look for fatal-errors from recent days.

Still no luck? Describe your situation in the comments: WooCommerce version, theme name, list of active plugins. We'll find the cause.