Creating a demo product
You can easily create a demo product with just one click.
After creating a demo you will be redirected to the demo product page.
The product appears in a products list.
Adding colors
Select Products > Attributes from Wordpress menu.
In the table on the right side choose attribute you want to assign color with and click configure terms.
You can either add new attribute value with a color assigned or edit existing ones by clicking edit below its name.
If you don’t want an attribute to colorize your products, simply do not select the color.
Creating products
Colorizer works only with variable products. In their edit page, you’ll see Colorizer section. If you don’t see it make sure that:
- Your product is a Variable product
- You have added attributes
- Attributes are used for variations
- Your product has at least one image set
- All above settings are saved
If you set up everything correctly you should see your product’s every image in Colorizer section.
Clicking on the image reveals editor. You can quickly switch between edited images, the changes are not lost.
Editor
Editor consists of two sections.
Left section
The section on the left is the preview. You can use your mouse’s scroll to zoom in/out and drag editor around. You can also manipulate active parts: drag them, resize, rotate etc. The active part is displayed at the top, has full opacity and controls around it. Image card corresponding to it has a green border.
Right section
The section on the right displays layers and allows you to import/export editor (it exports only editor for current image).
You can expand layer by clicking on the triangle at its end.
Each layer is a container for images, it doesn’t do anything on its own. Click + to add a new image.
You should see an empty image card.
Click the gray area to add an image, you’ll see WordPress media library. If you have similar images to add, you can set up one image (set its position in the canvas etc.) and then duplicate it.
The hidden when section allows you to conditionally hide the element. That’s how the Woman/Man version and different logos of the demo were made. You have to select every possible combination indicating the image must be hidden, which means that attribute which doesn’t hide the element (for instance color) must be fully selected (the shortcut is ctrl+a). For instance, if you want to hide man’s version of a t-shirt when there is any woman’s combination you should do it this way:
It may be counter-intuitive at the beginning but is more powerful than setting only one attribute to hide the element – think with attributes’ combination, not a single attribute.
When dealing with a lot of images or testing something it is useful to hide an element or even an entire layer. You can toggle this with the “eye” button.
Please note that if you save hidden elements they are not visible in the front, you have to change their visibility back.
Saving changes
You don’t have to bother with saving changes additionally, the changes are saved with product update. This also means that if you experiment with colorizer and you don’t want to save changes, make sure you reload the page before updating the product.