Skip to content

Instantly share code, notes, and snippets.

@DeoThemes
Last active June 16, 2021 23:08
Show Gist options
  • Save DeoThemes/647d255d1575953890d74874d3fa3a35 to your computer and use it in GitHub Desktop.
Save DeoThemes/647d255d1575953890d74874d3fa3a35 to your computer and use it in GitHub Desktop.
Add quantity buttons to WooCommerce
<?php
/**
* Quantity buttons
*/
add_action( 'woocommerce_after_quantity_input_field', 'arendelle_quantity_plus_sign' );
function arendelle_quantity_plus_sign() {
echo '<span class="quantity__button quantity__plus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg></span>';
}
add_action( 'woocommerce_before_quantity_input_field', 'arendelle_quantity_minus_sign' );
function arendelle_quantity_minus_sign() {
echo '<span class="quantity__button quantity__minus"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg></span>';
}
add_action( 'wp_footer', 'arendelle_quantity_plus_minus' );
function arendelle_quantity_plus_minus() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
var forms = jQuery('.woocommerce-cart-form, form.cart');
forms.find('.quantity.hidden').prev( '.quantity__button' ).hide();
forms.find('.quantity.hidden').next( '.quantity__button' ).hide();
$(document).on( 'click', 'form.cart .quantity__button, .woocommerce-cart-form .quantity__button', function() {
var $this = $(this);
// Get current quantity values
var qty = $this.closest( '.quantity' ).find( '.qty' );
var val = ( qty.val() == '' ) ? 0 : parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
// Change the value if plus or minus
if ( $this.is( '.quantity__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
}
@lgdelai
Copy link

lgdelai commented Jun 16, 2021

Solved,
This plugin show quantity buttons on all places and work with ajax.
https://br.wordpress.org/plugins/quantity-field-on-shop-page-for-woocommerce/

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment