There are three separate options you can have happen when a customer clicks that all important “Add to cart” button.
- The product can be added immediately to the cart via ajax, without a page refresh. A sidebar drawer appears and the item is automatically added.
- The product can be added with a page refresh. After refreshing, you’ll see a banner or notice which says that the item is now in the cart.
- Or finally, you can redirect to the cart page immediately after pressing it.
We’re going to discuss the setup steps to undertake for each option.
You will need to match the exact settings outlined in the instructions below.
1. Add to cart immediately via ajax without a page refresh
We use this approach on the main Shoptimizer theme demo site if you want to see an example of it in action.
Go to: WooCommerce > Settings > Products tab and only check the option “Enable AJAX add to cart buttons on archives”.
This will enable ajax on the catalog screens, but with Shoptimizer you can also enable this on the product page itself.
To do so, go to: Appearance > Customize > Layout > WooCommerce and switch on: Enable single product ajax
If you have switched on single product ajax, the Enable sidebar cart drawer toggle in the customizer next to it must also be active in order for it to work.
2. Add to cart with a page refresh
If you would prefer a page refresh after adding a product to the cart, you can configure your settings in the following way.
Go to: WooCommerce > Settings > Products tab and ensure that neither option is ticked.
Then go to: Appearance > Customize > Layout > WooCommerce and it’s important to ensure that “Enable single product ajax” is switched off.
3. Redirect to the cart page instead
You may wish to redirect to the cart page as soon as the “Add to cart” button is clicked. If that is what you want you will need to configure Shoptimizer using the following settings.
Go to: WooCommerce > Settings > Products tab and only check the option “Redirect to the cart page after successful addition”.
Finally go to: Appearance > Customize > Layout > WooCommerce and check that the “Enable single product ajax” option is switched off.
