How to make the ‘Quantity Spinners’ permanent viewable with the product

Hi there ??

Could you please share a link to your site to better understand what you would like to achieve?

Thanks!

Hi. Here is the link gulqualitystore.com
In the cart, when the product quantity number is hovered, it shows the increment spinners. I want the increment spinners to be viewable permanently.

Hi @saniasyed,

Thanks so much for that link and for the additional details on how to see what you’re looking for here!

That’s actually something that is being controlled by your site’s theme and also will be handled and displayed differently on different browsers. For instance, on Safari, I am seeing the increment arrows displayed permanently:

Link to image: https://d.pr/i/atBRgk

You can adjust this in various browsers with some custom CSS.

For Chrome, I would recommend trying this:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

Let us know if that does the trick!

It worked. Thank you for helping me out.
I have two more questions regarding the buttons.
1. On increasing or decreasing the quantity of the product, the input area shows the text symbol ‘|’ how to disable it?
2. I have been working on the hover css for button ‘Update cart’ but its not working, could you please help me in that too.
I will really appreciate your help.

Hi there,

Great to know that it worked!

On increasing or decreasing the quantity of the product, the input area shows the text symbol ‘|’ how to disable it?

What I think you’re referring to here is the blinking input cursor, right? You can hide it with this custom CSS:

/* Hide blinking input cursor */
.woocommerce .quantity input.qty {
caret-color: transparent;
}

I have been working on the hover css for button ‘Update cart’ but its not working

The button hover effect seems to be working properly. Let us know if you need any more help with this.

Link to Gif: https://i.imgur.com/Q1dLKs9.gif

Thanks.

Hi,
Thank You for helping me.
About the increment, it is done on the cart page but not on the product page, how can I customise the coding so that it work on all the archives?
And about the cursor, I meant how to make the input quantity field non-editable, I think it is done through class readonly but I do not know how to give the class readonly.
I will appreciate your help,
Sania.

Hi Sania @saniasyed,

Your site is currently displaying a critical error and you’ll want to check for any Fatal Error that might be causing this under WooCommerce > Status > Logs.

Link to image: https://bit.ly/36TZWL9

As per the customization, since this forum is more oriented on the default functionalities of the core WooCommerce plugin, I would advise consulting one of the customization experts listed here: https://woocommerce.com/customizations/.

Thanks.

Ok