Product attribute dropdown to change text color once value is selected

Hello @userwhosme ,

Okay, I think I understand your problem but not exactly sure about the full outcome.

If the plan is to target the selected option from a list then you need to use this CSS selector –

option:checked { color: red; }

You can learn more about this here – https://www.w3schools.com/cssref/sel_checked.asp

If you need further help, can you please give me a visual representation of your expected outcome? You can use https://snipboard.io/ to share a screenshot.

Thank you ??

Hi,

Thanks for the reply!

That’s not really what I’m looking for. What I’m looking for is to make it so when no attribute is selected and the default “Choose an Option” text is displayed *as the text of the dropdown*, it should be grey, but when an attribute is selected, it should be in black.

In other words, when no attribute is selected, the dropdown text should look like this, but when an option for the attribute is selected, it should look the same, except the attribute value text that’s shown instead of “Choose an option”, should be in black.

Is there any way I could do that? Thanks a lot!

Hello @userwhosme ,

Okay, thanks for explaining.

I could not think of a CSS solution that can do this. So, I used a little bit of JQuery to get the result. First of all, I used CSS to make the dropdown gray –

.variations .value select {
    color: #ccc;
}

Then used this jQuery to change the selection to other color if there is a change –

jQuery(document).ready(function () {
            jQuery(".variations .value select").change(function () {
                jQuery(this).css('color', '#000');
            });
        });

You can do many other things with this. I hope you have a starting point from here. My result is like this – https://prnt.sc/10q8jqh.

You can use a snippet plugin to add custom jQuery to your site.

I hope this helps.

Thank you ??

Hi @rur165,

Thanks so much!

This might be a bit of a silly question, but if I use the plugin you linked, where should the CSS for the .variations .value select be defined? And what should the scope for the jQuery snipped be? I defined the CSS in the styles.css of my child theme and put the jQuery as a snippet that runs everywhere in the website and got a fatal error for using an undefined function. How do I properly use the CSS and the jQuery?

Hello @userwhosme ,

Okay, let’s understand the implementation process.

First of all, you can keep the CSS code either in your theme’s style.css file or in wp-admin > Appearance > Customize > Additional CSS field.

Then if you use the snippet plugin it comes with several sample codes, you can edit the Javascript sample code and paste the code there. See this screenshot – https://prnt.sc/10vjtww

Alternatively, create a new snippet and use this code –

add_action( 'wp_footer', function () { ?>
<script>

	/* write your JavaScript code here */
	
	jQuery(".product-categories .cat-item-16:eq(0)").before(jQuery(".product-categories .cat-item-16:eq(3)"));
	
	jQuery(document).ready(function () {
            jQuery(".variations .value select").change(function () {
                jQuery(this).css('color', '#000');
            });
        });

</script>
<?php } );

I hope there will be no other issues.

Thank you ??

Hi there,

We’ve not heard back from you in a while, so I’m marking this thread as resolved.

Hopefully, you were able to find a solution to your problem! If you have further questions, please feel free to open a new topic.

Thank you ??