Add WooCommerce Product Size and Color Options with images

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5,00 out of 5)
Loading...

Any product is more attractive to a customer when it has not one image. Especially when you search for some clothes, bag, shoes etc.
Also when you choose among options in some product you prefer to see an image of the desired colour option. And the last thing when you choose clothes is the most popular colours and sizes. For example, some shoe sizes can be sold quickly. The same situation with the clothes colours. So, a client wants to see on a site what sizes and what colours are left and which ones are is already absent.
As many popular cms eCommerce system WordPress with Woocommerce plugin provides such useful functionality by default.
We recommend always to update WordPress itself and WooCommerce plugin to the latest version. Some new options can be added or/and bug fixes in it. On the moment of current article writing and publishing the current WooCommerce version is 3.4.5.

So, follow steps to create and add the Sizes and Colors Attributes:
1) Create an attribute in admin
Create the Color Attribute firstly. Go in admin left panel: Products -> Attributes -> add new attribute.

Image - Attributes -Colour
Screenshot 1

In the right side Attributes list hover on Color element and press Configure items link. Add Color Attribute values one by one — as many as you need.

Add-new-colour-650Screenshot 2

Do the same actions to create the Size attribute.
The field Slug will be filled automatically.

2) Add the attribute to a product
Create a test product and begin to add created attributes to it. To use WooCommerce functionality of creating variations of different attributes you should set in the Product date — Product Type: Variable Product firstly.
To not lose your changes we recommend to press the Update button each time when you add something new.
In the metafield Product data choose item Attributes. Choose Color, press Add. Choose Size, press Add. Press Save Attributes. For our example in the field’s Value (s) in each attribute press the button Select All. But for sure in a real shop, you can have not all colours in all sizes.
Don’t forget to check both options: Used for variations and Visible on the product page.

Image - Save attributesScreenshot 3

3) Variations and images
Once attributes are added you are able to create variations from them. Go in Product data -> Variations -> choose Create variations from all attributes, press the Go button. You will see a message that some number of variations are created.
Open each variation, don’t forget to set a price. Here you can set an image. So, you can switch variation types and images will be changed correspondingly.

Screenshot-4-650Screenshot 4

This entry was posted in Learning sessions. Bookmark the permalink.

Post a comment