How can we add +(Plus) & -(Minus) buttons to the quantity input on the product page in WooCommerce?
Making a WooCommerce site has only one aim is to impress buyers to get more and more orders.
In world of competition we have to look different and unique. To show our site different from other sites we have to modify our site’s html and functionality.
Every theme has a different way of styling the different features, In many themes use buttons are used to increase and decrease the quantity of a product before adding it to the Cart, or while updating the Cart.While in many themes, there are buttons denoted by the “+” and “-” signs to add and reduce the quantity respectively, there are some theme too which use default arrow for doing it like: storefront. For such themes, we can add “+” and “–” buttons to the quantity input on the product page in WooCommerce by pasting these code to your theme’s functions.php.
Quantity Field is input type number but it’s look not good. instead of it we can use a plus minus button on left and right side of Quantity field.
For adding plus and minus button html use 'woocommerce_before_add_to_cart_quantity' and 'woocommerce_after_add_to_cart_quantity'.
//For Plus
function PlusYourQuantity() {
echo '<div class="minusplusbutton"><button type="button" class="add">+</button>';
}
add_action('woocommerce_before_add_to_cart_quantity','PlusYourQuantity' );
//For Minus
function MinusYourQuantity() {
echo '<button type="button" class="sub">-</button></div>';
}
add_action('woocommerce_after_add_to_cart_quantity','MinusYourQuantity');
function CustomScript() {
// For single product page
if ( ! is_product() ) return;
?>
<style>
.minusplusbutton { float: left; margin-bottom: 20px; }
button.add { float: left; background: #43c801; }
button.add, button.sub { height: 45px; width: 45px; font-size: 30px; border: none; color: white; }
button.sub { float: right; background: red; }
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$('form.cart').on( 'click', 'button.add, button.sub', function() {
var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
if ( $( this ).is( '.add' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max );
} else {
qty.val( val + step );
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min );
} else if ( val > 1 ) {
qty.val( val - step );
}
}
});
});
</script>
<?php
}
add_action('wp_footer','CustomScript');
Related reading:
- WooCommerce : Add same product to cart twice instead of changing quantity in Cart Page
- WooCommerce : Change “Add to Cart” Text if Product Already in Cart
- E-commerce development services
Shiv Kumawat is the CEO of Eoxys IT Solution LLP, the Jaipur-based IT and GenAI development company he has led since 2009. Eoxys builds custom AI, web and mobile applications for businesses worldwide. Shiv writes about AI app development, generative AI for business, and building software products that deliver real results. Connect with him on LinkedIn: https://www.linkedin.com/in/shiv-kumawat-eoxys/
