Ajax Add To Cart

Divi BodyCommerce allows you to add Ajax to your Add To Cart setup. Follow these steps to learn how to add this feature.

Example.

Ajax Add To Cart makes sure that the page will not reload when a customer adds a product to the cart. Please test this feature on the website shown below by clicking HERE.

Step One: 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 Two: 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.

Step Three: Customize.

While on the Ajax Settings page in BodyCommerce you will see numerous settings. Find more information below.

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 Four: 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.

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

Still need help? Contact Us Contact Us