Use button-element to create (AJAX?) add to cart Woocommerce button

[Dagaloni]

Hi there,

I’m looking for a way to create a AJAX add to cart button from the native ‘button’-element. I found that it’s possible to edit the url to domain.com/?add-to-cart=[product-id] but this results in loading a new page and redirecting to the homepage.

What I would like to do is create a button that works like the normal button: when one clicks the button the product is added without loading a new page.

The reason is that I would like to create something like this (see screenshot), where you have two buttons. That’s why a shortcode for the add to cart button is not ideal.

Any suggestions? Many thanks in advance!

[rad]

Hi @Dagaloni,

Thanks for reaching out.

Unfortunately, it’s not simply as creating an Ajax request. It would require a callback like to where to display or what should happen after a successful ajax request. That URL is just a shortcut, please contacting a Woocommerce to implement the customization for your button’s script.

And this may help you for development https://quadmenu.com/add-to-cart-with-woocommerce-and-ajax-step-by-step/

Woocommerce has it’s own Ajax functionality, but it’s for its own default product listings.

Thanks!

[Dagaloni]

Thanks your very much for the reply! I will look into the guide you referred to. Hopefully it will work out.

[thai]

You’re welcome.