AJAX Add to Cart Button element instead of redirecting to the cart page?

[cglobal]

On a custom WooCommerce shop page built out with the page builder, is it possible for the Add to Cart Button element to be AJAX instead of redirecting to the cart page upon clicking the button? Note that I am using Pro version 4.2.2, as 4.2.3 has a known Content Area Modal bug.

Thanks!

[tristup]

Hi @cglobal,

The WooCommerce archive Add to Cart button are already AJAX enabled. If that is not, please check if the under WooCommerce > Settings > Product > Enable AJAX add to cart buttons on archives is checked or not.

If not, please check after enabling it. Please let us know if you still found the issue.
Thanks

[cglobal]

@tristup, I apologize. I completely misspoke in my original post. It is the “Add to Cart Form” Pro element that is redirecting the page upon being clicked, NOT the “Add to Cart Button” element as originally described. The specific behavior that is occurring is as follows:

1. I click the “Add to Cart” button (again, this is on the “Add to Cart Form” element, NOT the “Add to Cart Button” element). I need to use this specific element because I need the option to enter quantity.

2. The page is automatically redirected to the product page and the “…has been added to your cart” message displayed at the top.

Conversely, if I instead use the “Add to Cart Button” element, which does not have the form present to enter quantity, the behavior is as follows:

1. I click the “Add to Cart” button (“Add to Cart Button” element this time instead of the one with the form to enter quantity).

2. A large, gray cart pops up, followed by a large, green checkbox. This is, presumably, AJAX powered. The page does not reload, and one can continue to add additional products without loading other pages.

So…is there a way for the “Add to Cart Form” element to behave the same way as the “Add to Cart Button” when the button is clicked? I am working on a custom ‘shop’ page where one can order any number of a few, free, printed materials. The “shopper” will add multiple items to the cart before checking out, which is why I would like the option to not reload the page. Previously, this was handled with a form, but that was very clunky.

Again, this is a custom page built out in the Pro page builder, using the Looper functionality to bring in a few WooCommerce products (which works very well - bravo!), and the “Add to Cart Form” element is what is used to display the add to cart button instead of the “Add to Cart Button” element because I need the ability to enter quantity. The Content Area Modal element is used to display product information, so there is no need for the individual product pages, even. I just want the form element to behave like the button element where the page does not reload. Is this possible?

Thanks!

[ruenel]

Hello @cglobal,

Thanks for updating in! Be advised that the “Add to Cart Form” element is made to be utilized in single product layouts. It may not work correctly if you add it to a custom page or modal popup. This could mean that what you want to do is not possible. It may be possible with custom development which is beyond the scope of our support already.

Thank you for your understanding.