Shoptimizer includes up/down quantity arrows on the product and cart pages. These adjust the quantity by 1, which would be the most common use case.
However some stores may want to change the quantity by a different number. This is usually achieved by integrating a min/max quantity plugin.
If this is a requirement, it would be best to dequeue Shoptimizer’s quantity.min.js file, and make some CSS adjustments.
By doing so, it will revert to the default WooCommerce quantity input state which should work with these third-party plugins.
Within your child theme’s functions.php file, include the following:
|
1 2 3 4 5 |
function dequeue_shoptimizer_quantity() { wp_dequeue_script( 'shoptimizer-quantity' ); wp_deregister_script( 'shoptimizer-quantity' ); } add_action( 'wp_print_scripts', 'dequeue_shoptimizer_quantity' ); |
Next, we’ll need to add some custom CSS. This can be added to your child theme’s style.css file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.product .cart .quantity .input-text { width: 90px; border-radius: 4px; } .cart .single_add_to_cart_button { margin-left: 10px; width: calc(100% - 100px); } .quantity input[type=number]::-webkit-inner-spin-button, .quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; opacity: 1; } table.cart .quantity { width: 52px; } table.cart td.product-quantity .qty { width: 40px; } |
Note: If you are removing the core arrows, you will also need to disable the quantity arrows within the mini cart – as they rely on the JS being removed. Appearance > Customize > Header and Navigation > Cart.
