Here’s a speedy piece you can essentially copy/paste to show “+” and “- ” on each side of the amount number (means a quantity box) contribution on the WooCommerce single product page.
This piece accompanies a jQuery content also, as we have to identify whether the give or take are clicked and subsequently update the amount input. jQuery may look hard to many, however the excellence of this is you don’t have to have a degree in jQuery – simply duplicate/glue and witness the enchantment.
Note: you will most likely likewise require some extra CSS, as your subject may give a “float” to the amount DIV while as a matter of course HTML catches take inline-square. I’ve included some CSS substantial for the Storefront subject beneath.
1. Show Buttons
[php]
add_action( ‘woocommerce_before_add_to_cart_quantity’, ‘wbcomdesign_display_quantity_plus’ );
function wbcomdesign_display_quantity_plus() {
echo ‘<button type=”button” class=”plus” >+</button>’; }
add_action( ‘woocommerce_after_add_to_cart_quantity’, ‘wbcomdesign_display_quantity_minus’ );
function wbcomdesign_display_quantity_minus() {
echo ‘<button type=”button” class=”minus” >-</button>’;
}
add_action( ‘woocommerce_before_add_to_cart_quantity’, ‘wbcomdesign_display_quantity_minus’ );
add_action( ‘woocommerce_after_add_to_cart_quantity’, ‘wbcomdesign_display_quantity_plus’ );
[/php]
2. Trigger jQuery script
[php]
add_action( ‘wp_footer’, ‘wbcom_add_cart_quantity_plus_minus’ );
function wbcomdesign_add_cart_quantity_plus_minus() {
// Only run this on the single product page
if ( ! is_product() ) return;
?>
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(‘form.cart’).on( ‘click’, ‘button.plus, button.minus’, function() {
// Get current quantity values
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’ ));
<h3>// Change the value if plus or minus</h3>
if ( $( this ).is( ‘.plus’ ) ) {
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
}
[/php]
CSS Customizatiom: alter the amount Div to create + and – Buttons continue Either facet of It.
our in addition to and short HTML catches will take a display:inline-square. In the event that your topic applies a buoy to the amount DIV, at that point the catches will show on a similar side, and not one on the left and one on the right.
This CSS is valid for Storefront theme (you’ll need to amend it based on your custom one):
[php]
.single-product div.product form.cart .quantity {
float: left;
margin: 0px;
display: inline-block;
}
[/php]
Also read: Display Content Above Add to Cart in Single Product Page in WooCommerce?
