Created
October 27, 2022 18:40
-
-
Save Asikur22/3d7e0cd478b72abaf2ae638a2a0a5bb7 to your computer and use it in GitHub Desktop.
Woocommerce Plus Minus Quantity Buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.quantity { | |
display: flex; | |
border: 1px solid rgba(11, 11, 11, 0.1); | |
width: 90px; | |
.qty { | |
padding: 10px; | |
border: 0; | |
background-color: transparent; | |
-moz-appearance: textfield; | |
padding: 0; | |
width: 40px; | |
height: 52px; | |
text-align: center; | |
&::-webkit-outer-spin-button, | |
&::-webkit-inner-spin-button { | |
-webkit-appearance: none; | |
margin: 0; | |
} | |
} | |
} | |
button.plus, | |
button.minus { | |
background-color: transparent; | |
color: #a8afb5; | |
border: 0; | |
display: block; | |
width: 25px; | |
padding: 0; | |
&:hover, | |
&:focus { | |
color: #000; | |
border: 0; | |
outline: none; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/* | |
* Show plus button | |
*/ | |
add_action( 'woocommerce_after_quantity_input_field', 'gl_asiq_display_quantity_plus' ); | |
function gl_asiq_display_quantity_plus() { | |
echo '<button type="button" class="plus">+</button>'; | |
} | |
/* | |
* Show minus button | |
*/ | |
add_action( 'woocommerce_before_quantity_input_field', 'gl_asiq_display_quantity_minus' ); | |
function gl_asiq_display_quantity_minus() { | |
echo '<button type="button" class="minus">-</button>'; | |
} | |
/* | |
* Trigger update quantity script | |
*/ | |
add_action( 'wp_footer', 'gl_asiq_add_cart_quantity_plus_minus' ); | |
function gl_asiq_add_cart_quantity_plus_minus() { | |
if ( ! is_product() && ! is_cart() ) { | |
return; | |
} | |
?> | |
<script> | |
jQuery( document ).on( 'click', 'button.plus, button.minus', function () { | |
var qty = jQuery( this ).parent( '.quantity' ).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 ( jQuery( this ).is( '.plus' ) ) { | |
if ( max && ( | |
max <= val | |
) ) { | |
qty.val( max ).change(); | |
} else { | |
qty.val( val + step ).change(); | |
} | |
} else { | |
if ( min && ( | |
min >= val | |
) ) { | |
qty.val( min ).change(); | |
} else if ( val > 1 ) { | |
qty.val( val - step ).change(); | |
} | |
} | |
} ); | |
</script> | |
<?php | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment