Skip to content

Instantly share code, notes, and snippets.

@Asikur22
Created October 27, 2022 18:40
Show Gist options
  • Save Asikur22/3d7e0cd478b72abaf2ae638a2a0a5bb7 to your computer and use it in GitHub Desktop.
Save Asikur22/3d7e0cd478b72abaf2ae638a2a0a5bb7 to your computer and use it in GitHub Desktop.
Woocommerce Plus Minus Quantity Buttons
.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;
}
}
<?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