Product Attribute Images and Colour Swatches

Transform your product pages and replace the default variation dropdowns with images, colour swatches, and text (as shown below).

Attribute Variation Output

Transform your product information and include image and colour swatches in the attribute output section (as shown below).

Attribute Variation Output

Change the output of an attribute

To change how terms within an attribute should be output, goto the add/edit screen for that attribute. You should see a new set of fields under the section titled Advanced Attribute Display Settings.

Attribute Group Save

These settings will change how the attribute terms are displayed on the website.

Selector type:
Change what format the attribute terms will be output (image, colour, text and default).

Selector size:
Change the size of attribute terms (small, medium, large). These sizes can be changed in the general settings page.

Selector style:
Change the style of the attribute terms, (default, rounded courners);

Add image or colour swatcher to attribute terms

Once you have configured the attribute display settings in the previous section, depending on the selector_type choice above will determine what is used to output the attribute term.

Attribute Group Save

Colour:
click on the input field and manually enter a hexadecimal colour code or select from the colour picker widget that loads up.

Thumbnail:
Click on Upload/Add Image button to load up wordpress media uploader to select or upload an image, Click on Remove Image to clear the current selection.