[Support request] WooCOmmerce-Ordering Select Dropdonw Color change

[John]

Hi there,

I am using the latest WooCommerce updates for the theme and love the ability to manipulate all the colours that are in the customizer.
One thing I cannot see is where to edit the sub-menu drop down that appears when using the Ordering Select filter.
IN fact, when I try to inspect it to change the css, there is nothing available to inspect.
Is that something you can help with?
I want to change it from grey to white if possible.
Wondering how that can be done.
Many thanks!
John

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[John]

Yes – it is still in development so will turn off the maintenance page for now so you can takle a look see.
https://seedsofthesunbyronbay.com/shop/

When you click on “DEFAULT SORTING”
The submenu dropdown background is a grey.
Let me know if that makes sense or where I could edit that in Generate Press.
Cheers!

[Fernando]

Hi John,

Try adding this in Appearance > Customize > Additional CSS:

form.woocommerce-ordering select[name="orderby"] {
    background-color: #ff0000;
}

Replace #ff0000 with the color value of your preference.

[John]

Hi Fernando – thank you that worked nicely….Love your work.
Is it too cheeky to ask how to change the hover on mouseover color too?
I am really struggling to find anything I can edit in the inspector – where can you find this info from?

[Fernando]

Will adding this work for instance?:

form.woocommerce-ordering select[name="orderby"]:hover {
    background-color: #ff00ff;
}

If you’re referring to the individual hover color of the options in the Order dropdown, it’s defined by the Device OS / Browser.

There is no way to change the styles of that element using CSS.

It would require custom development or a plugin to insert a ‘fake’ select element in its place.

[John]

I did try that but it doesn’t seem to work.
It is fine for now – I appreciate your help and I have the main piece how I want it.

Yes – I am meaning the individual hover color which changes to grey on Mouseover.
So that is controlled by JS or something else seomewhere?

[Fernando]

It’s uniquely controlled by each Operating System and Browser. We can’t easily change it as mentioned though.

[Author]

Posts