WooCommerce: Add Plus & Minus Buttons to Product Quantity Field

Problem #1: Quantity arrows but no plus / minus buttons

Display Plus & Minus Quantity Buttons on WooCommerce Single Product Page and Cart Page
Add the following PHP snippet to WordPress using Code Snippets plugin (and choose the “Only run on site front-end” option):
/**
* @snippet Plus Minus Quantity Buttons @ WooCommerce Product Page & Cart
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 5
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// Source: https://www.businessbloomer.com/woocommerce-add-plus-minus-buttons-to-add-to-cart-quantity-input/
// -------------
// 1. Show plus minus buttons
add_action( 'woocommerce_after_quantity_input_field', 'bbloomer_display_quantity_plus' );
function bbloomer_display_quantity_plus() {
echo '<button type="button" class="plus">+</button>';
}
add_action( 'woocommerce_before_quantity_input_field', 'bbloomer_display_quantity_minus' );
function bbloomer_display_quantity_minus() {
echo '<button type="button" class="minus">-</button>';
}
// -------------
// 2. Trigger update quantity script
add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );
function bbloomer_add_cart_quantity_plus_minus() {
if ( ! is_product() && ! is_cart() ) return;
wc_enqueue_js( "
$(document).on( 'click', 'button.plus, button.minus', function() {
var qty = $( 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 ( $( 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();
}
}
});
" );
}
Source: WooCommerce: Add to Cart Quantity Plus & Minus Buttons
Problem #2: Plus / minus buttons but arrows remain

Even though the plus & minus buttons are now on either side of the quantity field, the original arrows (also called spinners) are still being displayed. These original arrows/spinners are actually being displayed by the browser, not by the WordPress theme. It’s the <input type="number">
HTML that defines a field for entering a number.
<input type="number" id="quantity" name="quantity" min="1" max="5">
It’s the type="number"
attribute of the input
HTML that needs to be targeted and hidden with CSS.
Hide Product Quantity Arrows/Spinners on WooCommerce Single Product Page with CSS
To hide the arrows/spinners, add the following CSS snippet to WordPress using Code Snippets plugin (and choose the “Only run on site front-end” option):
add_action( 'wp_head', function () { ?>
<style type="text/css">
/* Source: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
</style>
<?php } );
Source: How to hide arrows/spinners from input number
Final layout with plus / minus buttons and no quantity arrows. Yay!

What about the styling of the arrow buttons, how did you get that?
Hi Lukas, I only figured out how to hide the arrow buttons (also called spinners), so I never needed to style them. No clue how to style them.
How can you implement the same functions to a standard number form? For instance on this delivery form?
https://drive.luggagedrop.com/order-delivery/
Hi Bobby, Your “Number of bags:” field already has Plus & Minus arrows built in, you just have to hover over the “Number of bags:” field for them to display. I also recommend reaching out to https://jetformbuilder.com/ for support.