Modifying “Add to Cart” Button Behavior in WooCommerce

Hello Support Team,

I would like to modify the WooCommerce “Add to Cart” button behavior as follows:

1. When the “Add to Cart” button is clicked, the selected item should be added to the cart, and the button should change to a quantity selector with plus (+) and minus (-) buttons.
2. The quantity in the cart should be adjustable using the plus/minus buttons, without displaying a “View Cart” button.
3. If the quantity is reduced to zero, the button should revert to the original “Add to Cart” state.
For reference, here are examples of the desired functionality:

Onsitego Example – https://onsitego.com/ac-service-repair-delhi-noida-gurgaon
Woolworths Example – https://www.woolworths.com.au/shop/browse/fruit-veg/fruit
Could you please guide me on how to achieve this? I appreciate your help.

Best regards,
Amit

If this is not possible by default, could you please provide some jQuery or functions.php code to hide or unhide the button as follows?

– .cart .quantity should be hidden by default.
– When I click the “Add to Cart” button and one quantity is successfully added, .cart .single_add_to_cart_button should be hidden, and .cart .quantity should be shown.
– If the quantity is decreased to zero, .cart .quantity should be hidden, and .cart .single_add_to_cart_button should be shown again.

[Author]

Posts