Ajax Add To Cart

Written by the Divi Engine Documentation Team

Introduction

Follow this information to set up Ajax Add to Cart.

Example

Ajax Add To Cart makes sure that the page will not reload when a customer adds a product to the cart. Please click HERE to view an example.

Step 1: WooCommerce Settings

Start off by ensuring that the Ajax add to cart checkbox is selected and Redirect to the cart page is not by going to WooCommerce > Settings.

Step 2: Enable Add to Cart

Make your way to BodyCommerce > Ajax Settings and enable the Add to Cart button. Please know that the Add to Cart with for the default WooCommerce product types (such as single, variation, etc.) However, if you are using another plugin to create new product types then we cannot guarantee that the Add to Cart will work. We have, however, created an option for you to disable this custom product type (or any other product type) in the settings.

Ajax Settings

  • Disable Ajax to Cart for specific product types: If you want to disable ajax add to cart for a specific product type, add a custom CSS class that is common for that product type.
  • Added to Cart Notify Text: If you want to have the text on the button change once the product has been added to the cart, add it here, then specify how long you want it to stay before it changes back to the original text below.
  • Add to Cart Notify Text Time: Set how long you want the button text to appear.
  • Notify Button Background Colour: Background colour for the notify button.
  • Notify Button Text: Text colour for the notify button.
  • Remove View Cart Link? If you enable ajax add to cart and want to remove the text that appears after the button, for example, "View Basket", then enable this button.
  • Disable Icon Spinning: If you have ajax add to cart and click on "add to cart" - default you get an icon spinning. If you want to disable this so it does not spin, enable this.
  • Ajax Add To Cart Jquery Method: Select the way you want the ajax add to cart to work. The default should work on most sites but for some that have other ways to change the quantity field, the "dynamic version" will check for an update of the quantity field every half a second.
  • Disable Ajax Pagination? By default, the ajax pagination will only work with our product loop module - if you do not want this, enable this setting.
  • Enable Ajax Stock Status? If you want to have the stock status returned by ajax, enable this. In some caching environments, this will help not get the cached status but the live one.

Step 3: Mini Cart

Please know that Ajax Add to Cart is also available for the mini cart. Head over to BodyCommerce > Mini Cart/Popup Settings and activate the Ajax Mini Cart.

More Support?

Please email us at [email protected] if you are unable to get Divi BodyCommerce working.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.