Can cart button on product page be non blurred before selecting any variations?

.woocommerce button.button.disabled {
  opacity: 1.0 !important;
}

Hi there,

The CSS snippet provided by @lorro should wok if added via the Appearance > Customize > Additional CSS menu item, however I think this can be risky to do so: if a customer clicks the button without choosing a variation it will lead to an error message, which could create more frustration than having the button with a lower opacity in first place.

@lorro thank you so much sir.
It worked great! I am attaching a
screenshot in which height of cart button needs to be increased same as the height of the wishlist button below it. Please refer to the link provided. If required user can alter quantity from cart page as generally the quantity taken by user is single. Also if possible i need to remove the default woocommerce quantity field on product page only and not on cart page and make quantity field on cart page as dropdown with 1 to 10 maximum quantity.

Thank you very much for your help!!

trendsapp.in

.woocommerce div.product.elementor .woocommerce-variation-add-to-cart:disabled,
.woocommerce div.product.elementor .woocommerce-variation-add-to-cart {
  height: 44px !important;
}
.woocommerce div.product.elementor .woocommerce-variation-add-to-cart .quantity {
  display: none !important;
}

Changing the quantity field on the cart page to a drop-down would need a bit more code than is usual for a forum answer.

Not working this time sir on my site, the quantity field issue. And it also makes quantity constant ie to 1 on cart page. And height also not increased.

I’ve used the CSS validator:
https://jigsaw.w3.org/css-validator/
to list all the styles on your page and the suggested css is not there. Did you take it out after it didn’t work? Please put it back so I can debug it.

The best place to put it is:
Dashboard > Appearance > Customize > Addtional CSS

Do you have any caching? I can’t detect any.

Yeah removed it. Allow me. No caching as of now. I am a newbie. I am using google cloud platform for this site. For the first time. Can you guide me if it is better to use a cache on cloud hosting. I use hummingbird cache plugin which gives great results. But when I used hummingbird cahe plugin kind of slowed down the site. So i removed it.

If you could put the css back I can debug it.

The cache question would be better on a separate thread.

Done sir. Placed it back. Please have a look. Thanks.

Moreover its making site load slow.

It looks like the css is doing what I understood was wanted. On the product page, the quantity selector is not showing, and the add to cart button is the same height as the add to wishlist button. Do you see this? If not, try clearing your browser cache.

Its unlikely that a few more lines of css will be making any difference to page load speed. There must be some other factor at work if that is the case.

Hey @rakshitjain

After the help from lorro, we’ve not heard back from you.

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Thanks,