Hide quantity on the product page, not the cart

I think I’d try the CSS, but use the “not” selector so that you don’t utilize the CSS on the cart page, but everywhere else:

.quantity:not(.page-id-here), .product-quantity:not(#page-id-here) {
  display: none;
}

Look at the source code of your cart page in the classes of the body tag to get the “page-id” class and substitute it for the “page-id-here” in the code above. For example, if the body tag of your cart page has the class, “page-id-36” you’d use:

.quantity:not(.page-id-36), .product-quantity:not(#page-id-36) {
  display: none;
}

Hi @amstellodamois,

I presume what you’re looking to hide is just the quantity selector on the product page, which I’ve highlighted in the screenshot here:

Full Size: https://d.pr/i/T7Ssck

If that is the case, then you can hide it using this CSS

.input-text.qty.text {
    display: none;
}

You’ll end up with something like the screenshot below and customers will be able to change the quantity on the cart page:

Full Size: https://d.pr/i/qvuYaZ

@linux4me2
Ohhhh, that’s a smart idea!
Similarly, could I remove the quantity box only on one specific product page? With an and operator, maybe?

• This reply was modified 5 years, 2 months ago by amstellodamois.
• This reply was modified 5 years, 2 months ago by amstellodamois.

Similarly, could I remove the quantity box only on one specific product page? With an and operator, maybe?

Sure, you’d just use a selector for the page, getting the “page-id-XX” for the page from the body tag. Using @luminus code:

.page-id-XX.input-text.qty.text {
  display: none;
}

@luminus
Quantity boxes disappear in the cart too: https://i.imgur.com/z3yGvcf.png

Make sure you clear your cache or you’ll be looking at the old CSS. If you give us a link to your site, we can check the CSS, too.

Make sure you clear your cache or you’ll be looking at the old CSS. If you give us a link to your site, we can check the CSS, too.

I won’t say no because it doesn’t work: https://supefactory.com/product/me-as-a-superhero/

I used 1071 as my page idea because https://supefactory.com/?p=1071 does redirect to the right product:

.page-id-1071.input-text.qty.text {
  display: none;
}

But the quantity box is still showing (I’ve cleared the cache with [Ctrl]+[F5])

That quantity box has an ID tag of its own, so you don’t need to get fancy, just hide it by its ID:

#quantity_5dfbb2d74b2ac {
	display: none;
}

Actually, it seems to be a rolling tag. I’ve hidden quantity_5dfbb28eaf3a4 and it was working. After a refresh, it’s quantity_5dfbb3e2e5104

I like the page-id-XXXX solution, too bad it won’t work :/

Oh, bummer. Well, the page-id-XX solution won’t work on that page, because that page doesn’t have the typical “page-id-XX” class. Here are the classes I see for the page:

class="product-template-default single single-product postid-1071 wp-custom-logo theme-astra woocommerce woocommerce-page woocommerce-demo-store woocommerce-js woo-variation-swatches woo-variation-swatches-theme-astra-child woo-variation-swatches-theme-child-astra woo-variation-swatches-style-squared woo-variation-swatches-attribute-behavior-blur woo-variation-swatches-tooltip-enabled woo-variation-swatches-stylesheet-enabled ast-desktop ast-plain-container ast-no-sidebar astra-2.1.3 ast-header-custom-item-outside ast-blog-single-style-1 ast-custom-post-type ast-single-post ast-mobile-inherit-site-logo ast-woocommerce-cart-menu ast-replace-site-logo-transparent ast-inherit-site-logo-transparent elementor-default elementor-page elementor-page-1071 chaty-in-desktop ast-mouse-clicked"

There’s a “postid-1071” which ought to work, or an “elementor-page-1071”.

Something strange is going on, I believe it’s with your theme. I tried this, which should hide the entire quantity div:

.postid-1071.quantity {
	display: none !important;
}

and it didn’t work, either.

Tried .postid-1071.input-text.qty.text and .elementor-page-1071.input-text.qty.text to no avail

Hi @amstellodamois,

This CSS targets the quantity box on that product page and that product page alone.

.postid-1071 .input-text.qty.text {
    display: none;
}

The space between .postid-1071 and .input-text.qty.text is super important.

My mistake. Try this:

.postid-1071 .quantity {
	display: none;
}

Sorry about that.

• This reply was modified 5 years, 2 months ago by linux4me2.

@luminus
It just needed the space between postid and input-text, thank you!