- How To Create To Image Variation Swatches For Global Attributes
- How To Create To Image Variation Swatches For Manual Attributes
- How To Create To Image Variation Swatches From Scratch
How To Create Image Variation Swatches For Globally Created Attributes
If you have variable product in your store and have attribute variation created globally in attributes >> products page. This tutorial is for you.
Step 01: Editing AttributeHead to the Products >> Attributes. All existing global attributes are listed in the attribute list page section. After installing WooCommerce Variation Swatches plugin, it adds Type field. By default it would show Select under Type title. As WooCommerce Variation Swatches Plugin comes with 4 attribute types: Color, Image, Button and Radio. You can set any of attribute type for your desired attribute. For demonstration purpose, Image attribute has been created. We’ll add image attribute type for Image attribute. To set image attribute type to Image attribute, click on Edit. After selecting button, it will open attribute editing panel. Select Image Type from the type dropdown. When attribute type selection is completed, get back to the attribute list page. The Attribute list would look like the following image. Now Image Attribute is showing Image type instead of default Select type. After selecting attribute type, the frontend of the product would look like the following screenshot. Don’t be panic, if you find your attribute variations weird. It happens because you haven’t set any image for variations yet.
Step 02: Editing VariationsTo define image as variations inside the image attribute. Head over to Products >> Attributes. Select Configure terms from image attribute. After selecting Configure terms, a list of attribute variations comes up. For Image attribute, three variations: Charmeuse, Satin, Silk, Velvet and Wool variations are listed for me. As those variation have no image defined, they look like the following screenshot. Edit each variation one by one to add variation image. For demonstration, I am going to select Edit link for Charmeuse variation. From variation edit panel. Select desired image press Upload/Add Image button and the update the changes pressing the Update button. For my red variation. After adding image for entire variations, my variation list page looks like the following screenshot. And the frontend of my variable product that is connected with global attribute would look like following image. .
How To Create Image Variation Swatches From Manually Created Attributes
Step O1: Pro Plugin SetupIf you have variable products in your store and don’t have product attributes created globally, it means you have created attribute and it’s variations manually. To convert manually created attribute variations into image swatches, make sure you have premium version of WooCommerce Variation Swatches created. [button style=”rounded-btn” text=”Live Demo” button_link=”http://bit.ly/site-doc-manual-attribute-demo” link_target=”_blank” type=”medium-btn” bg_color=”#333333″ text_color=”#FFFFFF”] [button style=”rounded-btn” text=”Upgrade to Premium Version” button_link=”http://bit.ly/image-manual-doc-pro” link_target=”_blank” type=”medium-btn” bg_color=”#56bfd4″ text_color=”#FFFFFF”]
Step O2: Change Manual Attribute TypeIf you head to your Attributes tab from product data inside your product edit mode, and found variations are separated by pipe sign like the following screen. It means you have created variation manually. To Convert these manually created attribute variations, head to Swatches Settings tab, and select Image type from Select (Default) Dropdown. After selecting attribute type, the frontend of the product would look like the following screenshot. Don’t be panic, if you find your attribute variations weird. It happens because you haven’t set any image for variations yet. Step O3: Select Image For Variations After selecting attribute type, press the Image attribute accordion, it will reveal setting to add images for its available variations. After adding the above option the frontend would look like the following screenshot. .
How To Create Image Variation Swatches From Scratch