WooCommerce Product Colorizer

WooCommerce Product Colorizer

Product Colorizer

WooCommerce Product Colorizer is a WooCommerce e-store extension that generates live preview of different colors of products.

Instant Product Color Change! Don't waste your time on taking multiple product photos

  1. 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..
  2. 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.
  3. 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.
  4. For further information please refer to: this site. This link covers the process of generating different colored previews that this plugin is using.

One Page Shopping in Action How to install? Usage

  1. Navigate to your website’s WordPress Administrator panel.
  2. Make sure WooCommerce and Colorizer plugin are installed and activated.
  3. In the left panel of the admin page, select “Products” underneath “WooCommerce”.
  4. After selecting Products, the menu should expand with more options below it. Select “Attributes”.
  5. 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.
    1. You can change the attribute name by clicking the Edit button under its current name.
  6. 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.
  7. Continue to repeat the previous step until you add each color you would like to show previews of.
    1. 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.
  8. 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.
  9. 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”.
  10. Colorizer Base Image is optional – add it if you want to have a different image as a base for colorizing.
  11. The “Colorizer Mask Image” and the “Colorizer Background Image” need to be created according to this guide.
  12. Once both of these images are created, select “Upload/Add Image” and upload them to the respecitve space.
  13. 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”.
  14. On the left side of the box, you should see a column of tabs. Select the “Attributes” tab.

Do you like this plugin?


Need more masks, or want to change product’s look more?

Check out our new plugin, WooCommerce Better Product Preview

Related Plugins One Page Shopping

Line Changelog
  • 3.2.8
    Fix for numeric attribute’s slug
  • 3.2.7
    Changed styles for better compatibility with various themes
  • 3.2.6
    Added woocommerce 2.6.x compatibility
  • 3.2.5
    Colorboxes fix
  • 3.2.4
    Added PrettyPhoto forcing
  • 3.2.3
    Fixed bugs with swatches names
  • 3.2.2
    Added displaying swatches names option
  • 3.2.1
    Cart thumbnails colorizing fix
    Added cropping of cart thumbnail mask
    Added cart thumbnail styling css
  • 3.2.0
    Added cart thumbnails colorizer
  • 3.1.0
    Added base image feature for featured image separation
  • 3.0.0
    Added feature that generates a color boxes instead of variation drop-down lists on product page
  • 2.2.1
    Fixed problem with $ character in JS files
  • 2.2.0
    Added possibility of setting product color opacity
  • 2.1.0
    Added possibility of zooming the colorized product (works for single mask only)
  • 2.0.0
    Implemented possibility of changing the color of logo image
    Added sample images into /sample/ folder
  • 1.0.1
    Initial version (fork of Jigoshop version)