Transform your product pages and replace the default variation dropdowns with images, colour swatches, and text (as shown below).
Transform your product information and include image and colour swatches in the attribute output section (as shown below).
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.
These settings will change how the attribute terms are displayed on the website.
Change what format the attribute terms will be output (image, colour, text and default).
Change the size of attribute terms (small, medium, large). These sizes can be changed in the general settings page.
Change the style of the attribute terms, (default, rounded courners);
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.
click on the input field and manually enter a hexadecimal colour code or select from the colour picker widget that loads up.
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.