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!

Let’s hide these – often annoying – number input arrows from WooCommerce

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: Only Allow 1 Product in the Cart
    Here’s how to limit your WooCommerce Cart to just one product at a time. This simple solution can be used for many applications. For example, your store may only allow to buy one subscription at a time. On this same website, for example, customers can only purchase one product at a time so it’s easier […]

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

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *