About the Extension
WooCommerce Product Colorizeris a plugin for WooCommerce which allows customers to preview your products in virtually any color you can think of. Instead of taking multiple photos of products in different colors, simply generate the new product preview based on one neutral colored stock image. Customers can then select from different color previews on the product page.
What WooCommerce Product Colorizer does
- This plugin requires that you generate a “mask” for your product. A mask is a clear .png outline of your white colored product. The mask can be generated in photo editing software, such as Photoshop or GIMP.
- 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.
- 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.
Installation
-
Connect to your server’s FTP
-
Copy the “optart-woocommerce-product-colorizer” folder from the zip into the “wp-content/plugins” directory
-
Login to your WordPress administrator panel
-
Click the “Plugins” tab and you will see your newly installed plugin – activate it.
Usage
Click here to watch the YouTube tutorial
-
Navigate to your website’s WordPress Admin panel.
-
Make sure WooCommerce and the Colorizer plug-in 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 underneath. Select “Attributes”.
-
The Attribute page is where you can define the colors that you would like your products to be. Select the “Product Colorizer Color” Attribute that was automatically generated when you installed and activated the plugin.
-
Once you’re brought to the “Add New Product Colorizer Color” page, enter the desired information about the color, and using the color selector, click on the color you would like to preview the product as. Then, select the “Add New Product Colorizer Color” button underneath the color selector.
-
Continue to repeat the previous step until you add each color you would like to show previews of.
-
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 two empty photo boxes underneath the regular Product Image, “Colorizer Mask Image” and “Colorizer Background Image”.
-
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 respective 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.
-
Upon selecting this tab, a drop-down box will appear. Select the drop-down box, select “Product Colorizer Color”, and then select the “Add” button.
-
After selecting “add”, more options will be generated. The “Values” field will appear and this is where you select the colors you previously generated that you would like this product to be displayed as. You can choose individual colors by selecting each one, or you can select “select all” to choose all the colors.
-
Select the box “Used for Variation” and “Visible on the product page”, then select the “save attributes” button to save the attributes. Then, select the “Variations” tab on the left side of the box.
-
Select the “link-all variations” button. Selecting this will generate more boxes that contain data about each color you added on the attributes tab. Add a price to each one of these boxes in the “Regular Price” field.
-
Select the “Update” button under publish. This will update the product and now you should be able to select colors on the product page.
-
Repeat these steps for each product you would like to have different colored previews on.
WooCommerce Product Colorizer In Action
Switching back and forth between live previews of shirt colors.
The color attribute selection page.
Change log
- v1.0 – initial release
Leave a Reply
You must be logged in to post a comment.