Archived topic
WooCOmmerce-Ordering Select Dropdonw Color change
7 replies · Started by John on November 2, 2022
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
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 :)
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!
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.
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?
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.
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?
It's uniquely controlled by each Operating System and Browser. We can't easily change it as mentioned though.
