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'.
Before
//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');
After
