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, Business Bloomer
 * @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…
• 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…
• 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…
• 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…
• 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…

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