- 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, Parallax, Personal, Photography, Plugin, Portfolio, Product, Responsive, Retina, Simple, Slider, Social, Store, Template, Theme, Video, Woocommerce, Wordpress
Show all tags
Show all tags
- ThemeForest WSC Meeting Multipurpose Meeting Template 18379053
- ThemeForest Ruby Responsive Email & StampReady Builder 18430857
- CodeCanyon Wallpaper App with Google Photos Backend No Server Needed & Admob interstitial And Banner Ads 18314212
- CodeCanyon Educational Games Bundle #1 6 HTML5 Games CAPX included 18481676
- ThemeForest Bestapp Premium App Showcase Landing Page 17809528
- ThemeForest Max Blog Personal Blog PSD Template 18438090
- ThemeForest Mitri Events Events & Conference HTML Template 16231315
- ThemeForest Photograph Awesome Photography Portfolio Template 18138797
- ThemeForest Virgo PSD Multipurpose Template 18423878
- ThemeForest Pixel Multipurpose Site Template 18576527