Hi,
I thought I’d share since the solution to style a swatch for when a user selected it wasn’t apparent or listed in any documentation.
When a user selects a swatch variation, a “selected” class is added to the swatch variant. This isn’t apparent in the editor, inspector, navigation panel, etc.
To add styling for when the user selects a swatch, use relative styling to target the “selected” class, and then style from there.
To add to this, you may also want to style a swatch variant for a WooCommerce product that’s out of stock. Maybe to give it a gray background to indicate that it’s not available and cannot be selected.
Swatches for out of stock products are automatically given a “disabled” attribute.
Use relative styling to target the “disabled” attribute.
Hi @ChickenHacker,
Thank you for bringing this up.
Sorry to hear this wasn’t made clear enough for you.
Rest assured, we’ll update our documentation to provide clearer instructions and prevent any further confusion.
Although we did go over this in our Filtering in Cwicly - Categories - YouTube video, we understand that sometimes visual explanations may not be sufficient, so we’ll ensure to provide comprehensive written explanations as well.
Hi @Araminta
Thanks for yours and the team’s commitment to provide a positive user experience.
For me, creating a product page for WooCommerce, I have not had a need for filtering and wouldn’t expect to find it there.
I would have expected to find it here, Build a Single Product Page
Swatches are covered, but after following this tutorial, they’re left without styling for when they’re selected.