WooCommerce Product Colorizer is a WooCommerce e-store extension that generates live preview of different colors of products.
- This plugin requires that you generate a “mask” for your product. A mask is a cleaner .pngoutline of your white colored product. The mask can be generated in photo editing software, such as Photoshop or GIMP. Moreover, if you want to add an additional color attribute (e.g. color of the logo on your product), you have to generate a .svg file using a free draw editor – Inkscape..
- The plugin works by coloring in the clear mask as it’s sitting over the static product preview, presenting the appearance of a different colored product. By using the Path code which can be generated in Inkscape, the overlay layer will automatically take the proper shape which will allow to present the color of the other part of the product.
- It also allows for the inclusion of a “background-image”, which can include an element on a product that is not affected by color changes. For example, if you featured a white t-shirt with a black logo in your product preview, the logo, being the “background-image”, would not be affected by any color changes, and it would remain the same color.
- For further information please refer to: this site. This link covers the process of generating different colored previews that this plugin is using.
- Navigate to your website’s WordPress Administrator panel.
- Make sure WooCommerce and Colorizer plugin are installed and activated.
- In the left panel of the admin page, select “Products” underneath “WooCommerce”.
- After selecting Products, the menu should expand with more options below it. Select “Attributes”.
- The Attribute page is where you can define the colors that you would like your products to be. Select the “Colorizer Background Color” Attribute that was automatically generated when you installed and activated the plugin.
- You can change the attribute name by clicking the Edit button under its current name.
- Once you’re brought to the “Add New Colorizer Background Color” page, enter the desired information about the color you would like to preview the product as. Then, select the “Add New Colorizer Background Color” button underneath the color selector.
- Continue to repeat the previous step until you add each color you would like to show previews of.
- If you want to add logo colors to your product, go back to the “Attributes” page and select “Colorizer Logo Color” and repeat steps 6 and 7 on that page.
- On the left admin panel under “Products”, select the “Products” page. Select the product that you would like to generate colored previews of and open that product’s page.
- On the right hand side of the page you should now see three empty photo boxes underneath the regular Product Image: “Colorizer Base Image”< “Colorizer Mask Image” and “Colorizer Background Image”.
- Colorizer Base Image is optional – add it if you want to have a different image as a base for colorizing.
- The “Colorizer Mask Image” and the “Colorizer Background Image” need to be created according to this guide.
- Once both of these images are created, select “Upload/Add Image” and upload them to the respecitve space.
- Underneath the product description on the product page, you should see a box with tabs on the left side. Select the drop-down box labeled “Product Data” and change it to “Variable product”.
- On the left side of the box, you should see a column of tabs. Select the “Attributes” tab.
Need more masks, or want to change product’s look more?Check out our new plugin, WooCommerce Better Product Preview
Fix for numeric attribute’s slug
Changed styles for better compatibility with various themes
Added woocommerce 2.6.x compatibility
Added PrettyPhoto forcing
Fixed bugs with swatches names
Added displaying swatches names option
Cart thumbnails colorizing fix
Added cropping of cart thumbnail mask
Added cart thumbnail styling css
Added cart thumbnails colorizer
Added base image feature for featured image separation
Added feature that generates a color boxes instead of variation drop-down lists on product page
Fixed problem with $ character in JS files
Added possibility of setting product color opacity
Added possibility of zooming the colorized product (works for single mask only)
Implemented possibility of changing the color of logo image
Added sample images into /sample/ folder
Initial version (fork of Jigoshop version)