{"id":2015,"date":"2021-11-05T02:10:32","date_gmt":"2021-11-05T02:10:32","guid":{"rendered":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/?p=2015"},"modified":"2021-11-12T13:28:35","modified_gmt":"2021-11-12T13:28:35","slug":"product-attribute-swatches","status":"publish","type":"post","link":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/2021\/11\/05\/product-attribute-swatches\/","title":{"rendered":"Product Attribute Swatches"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Beautiful Color and Images Variation Swatches for product attributes<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PandaStore theme has a swatch function for variable product within it. It offers an aesthetic and professional experience to select attributes for variation products. It turns the product variation select options fields into images and colors. It means with the help of this powerful PandaStore Swatches, you can show product variation items in images and colors. So, you can say goodbye to dropdown product attribute fields.<\/p>\n\n\n\n<h4 class=\"mt-8 wp-block-heading\">How many swatch types<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">PandaStore provides color and image swatch types. Default is color swatch type. If you want image swatch, go to <strong><code class=\"code-grey\">Theme Options &gt; Features &gt; Advanced Swatch<\/code><\/strong> and set <strong><code>Enable Advanced Swatch<\/code><\/strong> toggle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/advanced-swatch-1024x451.jpg\" alt=\"image\" class=\"wp-image-2462\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/advanced-swatch-1024x451.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/advanced-swatch-768x338.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"mt-10 wp-block-heading\">How can you use it<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">To set a Color Swatch type or a Image Swatch type of product, your product must be a Variable Product and has&nbsp;corresponding attributes. If those attributes have not been created yet, you first add attributes and terms in <strong><code class=\"code-grey\">Products &gt; Attributes<\/code><\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"467\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attribute-1024x467.jpg\" alt=\"image\" class=\"wp-image-2458\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attribute-1024x467.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attribute-768x350.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you have finished adding attributes, you are ready to follow next steps.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>To set color and image swatch, navigate to <strong><code class=\"code-grey\">Products &gt; Attributes<\/code><\/strong> and set the type as List for all attributes.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attribute-type-1024x616.jpg\" alt=\"image\" class=\"wp-image-2459\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attribute-type-1024x616.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attribute-type-768x462.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li><\/li><li>Open product edit panel you selected and go to its <strong><code>Product Data<\/code><\/strong>. Change the product to Variable Product.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-data-1024x548.jpg\" alt=\"image\" class=\"wp-image-2464\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-data-1024x548.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-data-768x411.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"1\"><li><\/li><li><\/li><li>Go to Attributes and add color and size attributes to product with these settings.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attr-set-1024x558.jpg\" alt=\"image\" class=\"wp-image-2460\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attr-set-1024x558.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attr-set-768x419.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li><\/li><li><\/li><li><\/li><li>Finally, go to Variations and add variation.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"549\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attr-variation-1024x549.jpg\" alt=\"image\" class=\"wp-image-2461\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attr-variation-1024x549.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-attr-variation-768x411.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You will then get the result like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"463\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-detail-1024x463.jpg\" alt=\"image\" class=\"wp-image-2465\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-detail-1024x463.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-detail-768x348.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you enable image swatch types in <strong><code>Theme Options<\/code><\/strong>, it is possible to change swatch types to image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Go to <strong><code class=\"code-grey\">Product Data &gt; Image Change &amp; Swatch,<\/code><\/strong> upload images for each color attribute.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-image-1024x538.jpg\" alt=\"image\" class=\"wp-image-2466\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-image-1024x538.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-image-768x403.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After clicking <strong><code>Save changes<\/code><\/strong> button, you can get the result like this.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-unit-1024x412.jpg\" alt=\"image\" class=\"wp-image-2467\" srcset=\"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-unit-1024x412.jpg 1024w, https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-content\/uploads\/sites\/21\/2021\/11\/product-unit-768x309.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beautiful Color and Images Variation Swatches for product attributes PandaStore theme has a swatch function for variable product within it. It offers an aesthetic and professional experience to select attributes for variation products. It turns the product variation select options fields into images and colors. It means with the help of this powerful PandaStore Swatches, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-2015","post","type-post","status-publish","format-standard","hentry","category-09-add-ons"],"_links":{"self":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/posts\/2015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/comments?post=2015"}],"version-history":[{"count":0,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/posts\/2015\/revisions"}],"wp:attachment":[{"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/media?parent=2015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/categories?post=2015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/d-themes.com\/wordpress\/panda\/documentation\/wp-json\/wp\/v2\/tags?post=2015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}