Updated on by Password Protect WP Admin

9 Ways to Fix WooCommerce Add to Cart Button Not Showing

WooCommerce is still one of the best choices if you’re planning to run an eCommerce store to sell products.

Unfortunately, while popular and powerful, WooCommerce can run into issues from time to time. A problem that users often encounter is the WooCommerce Add to cart button not showing error. Let’s look at how you can resolve this error.

Understanding the WooCommerce Add to Cart Button Not Showing Error

One of the principal functions of WooCommerce is giving your site a “Shopping Cart” function. Customers can put the products they want into the cart, then easily check out.

ppwp-woocommerce-default-add-to-cart-button

Some WooCommerce users have reported the button people use to add products to their cart not working on their device. When clicked, the button either does nothing or shows an error message. In some cases, the button doesn’t even show up at all. There are a few different reasons why this happens, so let’s look at how it can be resolved.

#1 Update WooCommerce to the Latest Version

If the version of WooCommerce you’ve installed isn’t up-to-date, some functions, like the Add to cart button, may not work. The obvious and easy fix to this is to update WooCommerce to the latest version.

To do this, login to the WordPress admin panel. Find the tab Updates on the menu bar to the left. You can check and install WooCommerce’s latest updates from the Updates tab.

ppwp-wordpress-updates

If there is any new updates to install, click on the Update Now prompt to download and install it. After doing this, you can go ahead and check whether the problem has been fixed or not.

#2 Enter WooCommerce Product Information

In WooCommerce, every product you list on your website needs to have the correct product information attached (name, description, price, etc.). If these fields are not filled out, the Add to cart button for that particular product may not work.

ppwp-fix-woocommerce-add-to-cart-button-not-showing-error

Besides basic information, you should take the time to fill out important fields, such as availability and product ID. Only once all of the necessary information is written in will the Add to cart button appear.

#3 Resolve Plugin Conflicts

WordPress plugins sometimes conflict with each other. If you run WooCommerce alongside a plugin that it’s not compatible with, errors like the Add to Cart button not working can occur.

WooCommerce has a list of all known incompatible plugins, so be sure to check and see if you have any of them installed. Also, be sure to disable anything that you’ve installed recently if it’s a new error that’s just started happening.

After doing this, make sure all of your plugins are updated to the latest versions, and clear the cache on your WordPress site. Caching is a common problem for WordPress users and especially those running a WooCommerce site, so it’s important you use a good caching plugin.

#4 Fix Coding Problem

Coding problems could lead to the Add to cart button being disabled or hidden. These issues typically fall into two categories:

Pricing Display Issues with Variable Products

If your variable products aren’t showing the Add to cart button, it’s often because of pricing display configuration:

  1. Open the functions.php file of your theme by going to Appearance > Theme Editor
  2. Add this line of code to the very end of the file:

add_filter('woocommerce_show_variation_price', function() { return TRUE;});

  1. Click Update File to save your changes
  2. Test your website to see if the Add to cart button has reappeared

Hidden Button Due to CSS Problems

Sometimes the button exists but is invisible due to CSS styling issues:

  1. Visit the product page where the button should appear
  2. Right-click on the area where the button should be and select Inspect (or press F12)
  3. Look through the HTML to find the add-to-cart button element (usually with classes like .single_add_to_cart_button or .add_to_cart_button)
  4. Check if any CSS rules are hiding the button with properties like display: none, visibility: hidden, or opacity: 0
  5. If you find such rules, you can temporarily override them by adding this code to your theme’s Custom CSS (under Appearance > Customize > Additional CSS):

.single_add_to_cart_button,
.add_to_cart_button {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

These fixes should work even if you don’t have extensive coding knowledge. If the problem persists, you might need to consult with a developer who specializes in WooCommerce.

#5 Check Incompatible Themes

Other plugins can conflict with WooCommerce, but the theme you’re using can break your CMS sometimes too. Your theme might have compatibility issues with WooCommerce that prevent the Add to Cart button from displaying properly.

To troubleshoot this issue:

  1. Temporarily switch to a default WordPress theme (like Twenty Twenty-Four)
  2. See if the Add to Cart button appears with the default theme
  3. If it does appear in the default theme, this confirms that your current theme is causing the problem
  4. Contact your theme developer for support and let them know about the specific compatibility issue

Using a theme that’s specifically designed to work with WooCommerce or has been officially tested with it can help prevent these kinds of display problems.

#6 Fix Server Issues

Your site may be unable to read the jQuery code due to the file mod_security expiring. This is a protective system that safeguards your website from malicious attacks.

An expired mod_security file can lead to glitches and bugs like your Add to Cart button not working. To see if the file has expired, you can inspect your website with the browser’s developer tool. If the JS error “.jQuery.cookie.min.js not found” shows up, this is a problem you’ll need to resolve with your hosting provider.

ppwp-woocommerce-add-to-cart-button-not-showing-server-error

#7 Check Product Stock Status

If your WooCommerce Add to Cart button isn’t showing, it might be because the product is out of stock. By default, WooCommerce hides the Add to Cart button for products that aren’t available.

To check and modify this setting:

  1. Go to WooCommerce → Settings → Products → Inventory
  2. Look for the option “Show ‘out of stock’ products on the catalog” and make sure it’s enabled
  3. Verify that “Hide out of stock items from the catalog” is disabled if you want these products to remain visible
  4. If you want out-of-stock products to show the Add to Cart button anyway, you can add this code to your functions.php file:

add_filter( 'woocommerce_is_purchasable', 'make_out_of_stock_purchasable', 10, 2 );
function make_out_of_stock_purchasable( $purchasable, $product ) {
if ( ! $product->is_in_stock() ) {
$purchasable = true;
}
return $purchasable;
}

Checking the stock status of your products is a simple but often overlooked solution to the missing Add to Cart button problem.

#8 Verify Product Type Settings

WooCommerce has several different product types, and each displays the Add to Cart button differently. If your button isn’t showing, you might have configuration issues with the product type:

  • Simple Products: These should display the Add to Cart button by default.
  • Variable Products: The button won’t appear until all required variations are selected. Make sure you’ve properly set up all variation attributes and that at least one variation is in stock.
  • Grouped Products: The main product doesn’t show an Add to Cart button; instead, buttons appear for each individual product in the group. Check that the grouped products are properly linked.
  • External/Affiliate Products: These show a button that links to an external site. Verify that you’ve entered the correct product URL and button text in the product settings.

Check your product type and make sure it’s configured correctly for the type of product you’re trying to sell.

#9 Verify Template Files

Sometimes, the issue with missing Add to Cart buttons is related to customized WooCommerce template files in your theme. Here’s how to check for that:

  1. Look in your theme directory for a folder called /woocommerce/single-product/add-to-cart/
  2. If this folder exists, it means your theme is overriding WooCommerce’s default templates
  3. Compare these files with WooCommerce’s default templates (found in the WooCommerce plugin folder at /woocommerce/templates/single-product/add-to-cart/)
  4. Look for differences, especially in the template that corresponds to your product type (e.g., simple.php, variable.php)
  5. Update or remove any customized templates that might be causing the issue

If you’re not comfortable editing template files, you can:

  • Use the “WooCommerce Status” tool (WooCommerce → Status → Tools → Template Debug Mode) to identify template issues
  • Consider using a plugin like “WooCommerce Template Debug” to help find which templates are being overridden
  • Contact your theme developer for assistance with updating the templates

Outdated template files are a common cause of display issues after updating WooCommerce, so this is always worth checking.

Conclusion

WooCommerce is the most downloaded eCommerce plugin for WordPress, but like any other tool, it can run into issues as you work with it. Hopefully this guide has helped you figure out why exactly your Add to Cart button is not showing and you can get it fixed.