Product Variants & CSS Styling

Instead of just asking questions I thought I would give something back by offering a solution that I came up with in case someone else finds it useful.

My view is that a product listing with a large number of variations would look and function better with an umbrella product that is not actually presented as a selection to the customer and the variants grouped under sub headings on the product listing.

I thought how can I achieve this without any php code edits using the existing functionality, a custom css was the best option I thought.

I created a product with multiple variations and chose Purpose: “Variations as one product” and Feature style: “Text Labels” and Filter type: “Color” as I thought the layout looked better with a large number of variants and more phone friendly for selecting the variant options.

First off I thought that when a customer selected a variant it was not obvious enough which variant was active so i added the custom ccs below to highlight the background of the active selection and bold its font.

.ty-product-options__radio:checked + .ty-product-options__radio–label {background-color: #FFFFCC;font-weight: bold;color: #3674BF;}

I wanted the primary product listing to look like a heading rather than an actual product selection option and I added this custom css, this is displayed as “Select then Add to Cart” on the listing page.

label[for^=feature_3_variant_4_] {background-color: #1B3B61;font-weight: bold;color: #ffffff;}

NB. the “for feature_3_variant_4_xx” changes each time a new variant is selected so I removed the trailing “xx” and added “for^” to ensure the item was still captured when selections changed each time.

I wanted some sub headings so additional variants were created to be used as sub heading for the large list of variants and I wanted the sub heading variants to be styled differently so they looked like sub headings so I added the following custom css.

label[for^=feature_3_variant_20_] {background-color: #3674BF;font-weight: bold;color: #FFFFFF;}

I wanted the sub headings to line break and full width on the listing so that the sub groups of variants were clearly divided and i did not want the variants that are being used as sub heading to be accidentally selected by the customer with their fat fingers when using a mobile phone so I added the following custom css for each sub heading variant.

label[for^=feature_3_variant_44_] {display: block;pointer-events:none;}

OK that is it job done and you can see the result on the image capture below, I removed the product images and variant names so that you can just focus on the results, hopefully someone else will find this simple css customisation useful.