WooCommerce: Hide Add To Cart Quantity Input Arrows

Most browsers show “up and down” arrows inside number inputs. The WooCommerce add to cart quantity is a number input also, which means this will get the arrows as well.

But especially when you have add to cart plus minus buttons, the up and down arrows become useless. So, here’s a way to hide them via custom CSS.

Enjoy!

PHP Snippet: Hide Number Input Arrows/Spinners @ WooCommerce Single Product Page

/**
 * @snippet       Hide arrows @ add to cart quantity input
 * @tutorial      Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     Join https://businessbloomer.com/club/
 */

add_action( 'woocommerce_before_single_product', 'bbloomer_remove_input_number_arrows' );

function bbloomer_remove_input_number_arrows() {
	?>	
	<style type="text/css">
		/* 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
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

• WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
  In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
• WooCommerce: Hide Price & Add to Cart for Logged Out Users
  You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
• WooCommerce: Remove / Edit “Added to Your Cart” Message
  A client asked me to completely remove the message that appears after you add a product to the cart from the product page. This is simply done by using a PHP snippet, so here’s the quick fix for you!
• WooCommerce: Automatically Update Cart on Quantity Change
  There is a lot of literature online that solves this UX problem – so in this article let’s see if I can give you a simplified, working, updated version. So, do you hate the “Update Cart” button too? Yes, the one you have to click after you update the quantity of a product in the […]
• WooCommerce: Add to Cart Quantity Plus & Minus Buttons
  Here’s a quick snippet you can simply copy/paste or a mini-plugin you can install to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page and Cart page. The custom code comes with a jQuery script as well, as we need to detect whether the […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli