How best to Identify special orders within product variations

Howdy!

I’m not aware of any existing option to add a label only to specific variation options, unless you use the workaround of adding the label into the variable product’s description area:

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

Doing that would display the label to customers when the variation is selected.

You could also use a plugin like this one to add a note for the customer when specific variations are added to the cart:

https://woocommerce.com/products/cart-notices

Otherwise, you would need to have something custom-developed to meet your needs. This is a fairly complex development topic. I’m going to leave it open for a bit to see if anyone is able to chime in to help you out.

I can also recommend the following places for more development-oriented questions:

1. WooCommerce Slack Community: https://woocommerce.com/community-slack/
2. WooCommerce FB group: https://www.facebook.com/groups/advanced.woocommerce/

You could change the text or background colour for a specific variation in the dropdown – for example:

select [value=”small”]{
color: #ff0000;
background-color:#00ff00;
}

That will change only the variation called ‘small’ to red text on a green background.

Thanks Zach! I’ll take a look at those options.

@seank123: Thanks for your suggestion! Would this be done through CSS? We have lots of variations that may be moving in/out of special order status so we are looking for something that can be done a bit more automatically. Is there a way I can create a custom field / value, and have the CSS code filter based on that?

Yes – in the Custom CSS section of the Customiser.

How you would do this automatically I have no idea!! You would need to change the [value=”small”] bit for each variation that is on special order.

Thanks for the fast response. Yes, I can probably manage this process manually to start but as we get more products in our catalog, it will be tougher.

One last question…

If I were to do this by CSS, is there some amount of additional CSS where it actually affects my web site’s performance, all other things being equal?

I’m asking because I can probably get a way to automatically generate the code (if I were to have lots of special order variations) and then load the CSS. But at what point does have so much CSS cause a performance hit?

Thanks!

Well, adding more complexity to the site will always make the pages bit bigger but a few lines of CSS will be negligible.

It’s been a while since we heard from you, so I’m marking this thread resolved. Hopefully, you’ve been able to resolve this, but if you haven’t, please open up a new topic and we’ll be happy to help out.