WooCommerce Variable product dropdown menu styling using CSS

Question

I have a Wordpress site set up with WooCommerce installed with a few variable products, each variation for each product has a dropdown menu which displays the different variables when clicked.

My question is how do i style the dropdown menus that appear when clicked? I can successfully change the font color and size but not the background color, padding between the text etc, of the dropdown menus.

Link for better example

PS Im using the 'Elementor Pro' plugin with the 'Hello Elementor Basic theme' to edit my pages and add custom CSS.

PPS I have searched about for an answer before coming here, all i have found is this could be related to AJAX and something regarding .select2 CSS yet I am not seeing that CSS code when inspecting my page or adding the code to my CSS.

Sorry if this is an easy solution that I'm just not seeing but It would be nice to have the ability to style the dropdown menus to match the styling of my site.

Ken · Accepted Answer · 2018-12-15 16:20:18Z

1

If I understand correctly you want to change the native dropdown select. If so, you can combine CSS with JavaScript.

Perhaps this page can point you in the right direction: https://www.w3schools.com/howto/howto_custom_select.asp

The ID and Class name for each variable product select field is set based on the attribute names. Therefore I suggest to grab all of them with parent elements like this:

.single-product div.product table.variations select {
/* Your Custom Style Here */
}

You can use the JS I've shared with you as a reference and add it to your WP's footer with this hook:

// ADDS CUSTOM JAVASCRIPTS TO WP_FOOTER
function child_theme_footer_script() { ?>
<script>
    // YOUR CUSTOM FUNCTION HERE
</script>
<?php }
add_action( 'wp_footer', 'child_theme_footer_script', 20 );

edited Dec 15, 2018 at 16:20

answered Dec 15, 2018 at 12:49

Ken

6826 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Trips Alot Over a year ago

So it sounds like a need to learn some javascript to pull this off? Unless I'm missing something and the CSS code you added above is capable of doing this without adding my own JS?

Ken Over a year ago

The CSS I gave you can change some aspects of the field style but to fully customise the native select you have to implement JS. You can use the JS I shared with you as a reference and add it to your WP's footer with hook shown in my updated answer.

Trips Alot Over a year ago

Yeah I have managed to style the box that is displayed before clicking, Im just having trouble styling the drop down menu that displays when you click on the selection boxes for each attribute. But from the look of things I'll need to implement javascript in order to get my desired results, I know nothing about javascript so i best get learning. Quick side question, why does this need to be added to the footer? Why not the header?

Ken Over a year ago

You can add it to the header if you want.

Trips Alot Over a year ago

Im yet to achieve the desired results on my web page but I believe this is the correct answer I'm looking for, I just need to dig into the core fundamentals of javascript before i can implement it correctly; so I've marked the answer as acceptable

Collectives™ on Stack Overflow

WooCommerce Variable product dropdown menu styling using CSS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related