Woo add to cart button reloads page when product sold individually

[Oguzhan]

Hey Guys,

I’m currently in the process of replacing an outdated third-party Ajax button plugin with the native add-to-cart buttons in Pro. However, there’s one problem I’m having with the Pro buttons.

When the “Sold Individually” option is selected within the Woocommerce product settings, the page will reload, but only if that said product is already in the cart.

So if the product is not in the cart yet, the button will do its work just fine, and add it without any page reloads. The button also will never reload the page if the “Sold Individually” option is not selected. However, once it is enabled, the site will reload every time I press it when the product is already in the cart.

How can I stop this behavior?

Ideally, the page should never reload, no matter how many times the button is pressed, even if the quantity can’t increase by more than 1.

Thanks in advance!
Best,
Oguzhan

[tristup]

Hi Oguzhan,

Not sure on not reloading the page if that is not selected as Sold Individually. Reloading the page after adding the product into the cart is the default behavior for the Single Product page. The AJAX can be enabled for the Archive page only. If the page is not reloading after adding the product to the Single Product page, I would suggest you troubleshoot the Plugin Conflict and CSS/JS Customization issues once and check if that helps.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Oguzhan]

Hey Tristup,

There is no plugin conflict here, and neither is any customization the issue. This is something you can easily replicate yourself on a demo site by simply creating a product in Woocomemrce, enabling the “Sold Individually” option, and then using the native add-to-cart button in Pro to add it to the cart.

It will, as mentioned, add the product to the cart dynamically without any reloads once, but not a second time. Also, I’m not sure if reloading the page is indeed the default behavior on single product pages (or any pages) since the button will work just fine, adding things dynamically to the cart when that option is not enabled.

Additionally, the Pro add-to-cart buttons by default add the following into the class section “add_to_cart_button ajax_add_to_cart”. On top of that, they auto-populate the custom attributes accordingly to work as an Ajax-style button.

I went ahead and created a demo page on my site demonstrating this behavior. So check the secure note for that.

Thanks!
Oguzhan

[christian]

Hey Oguzhan,

The page reload happens because WooCommerce is trying to output a message that you can’t add more items to the cart. Since it’s a custom page, there’s no way to display that message but the page will just reload.

Ideally, if the product is already added to the cart, the Add to Cart button must be grayed out. Regretfully, we don’t have that feature for the products that are “Sold individually” yet so you need to use your old method if it works.

We don’t have a temporary solution for this.

Thank you for understanding.

[Oguzhan]

Hi Christian,

Is Pro or Woocommerce trying to output the message?
If I disable that message with some customization, would that change the behavior of the Pro button?

Thanks,
Oguzhan

[Oguzhan]

Hi Christian,

Another quick follow-up.
There doesn’t really seem to be any way to completely remove the message so I went ahead and simply added the Woocommerce “wc_print_notices()” to my page (not the page in the secure note). This way the Woocommerce alerts and messages can be displayed on that page.

The alerts appear just fine when removing products for example. However, the site will still reload instead of displaying the “Cannot add another PRODUCT to the cart” message. So perhaps the page doesn’t reload because the message can’t be displayed?

Thanks,
Oguzhan

[christian]

Hey Oguzhan,

Without AJAX which is what comes out of the box, WooCommerce Add to Cart function even when used in Pro, will reload the page and display a message whether the product is added successfully or if there’s a problem adding the product like your case.

Now that you have enabled AJAX, adding to the cart will not reload the page. The problem is, the WooCommerce AJAX function does not take into account “add to cart” problems and that’s why WooCommerce will basically want to display an error message that you can’t add any more. There’s no AJAX support for displaying that message that’s why it will reload the page.

I’ll post this case in our tracker as a feature request so if there’s a feasible solution for this, our development team might add support in a future version.

For now, regretfully, we can do nothing about this case.

Thank you for understanding.