Remove quantity addition/subtraction on hover of product image

Store Design
, , ,

Topic summary

A Shopify store owner using the Xtra theme wants to remove the quantity increment/decrement controls that appear when hovering over product images, while keeping the “Add to Cart” button centered.

Proposed Solution:
A community member provided CSS code to hide the quantity controls:

  • Navigate to Online Store → Theme → Edit code
  • Add the following to theme.css or base.css:
span.input-amount.semantic-input-initialized.input-amount-listening {
    display: none !important;
}

Status:
The solution includes a screenshot showing the expected result. Another user requested additional clarification via screenshot. The discussion appears ongoing as the original poster hasn’t confirmed whether the CSS solution resolved their issue.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

Can anyone help me remove the up/down (add/subtract) option on the product hover option as seen on the screenshot below/attached? I’d like the “add to cart” button retained on the center of the product image upon hover.

Please help.

Website is: theoutdoorarmory.com

Theme: Xtra

Thanks,

Outdoor Armory

2

Hi, thanks for you reply. However, I do not use WooCommerce. I use Shopify.

3

Hi @outdoorarmory

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
span.input-amount.semantic-input-initialized.input-amount-listening {
    display: none !important;
}

Result:

websensepro_0-1735886471737.png
websensepro_0-1735886471737.png1300×588 118 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

4

@outdoorarmory

Please share the screenshot of what you want!

Thanks!