WooCommerce Add to Cart Button Not Working? How to fix it!
Is your WooCommerce Add to Cart button missing or not working properly? Are you having issues with it? We’ve got you covered. In this guide, you’ll learn how to fix the most common problems that affect the add-to-cart button and save yourself a headache.
Even if you set up WooCommerce correctly, you may have some issues when running an online business. We’ve already seen how to fix problems with the checkout and what to do when WooCommerce isn’t sending emails, so in this guide, we’ll focus on the add-to-cart button.
Why is the Add to Cart Button not working properly?
WooCommerce is a vast plugin. It has tons of functions and features to help your online business. Additionally, there are thousands of plugins that you can use to enhance its functions. On top of that, you can also add your code and customize the shop page, the checkout, and edit every single aspect of your store.
Even though this is a must for most businesses who want to stand out from the competitors, the more tools you use and the more you customize your store, the more issues you may face. These problems usually appear in the form of compatibility issues with all these functions and plugins. This can be anything from your redirects not working, Javascript issues, problems with your payment gateways, and many others.
There are many reasons why your WooCommerce add-to-cart button may not be working properly. In this guide, we’ll show you the solutions to the most common problems so you can have your store up and running in no time.
WooCommerce Add to Cart Button not working? How to fix it
As mentioned before, there may be many reasons that cause the add-to-cart button not to work correctly. In this guide, we’ll show you how to fix the following issues:
- Compatibility issues with plugins/themes
- Plugins and/or themes not updated
- Incomplete product information in WooCommerce
- WooCommerce status
- Problems with the cache setup
- Permalinks
- Issues with the Checkout and Cart URLs
- Problems with checkout endpoints
- Code-related issues with the Add to Cart button
- Problems related to your theme
- ModSecurity issues
Let’s have a look at each of these issues and how to solve them.
NOTE: Before you start, we recommend you create a complete backup of your site in case something goes wrong. Even though we won’t make any big changes, in a few potential solutions you’ll have to edit core files, so having a backup is always a good idea.
1) Plugins and/or themes not updated
This is one of the most basic steps we highly recommend you check before proceeding with the debugging. Always make sure that WordPress and WooCommerce are updated to the latest version to minimize possible issues. The new versions include bug fixes that might be crucial for your WooCommerce installation and fix your issues with the add-to-cart button.
This also extends to WooCommerce plugins since the developers may release updates to fix compatibility issues, plugin conflicts, and new versions to match new WooCommerce releases, so your store can run smoothly.
2) Conflicts with a plugin or theme
A very common problem that causes the WooCommerce add-to-cart button not to work properly is a plugin or theme conflict. As mentioned before, the more plugins you use the more chances there are of having compatibility problems. Especially when factoring in WordPress updates, plugin version changes, WooCommerce updates, and so on.
To check if you’re having conflicts with a plugin or theme, simply follow these steps:
- Ensure that all plugins are updated to the latest version
- Clear your site cache
- DIsable all the plugins one by one to isolate the one causing the issue. To do this:
- Change your theme to Storefront
If deactivating the plugins fixes the issue, you should reactivate them one by one until you find the plugin that’s causing the problems. If that doesn’t work, switch to Storefront as it’s the default theme and it’s fully compatible with WooCommerce and all its functions.
Finally, if a plugin/theme is causing the issues, we recommend you contact their support team.
3) Incomplete product information in WooCommerce
Another important and often overlooked thing you should check if your WooCommerce products don’t have an Add to Cart button is that the product has all the information filled in. This includes, at least, the name and the price of the product.
Why is this important? Because if your product doesn’t have a price set, it won’t display an add-to-cart button on the front end.
Apart from the name and price, we highly recommend you fill in the other important details such as availability, product ID, and product description.
4) Check for WooCommerce Status
Another reason that may cause the Add-to-Cart button to stop working is some kind of issue with your WooCommerce installation. You can check for these problems under WooCommerce > Status.
There, check each section (WordPress, Server, Database, and so on) and make sure that there aren’t any errors highlighted in red.
Additionally, you can use the WooCommerce tools to fix issues with your setup. We suggest you try these options to see if your issues are fixed.
Go to WooCommerce > Status > Tools and:
- Clear WooCommerce transients
- Clear expired transients
- Recount terms
- Clear customer sessions
- Create default WooCommerce pages (if your checkout page was deleted, you can check this page under Pages on your WordPress sidebar)
5) Problems with the cache setup (server and plugins)
Other elements that may cause issues on your Add-to-Cart are problems with your website caching your My Account, Cart, or Checkout pages. Since these pages only host dynamic content, you should always ensure that your cache plugin has the URL for these pages excluded. That’s why you should always use cache plugins that allow you to set exclusions for certain URLs.
Additionally, if you have a server-side cache setup, make sure you exclude these URLs. If you’re not sure how to do it, contact your server hosting provider and ask for help.
6) Flush the permalinks
We also saw that permalinks can cause issues on the Shop Page and they may also cause the add-to-cart button to be missing on your WooCommerce store, so it’s always a good idea to flush them. For this, in your WordPress dashboard go to Settings > Permalinks and save the changes.
Other users prefer to change the settings to make sure that the permalinks are updated. If that’s your case, simply click on the Plain or any Radio buttons under Common Settings and press Save Changes. After that change back to the setting you had before and save the changes again.
This will update all your permalinks and may help you fix the issues with the add-to-cart button.
7) Checkout and Cart URLs
You should also double-check that your Checkout and Cart pages are set up properly. If your Add-to-Cart button is redirecting customers to the wrong page, then it may not work properly.
To check this, go to WooCommerce > Settings > Advanced and check under the Page setup option. Make sure that you’ve set up all the correct pages under your Cart, Checkout, and My Account pages.
8) Ensure the checkout endpoints don’t have any errors
If the endpoints aren’t set up correctly they may cause the WooCommerce Add to Cart button not to work properly. To ensure that your checkout endpoints work as required, go to WooCommerce > Settings > Advanced > Checkout endpoints.
Check that there are no spaces in the endpoint URLs to make sure that you don’t have any checkout endpoint errors.
9) Code-related issues with the Add to Cart Button
Occasionally, your WordPress may experience issues with its code, especially if you’ve customized it. A common issue for WooCommerce users is the add-to-cart button not working because of issues with pricing for your variable products. In these cases, WooCommerce will disable the add-to-cart button due to problems with variation pricing or default variation pricing.
You can fix this issue by adding the following line of code to your functions.php file. To open this file, simply go to Appearance > Theme Editor.
Then, click on functions.php on the right sidebar, paste the following line of code at the end of the file in the editor and click Update File. After that, you should check if this fixes your issue.
add_filter('woocommerce_show_variation_price', function() { return TRUE;});
10) Add to Cart button issues related to themes
If you’re using a WooCommerce theme, it might come with dedicated theme features for your product pages. This might include hiding your Add to Cart button.
To check if this is an option on your theme, go to Appearance > Customize > WooCommerce and check the available options for the Product page.
Additionally, if there’s a conflict with your WordPress theme and your product page or the add to cart button isn’t loading properly due to template issues, you can fix it with a simple script.
To do this, open your Theme File Editor by pressing Appearance > Theme Editor and click on Single Post (single.php) under Theme files on your right sidebar. Then, post this code at the end of the single.php file:
if ( is_singular( 'product' ) ) { wc_get_template_part( 'content', 'single-product' ); } else { wc_get_template_part( 'content', 'single-product' ); }
NOTE: If you don’t find the single.php file, paste the code under index.php.
11) ModSecurity issues
ModSecurity is an open-source web application firewall that is very common on WordPress websites. Occasionally, it might cause issues with your add-to-cart buttons and a 403 error. To check if ModSecurity has expired or is having issues, go to your website and open your browser’s developer tools (Ctrl + Shift+ J).
If you get the error “.jQuery.cookie.min.js is not found”, then you might have a ModSecurity issue. To fix it, we recommend you contact your hosting provider about this.
12) Contact your hosting provider
If you’ve tried everything on this list and nothing worked, we recommend you contact your service provider. Let them know of what you’ve tried already as it will help them discard solutions and point them in the right direction faster.
Bonus: How to remove the Add to Cart button
Alternatively, if the Add-to-Cart button is not working and causing too many issues, you can remove it from your store. Instead, you can add a button that redirects shoppers from the product page directly to the checkout to simplify the purchase process.
If that’s something you’re considering, we highly recommend you check out the WooCommerce Direct Checkout plugin. It allows you to remove unnecessary steps and fields from the checkout in a few clicks to help you increase conversion rates. You can learn about this plugin and how to set up direct links on this guide.
Conclusion
In summary, there are many reasons why the add-to-cart button may not be working properly in your WooCommerce store. In this guide, we’ve seen solutions to the most common issues.
Before starting the process to figure out what’s causing the problems, we recommend you go through these small steps to ensure that you’re troubleshooting the right way:
- Update WordPress, WooCommerce, and all your plugins to the latest version
- Clean/reset your website cache
- Change your theme to Storefront
- Deactivate all plugins except WooCommerce
If deactivating your plugins fixes the issue, reactivate them one by one until you find the tool that’s causing the issue. In most cases, this is what causes the WooCommerce Add-to-Cart button not to work properly.
If a plugin or your WordPress theme is causing issues in your store, we recommend you contact their support team and ask for help to solve the issue.
Finally, if you’re having problems with other elements in your store, the following guides may be interesting for you:
- What to do when the WooCommerce checkout isn’t working
- Instagram Catalog not working? How to fix it
- How to change the WooCommerce Add to Cart message
- What to do when WooCommerce isn’t sending emails
Have you had any issues with the add-to-cart? What did you do to fix them? Let us know in the comment section below!
Hi, I’m so grateful for this blog. I was struggling with my cart page for weeks. Nothing showed up. Eventually I decided to try every thing on this blog, and Woocommerce Status did the trick. I wanted to thank whoever wrote this article/blog. <3
https://s1.ax1x.com/2022/04/15/L8FJR1.png
When I set it like this, adding a shopping cart will fail