- Site Template
- WordPress Theme
- Blogging Theme
- CMS Theme
- Marketing Template
- eCommerce Theme
- Forum Theme
- Flash Template
- PSD Web Template
- .NET Script
- PHP Script
- HTML5 Code
- CSS Style
- Edge Animate Template
- Muse Template
- TypeEngine Theme
- Static Site Generator
- Sketch Template
CodeCanyon WooCommerce Product Colorizer 7177681
Plugin \ eCommerce \ WP e-Commerce
Colors \ Color \ Product \ Woocommerce \ Optart \ Select \ Preview \ Change \ Selector
Plugin - WooCommerce Product Colorizer 7177681 by optart @ CodeCanyon
Plugin \ eCommerce \ WP e-Commerce
About the Extension
WooCommerce Product Colorizer is 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.
- 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.
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.
- v1.0 – initial release
WooCommerce One Page Shopping; WooCommerce Buy Selected Button.
Keywords: change colors, color preview, color select, color selector, optart, product colors, woocommerce colors.
Android, Builder, Business, Clean, Corporate, Creative, Design, Ecommerce, Email, Fashion, Gallery, Image, Iphone, Jquery, Landing, Magazine, Magento, Marketing, Minimal, Mobile, Modern, Multi, Multipurpose, Online, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest Casimir A Bold Tumblr Portfolio Theme 19617626
- ThemeForest Ap Dolphin Shopify Theme 19621981
- ThemeForest Organie An Organic Store Farm Cake and Flower Shop Magento 2 Theme 19620006
- ThemeForest Summer Moon Fashion Store Muse Template 19616699
- ThemeForest Ucare Medical & Health PSD Template 19634099
- ThemeForest Repair Shop Mobile & Gadget Repairing PSD Template 19633788
- ThemeForest Healthcare Health & Medical Care HTML5 Template 19624563
- ThemeForest Azra Creative Multi-Functional HTML Template 19621991
- ThemeForest Ap Roy Shopify Theme 19617775
- ThemeForest Clean Host Hosting Business Site PSD Template 19632995