<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>woocommerce add to cart variation Archives</title>
	<atom:link href="https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description></description>
	<lastBuildDate>Fri, 12 Jul 2024 10:18:38 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://docs.wpswings.com/wp-content/uploads/2022/01/cropped-wpSwings_wordmark_1080x1080-32x32.png</url>
	<title>woocommerce add to cart variation Archives</title>
	<link></link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>WooCommerce Variation Master</title>
		<link>https://docs.wpswings.com/woocommerce-variation-masters/</link>
					<comments>https://docs.wpswings.com/woocommerce-variation-masters/#respond</comments>
		
		<dc:creator><![CDATA[Musa Kazim Zaidi]]></dc:creator>
		<pubDate>Fri, 03 Aug 2018 14:54:48 +0000</pubDate>
				<category><![CDATA[Codecanyon]]></category>
		<category><![CDATA[WooCommerce / WordPress]]></category>
		<category><![CDATA[variable product]]></category>
		<category><![CDATA[variation update in cart]]></category>
		<category><![CDATA[woocommerce]]></category>
		<category><![CDATA[woocommerce add to cart variation]]></category>
		<category><![CDATA[woocommerce multiple product variations]]></category>
		<category><![CDATA[woocommerce product variations plugin]]></category>
		<category><![CDATA[woocommerce swatches]]></category>
		<guid isPermaLink="false">https://docs.wpswings.com/?p=5498</guid>

					<description><![CDATA[<p>The post <a href="https://docs.wpswings.com/woocommerce-variation-masters/">WooCommerce Variation Master</a> appeared first on <a href="https://docs.wpswings.com">WP Swings Documentation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<link rel='stylesheet' href='https://docs.wpswings.com/wp-content/plugins/documentor/skins/mint/style.css' type='text/css' media='all' /><div id="documentor-218" class="documentor-mint documentor-wrap" data-docid = "218" ><div class="documentor-topicons doc-noprint"><span class="doc-topiconswrap"></span><div class="cleardiv"></div><div class="clrright"></div></div><div class="document-wrapper"><div class="ddd doc-menu toggle doc-noprint" style="position: static;"><span class="doc-search">
					<input type="text" name="search_document" class="search-document" placeholder="Search" />
					<img decoding="async" src="https://docs.wpswings.com/wp-content/plugins/documentor/skins/mint/images/search.png" alt="search_image"/>
				</span><div class="doc-menurelated"><ol class="doc-list-front"><li class="doc-actli"><a class="documentor-menu " href="#overview-174"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#overview-174" data-sec-counter="1" data-section-id="1638">Overview</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#installation-132"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#installation-132" data-sec-counter="2" data-section-id="1640">Installation</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#variation-swatches"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#variation-swatches" data-sec-counter="3" data-section-id="1367">WooCommerce Variation Swatches</a><span class="doc-mtoggle expand"></span><div class="doc-menu-border"></div><ol><li class="doc-actli"><a class="documentor-menu " href="#general-setting-17"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#general-setting-17" data-sec-counter="3.1" data-section-id="1371">Global Setting</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#per-product-setting-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#per-product-setting-2" data-sec-counter="3.2" data-section-id="1372">Per Product Setting</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#export-attribute-csv-file"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#export-attribute-csv-file" data-sec-counter="3.3" data-section-id="1374">Import Attribute CSV file </a><div class="doc-menu-border"></div></li></ol></li><li class="doc-actli"><a class="documentor-menu " href="#import-export-setting-4"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#import-export-setting-4" data-sec-counter="4" data-section-id="1373">General Setting</a><span class="doc-mtoggle expand"></span><div class="doc-menu-border"></div><ol><li class="doc-actli"><a class="documentor-menu " href="#enable-swatches-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-swatches-2" data-sec-counter="4.1" data-section-id="3668">Enable Variation Swatches for WooCommerce</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-swatches-in-shop-archive-category-page-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-swatches-in-shop-archive-category-page-2" data-sec-counter="4.2" data-section-id="1623">Show Color Variation Swatches over Shop/Archive/Category Page</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-hide-variations-button-on-shop"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-hide-variations-button-on-shop" data-sec-counter="4.3" data-section-id="1624">Display Show Variations Button and Hide Swatches</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-variation-wise-gallery"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-variation-wise-gallery" data-sec-counter="4.4" data-section-id="1625">Enable Variation Wise Gallery and Add Slider On Variation Featured Image </a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-variation-update-on-cart-setting"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-variation-update-on-cart-setting" data-sec-counter="4.5" data-section-id="1626">Enable Variation Update On Cart </a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-attribute-term-label-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-attribute-term-label-2" data-sec-counter="4.6" data-section-id="1627">Show Attribute Term Label</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#display-border-on-selected-swatch-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#display-border-on-selected-swatch-2" data-sec-counter="4.7" data-section-id="1628">Display border on selected swatch</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#attributes-terms-thumbnails-display-type-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#attributes-terms-thumbnails-display-type-2" data-sec-counter="4.8" data-section-id="1637">Attributes Terms Thumbnails Display Type</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#attributes-terms-thumbnails-size"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#attributes-terms-thumbnails-size" data-sec-counter="4.9" data-section-id="1629">Attribute Terms Thumbnails Display Size for Product Detail Page</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#attributes-terms-thumbnails-display-type-for-shop"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#attributes-terms-thumbnails-display-type-for-shop" data-sec-counter="4.10" data-section-id="1630">Attributes Terms Thumbnails Display Type for Shop/Category Page </a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#use-global-size-everywhere-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#use-global-size-everywhere-2" data-sec-counter="4.11" data-section-id="1631">Use Global Size Everywhere</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#use-variation-featured-image-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#use-variation-featured-image-2" data-sec-counter="4.12" data-section-id="1632">Use Variation Featured Image</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-this-to-hide-add-to-cart-button-and-quantity-from-shop"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-this-to-hide-add-to-cart-button-and-quantity-from-shop" data-sec-counter="4.13" data-section-id="1634">Hide Add To Cart Button and Quantity from Shop</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-this-to-hide-add-to-cart-button-and-quantity-from-related-products"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-this-to-hide-add-to-cart-button-and-quantity-from-related-products" data-sec-counter="4.14" data-section-id="1635">Hide Add To Cart Button and Quantity from Related Products</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-single-attribute-on-shop-page"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-single-attribute-on-shop-page" data-sec-counter="4.15" data-section-id="3667">Show Single Attribute On Shop Page </a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#cross-variation-setting"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#cross-variation-setting" data-sec-counter="4.16" data-section-id="1641">Cross Variation Setting</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#number-of-variations-you-want-to-create-on-one-request"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#number-of-variations-you-want-to-create-on-one-request" data-sec-counter="4.17" data-section-id="3665"> Number of Variations You Want to Create on One Request</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-stock-alert-for-variations-on-a-single-page"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-stock-alert-for-variations-on-a-single-page" data-sec-counter="4.18" data-section-id="3666">Show Stock Alert for Variations on a Single Page</a><div class="doc-menu-border"></div></li></ol></li><li class="doc-actli"><a class="documentor-menu " href="#variation-gallery-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#variation-gallery-2" data-sec-counter="5" data-section-id="1639">WooCommerce Variation Gallery</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#advance-settings-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#advance-settings-2" data-sec-counter="6" data-section-id="3805">Advance Settings </a><span class="doc-mtoggle expand"></span><div class="doc-menu-border"></div><ol><li class="doc-actli"><a class="documentor-menu " href="#enable-social-sharing-settings"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-social-sharing-settings" data-sec-counter="6.1" data-section-id="3806">Enable Social Sharing Settings </a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#select-social-share-name-here"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#select-social-share-name-here" data-sec-counter="6.2" data-section-id="3807">Select Social Share Name Here</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-to-set-variation-swatches-text-font-size"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-to-set-variation-swatches-text-font-size" data-sec-counter="6.3" data-section-id="3826">Enable to Set Variation Swatches Text Font Size </a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#swatches-font-size"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#swatches-font-size" data-sec-counter="6.4" data-section-id="3827">Swatches Font Size</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#set-the-background-color-of-the-alert-message-for-woocomerce-variations"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#set-the-background-color-of-the-alert-message-for-woocomerce-variations" data-sec-counter="6.5" data-section-id="4861">Set the background color of the Alert message For WooComerce Variations </a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#set-the-text-color-of-the-alert-message"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#set-the-text-color-of-the-alert-message" data-sec-counter="6.6" data-section-id="4862">Set the text color of the Alert message</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#set-the-background-color-of-the-alert-message"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#set-the-background-color-of-the-alert-message" data-sec-counter="6.7" data-section-id="4863">Set the background color of the Alert message</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#set-the-text-color-of-the-alert-message-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#set-the-text-color-of-the-alert-message-2" data-sec-counter="6.8" data-section-id="4864">Set the text color of the Alert message</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-bestseller-highlight"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-bestseller-highlight" data-sec-counter="6.9" data-section-id="4865">Enable Bestseller Highlight</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#choose-terms"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#choose-terms" data-sec-counter="6.10" data-section-id="4866">Choose Terms</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enter-badge-tag-name"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enter-badge-tag-name" data-sec-counter="6.11" data-section-id="4867">Enter Badge/ Tag Name</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#select-badge-background-colour"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#select-badge-background-colour" data-sec-counter="6.12" data-section-id="4868">Select Badge Background Colour</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#choose-badge-font-colour"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#choose-badge-font-colour" data-sec-counter="6.13" data-section-id="4869">Choose Badge Font Colour</a><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-price-and-stock-information-on-hover"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-price-and-stock-information-on-hover" data-sec-counter="6.14" data-section-id="4967">Show Price And Stock Information On Hover</a><div class="doc-menu-border"></div></li></ol></li><li class="doc-actli"><a class="documentor-menu " href="#helpful-resources-12"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#helpful-resources-12" data-sec-counter="7" data-section-id="3838">Helpful Resources!!</a><div class="doc-menu-border"></div></li></ol></div></div><div class="doc-sec-container" id="documentor_seccontainer"><div class="doc-sectionwrap " id="overview-174_wrap"><div class="documentor-section  section-1638" id="overview-174" data-section-id="1638"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">1.</span>Overview <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#overview-174')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><a href="https://codecanyon.net/item/woocommerce-variation-master/17424737">WooCommerce Variation Master</a> plugin allows the admin to display WooCommerce variations of variable products in an attractive format. WooCommerce Variation Master is an easy-to-use and configure. Admin can simply Export/Import the variation gallery images and color/image/text swatches for each <span style="font-weight: 400;">WooCommerce variation product</span>, along with the easy global setting features. It provides full control to modify the setting for each variation.</p>
<p>Admin can disable the color/image/text swatches for particular variations, show the stock alert messages, hide/show the attribute name, and change the color/images/text for a particular variable product.</p>
<p><b>Features of  WooCommerce Variable Product</b><span style="font-weight: 400;">:<br />
</span></p>
<p><span style="font-weight: 400;">These are some of the extra-ordinary features of WooCommerce Variation Plugin,</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Admin can add multiple gallery images for each variation, color, and image swatches for attributes for </span><span style="font-weight: 400;">WooCommerce variation product</span><span style="font-weight: 400;"> custom attributes.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Admin can use both ‘select’ and ‘color and image swatch’ combinations.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Easy </span><span style="font-weight: 400;">WooCommerce import products for variation</span><span style="font-weight: 400;">/ export for variation gallery images, attributes color and image swatches.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Enable and customize the stock alert message. Set the minimum quality for displaying the stock alerts. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Admin can determine the number of variations to be created on one request.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Variation wise color and image swatches customization.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Allow buyers to update variations on the cart.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Module-wise control of each feature from a single page.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Product Gallery Slider in the variable product.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Easy to change the variation of image size.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Gallery image slider on variable products.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">WooCommerce Variation Swatches in Variable Product Update Cart Popup.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">WooCommerce Variation Product</span><span style="font-weight: 400;"> Gallery Slider in Variable Product Update Cart Popup.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Product Gallery with two Layouts.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">On the </span><span style="font-weight: 400;">WooCommerce product Attribute </span><span style="font-weight: 400;">swatch for display type will text along with image &amp; color.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Hide Add To Cart button and Product Quantity from the shop page.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Add custom size to display the </span><span style="font-weight: 400;">WooCommerce product attributes</span><span style="font-weight: 400;"> term thumbnail on the shop page.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Show/Hide variation button on related products.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Hide Add to Cart and Quantity fields from the shop page/related products.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">The variation will be Crossed, when not available.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Settings to show only one attribute on the shop page.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Change the </span><span style="font-weight: 400;">WooCommerce variation</span><span style="font-weight: 400;"> image on the mouse-hover event of attributes.</span></li>
</ul>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="installation-132_wrap"><div class="documentor-section  section-1640" id="installation-132" data-section-id="1640"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">2.</span>Installation <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#installation-132')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><ol>
<li><b> Automatic Installation:</b></li>
</ol>
<p><span style="font-weight: 400;">Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser.</span></p>
<p><span style="font-weight: 400;">The steps are as follows: </span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Log into your WordPress dashboard.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Navigate to the Plugins menu and click on </span><b>Add New</b><span style="font-weight: 400;">.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on the ‘</span><b>Upload Plugin</b><span style="font-weight: 400;">’ button.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on the ‘</span><b>Browse</b><span style="font-weight: 400;">’ button and navigate to the downloaded ‘</span><b>WooCommerce Variation Master</b><span style="font-weight: 400;">’ zip file and click ok.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Most importantly, of course, you can install it by simply clicking </span><b>Install Now</b><span style="font-weight: 400;">.</span></li>
</ul>
<ol start="2">
<li><b> Manual Installation:</b></li>
</ol>
<p><span style="font-weight: 400;">The manual installation of the Extension is another option to install the extension to your WordPress environment. The manual installation method involves downloading our WordPress Extension and uploading it to your webserver via your favorite FTP application.</span></p>
<p><span style="font-weight: 400;">The steps are as follows:</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Extract the downloaded ‘</span><b>WooCommerce Variation Master</b><span style="font-weight: 400;">’ zip file.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Upload the WooCommerce Variation Master folder to the /wp-content/plugins/ directory.</span></li>
<li style="font-weight: 400;" aria-level="1">Activate the ‘<b>WooCommerce Variation Master</b>’ through the ‘Plugins’ menu in WordPress.</li>
</ul>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="variation-swatches_wrap"><div class="documentor-section  section-1367" id="variation-swatches" data-section-id="1367"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.</span>WooCommerce Variation Swatches <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#variation-swatches')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This WooCommerce Variation Swatches plugin replaces the default variation color swatches selection of products with attribute term swatches. Here you’ve two options to display the variation swatches for WooCommerce store:</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><b>Manually:</b><span style="font-weight: 400;"> You can assign the attribute term text/image/color from the attribute edit page under</span><b> product &gt; Attributes &gt; edit attribute</b><span style="font-weight: 400;"> and select the text/image/color you want to show instead of the default options in the dropdown.</span></li>
<li style="font-weight: 400;" aria-level="1"><b>Using Import / Export:</b><span style="font-weight: 400;"> You can import the text/color/images for all/selected attribute terms using our export/import feature. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">To do this, you need to open the </span><b>Variation Master &gt; Import/Export tab</b><span style="font-weight: 400;"> and press the ‘</span><b>export attribute</b><span style="font-weight: 400;">’ button. You will get a CSV file with all of your attribute terms.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">After editing the CSV file, browse the file location and import it via pressing the ‘</span><b>Import Attribute</b><span style="font-weight: 400;">’ button.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Afterward, please go to the </span><b>Variation Master Setting &gt; Enable Swatches</b><span style="font-weight: 400;"> setting and  </span><b>Use Attribute Terms Thumbnails</b><span style="font-weight: 400;">.</span></li>
</ul>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="general-setting-17_wrap"><div class="documentor-section  section-1371" id="general-setting-17" data-section-id="1371"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.1.</span>Global Setting <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#general-setting-17')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">To implement Global settings, you need to start with creating </span><b>Global WooCommerce Product Attributes</b><span style="font-weight: 400;">. </span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Navigate to the sidebar and click on </span><b>Products &gt; Attribute</b><span style="font-weight: 400;">. Here you can create a new attribute and edit/delete previously created attributes.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">To create a new attribute, fill out the required fields like Name, Slug, etc.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Lastly, click on the ‘</span><b>Add Attribute</b><span style="font-weight: 400;">’ tab. </span></li>
</ul>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/1-variation-master-1.png"><img fetchpriority="high" decoding="async" class="aligncenter wp-image-22329 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/1-variation-master-1.png" alt="Global settings 1" width="1337" height="550" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/1-variation-master-1.png 1337w, https://docs.wpswings.com/wp-content/uploads/2022/02/1-variation-master-1-300x123.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/1-variation-master-1-1024x421.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/1-variation-master-1-768x316.png 768w" sizes="(max-width: 1337px) 100vw, 1337px" /></a></p>
<p><span style="font-weight: 400;">After successfully creating an Attribute, click on a particular <strong>WooCommerce Product </strong></span><b>Attribute Name</b><span style="font-weight: 400;"> to</span><b> Add Attributes</b><span style="font-weight: 400;"> terms. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/2-variation-master-2.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22330 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/2-variation-master-2.png" alt="global setting 2" width="1332" height="551" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/2-variation-master-2.png 1332w, https://docs.wpswings.com/wp-content/uploads/2022/02/2-variation-master-2-300x124.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/2-variation-master-2-1024x424.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/2-variation-master-2-768x318.png 768w" sizes="auto, (max-width: 1332px) 100vw, 1332px" /></a></p>
<p><span style="font-weight: 400;">To configure the terms you have to enter the </span><b>Term Name, Term Slug, Description,</b><span style="font-weight: 400;"> and select the </span><b>Display type</b><span style="font-weight: 400;">. This plugin provides three types of display types, </span><b>Image, Text, and Color</b><span style="font-weight: 400;">.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/3-variation-master-3.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22333 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/3-variation-master-3.png" alt="global setting 3" width="1347" height="548" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/3-variation-master-3.png 1347w, https://docs.wpswings.com/wp-content/uploads/2022/02/3-variation-master-3-300x122.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/3-variation-master-3-1024x417.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/3-variation-master-3-768x312.png 768w" sizes="auto, (max-width: 1347px) 100vw, 1347px" /></a></p>
<p><span style="font-weight: 400;">And the last click on ‘</span><b>Add New Term</b><span style="font-weight: 400;">’, your </span><b>Attribute Term</b><span style="font-weight: 400;"> is successfully created.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/4-variation-master-4.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22334 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/4-variation-master-4.png" alt="global setting 4" width="1344" height="548" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/4-variation-master-4.png 1344w, https://docs.wpswings.com/wp-content/uploads/2022/02/4-variation-master-4-300x122.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/4-variation-master-4-1024x418.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/4-variation-master-4-768x313.png 768w" sizes="auto, (max-width: 1344px) 100vw, 1344px" /></a></p>
<p><span style="font-weight: 400;">Now, you can add multiple ‘</span><b>Attributes</b><span style="font-weight: 400;">’ and ‘</span><b>Attributes Terms</b><span style="font-weight: 400;">’ according to your requirements.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/5-variation-master.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22335 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/5-variation-master.png" alt="global setting 5" width="1346" height="548" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/5-variation-master.png 1346w, https://docs.wpswings.com/wp-content/uploads/2022/02/5-variation-master-300x122.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/5-variation-master-1024x417.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/5-variation-master-768x313.png 768w" sizes="auto, (max-width: 1346px) 100vw, 1346px" /></a></p>
<p><span style="font-weight: 400;">After successfully creating attributes, you have to enable the plugin setting. Go to the dashboard, click on ‘</span><b>Variation Master</b><span style="font-weight: 400;">’ settings, and enable ‘</span><b>Enable Swatches</b><span style="font-weight: 400;">’ and ‘</span><b>Use Attributes Terms Thumbnails</b><span style="font-weight: 400;">’ settings.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/global-setting-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-24319 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/global-setting-1.png" alt="global setting" width="1440" height="482" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/global-setting-1.png 1440w, https://docs.wpswings.com/wp-content/uploads/2019/05/global-setting-1-300x100.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/global-setting-1-1024x343.png 1024w, https://docs.wpswings.com/wp-content/uploads/2019/05/global-setting-1-768x257.png 768w" sizes="auto, (max-width: 1440px) 100vw, 1440px" /></a></p>
<p><span style="font-weight: 400;">After enabling these two toggle buttons, you can view the colored swatches variation of the product.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/7-variation-master-6.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22337 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/7-variation-master-6.png" alt="gloabal setting 7" width="904" height="673" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/7-variation-master-6.png 904w, https://docs.wpswings.com/wp-content/uploads/2022/02/7-variation-master-6-300x223.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/7-variation-master-6-768x572.png 768w" sizes="auto, (max-width: 904px) 100vw, 904px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="per-product-setting-2_wrap"><div class="documentor-section  section-1372" id="per-product-setting-2" data-section-id="1372"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.2.</span>Per Product Setting <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#per-product-setting-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p>To enable the WooCommerce variation swatches product-wise, go to the product edit page on which you want to set the per product set. To enable the product-wise setting first you need to add attributes and their values by clicking on the <span style="font-weight: 400;">WooCommerce Product ‘Attribute</span><span style="font-weight: 400;">‘</span> tab.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-attribute.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9383 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-attribute.png" sizes="auto, (max-width: 867px) 100vw, 867px" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-attribute.png 867w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-attribute-300x201.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-attribute-768x515.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-attribute-272x182.png 272w" alt="woocommerce-color-and-swatches-attribute" width="867" height="581" /></a></div>
<p>And then click on the <strong>“Variation Swatches”</strong> tab after <strong>“Advanced”</strong> tab, from here admin can –</p>
<ol>
<li>Disable the swatches for this variable product.</li>
<li>Change the label name for each attribute.</li>
<li>Select the display types to show attribute terms.
<ul>
<li>Text/color/Image</li>
<li>Default Global Select</li>
</ul>
</li>
<li>Select the display size of attribute swatches.
<ul>
<li>Pre Defined Size</li>
<li>Default Global Size</li>
<li>Custom Size</li>
</ul>
</li>
<li>Hide the term display name.</li>
<li>Using attribute term (global) for each term.</li>
</ol>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9384 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches.png" sizes="auto, (max-width: 848px) 100vw, 848px" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches.png 848w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches-300x122.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches-768x313.png 768w" alt="woocommerce-color-and-swatches-variation-swtches" width="848" height="346" /></a></div>
<p>Now click on the Display Type <strong>Image</strong>/<strong>Color</strong>/<strong>Text, </strong>select Display Name ‘<strong>Yes</strong>’ from the dropdown list and select the <strong>Display Size</strong> of attributes.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-image-attribute-size.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9957 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-image-attribute-size.png" alt="woocommerce-color-and-swatches-image-attribute-size" width="849" height="583" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-image-attribute-size.png 849w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-image-attribute-size-300x206.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-image-attribute-size-768x527.png 768w" sizes="auto, (max-width: 849px) 100vw, 849px" /></a></div>
<p>Now click on attribute terms, Here set the Display Type and related display settings of <span style="font-weight: 400;">WooCommerce Product</span> attributes.</p>
<p>⇒If select Attribute Display Type &#8216;<strong>Text</strong>&#8216; then enters text to show variation in attributes.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9922 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1.png" sizes="auto, (max-width: 859px) 100vw, 859px" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1.png 859w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1-300x218.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1-768x559.png 768w" alt="woocommerce-color-and-swatches-swatches-variation-1" width="859" height="625" /></a></div>
<p>⇒If select Attribute Display Type &#8216;<strong>Color</strong>&#8216; then chooses a color to show variation in attributes.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9903 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2.png" sizes="auto, (max-width: 862px) 100vw, 862px" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2.png 862w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2-300x219.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2-768x561.png 768w" alt="woocommerce-color-and-swatches-select-color" width="862" height="630" /></a></div>
<p>⇒If select Attribute Display Type &#8216;Image&#8217; then <strong>Select/Upload</strong> to show variation in attributes.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/13-woocommerce-color-and-swatches-image-attribute.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22343 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/13-woocommerce-color-and-swatches-image-attribute.png" alt="global setting 13" width="861" height="586" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/13-woocommerce-color-and-swatches-image-attribute.png 861w, https://docs.wpswings.com/wp-content/uploads/2022/02/13-woocommerce-color-and-swatches-image-attribute-300x204.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/13-woocommerce-color-and-swatches-image-attribute-768x523.png 768w" sizes="auto, (max-width: 861px) 100vw, 861px" /></a></div>
<p>Enable the WooCommerce variation Swatches and last click on the ‘<strong>Save Changes</strong>‘ button.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/per-product-setting.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-24320 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/per-product-setting.png" alt="per product setting" width="1372" height="1540" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/per-product-setting.png 1372w, https://docs.wpswings.com/wp-content/uploads/2019/05/per-product-setting-267x300.png 267w, https://docs.wpswings.com/wp-content/uploads/2019/05/per-product-setting-912x1024.png 912w, https://docs.wpswings.com/wp-content/uploads/2019/05/per-product-setting-768x862.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/05/per-product-setting-1368x1536.png 1368w" sizes="auto, (max-width: 1372px) 100vw, 1372px" /></a></div>
<p>Now you can see the per product variation swatches of the product.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/15-variation-master-6.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22345 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/15-variation-master-6.png" alt="global setting 15" width="904" height="673" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/15-variation-master-6.png 904w, https://docs.wpswings.com/wp-content/uploads/2022/02/15-variation-master-6-300x223.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/15-variation-master-6-768x572.png 768w" sizes="auto, (max-width: 904px) 100vw, 904px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="export-attribute-csv-file_wrap"><div class="documentor-section  section-1374" id="export-attribute-csv-file" data-section-id="1374"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.3.</span>Import Attribute CSV file  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#export-attribute-csv-file')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/import-export-setting.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-24321 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/import-export-setting.png" alt="import &amp; export setting" width="1089" height="758" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/import-export-setting.png 1089w, https://docs.wpswings.com/wp-content/uploads/2019/05/import-export-setting-300x209.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/import-export-setting-1024x713.png 1024w, https://docs.wpswings.com/wp-content/uploads/2019/05/import-export-setting-768x535.png 768w" sizes="auto, (max-width: 1089px) 100vw, 1089px" /></a></div>
<p>From here admin can download the .csv file for all existed attributes, terms and after editing the .csv file by providing the display type (0 if you don’t want to use the term, for now, 1 for images, 2 for color swatches and 3 for text), image URL and color code all you need to browse the edited file and press the import button.</p>
<p id="work_flow_strongdemo_csv_file_strong"><strong>Demo CSV file:</strong></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/Untitled.png"><img loading="lazy" decoding="async" class="alignnone wp-image-11759 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/Untitled.png" alt="variation-master" width="1302" height="263" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/Untitled.png 1302w, https://docs.wpswings.com/wp-content/uploads/2019/05/Untitled-300x61.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/Untitled-768x155.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/05/Untitled-1024x207.png 1024w" sizes="auto, (max-width: 1302px) 100vw, 1302px" /></a></div>
<p>After importing.CSV file, you can check the changes applied to the attribute edit page of each term under the products tab of WooCommerce.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/variation-maste1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-11760 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/variation-maste1.png" alt="variation-master" width="1347" height="597" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/variation-maste1.png 1347w, https://docs.wpswings.com/wp-content/uploads/2019/05/variation-maste1-300x133.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/variation-maste1-768x340.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/05/variation-maste1-1024x454.png 1024w" sizes="auto, (max-width: 1347px) 100vw, 1347px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="import-export-setting-4_wrap"><div class="documentor-section  section-1373" id="import-export-setting-4" data-section-id="1373"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.</span>General Setting <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#import-export-setting-4')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p>Here we are introducing you, Global Settings of the plugin. If you don’t set the per product setting then this setting will work on all products.</p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/general-settings-2.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-24325 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/general-settings-2.png" alt="general settings" width="1372" height="1540" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/general-settings-2.png 1372w, https://docs.wpswings.com/wp-content/uploads/2019/05/general-settings-2-267x300.png 267w, https://docs.wpswings.com/wp-content/uploads/2019/05/general-settings-2-912x1024.png 912w, https://docs.wpswings.com/wp-content/uploads/2019/05/general-settings-2-768x862.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/05/general-settings-2-1368x1536.png 1368w" sizes="auto, (max-width: 1372px) 100vw, 1372px" /></a></p>
<div class="mwb-docs-product-images"></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-swatches-2_wrap"><div class="documentor-section  section-3668" id="enable-swatches-2" data-section-id="3668"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.1.</span>Enable Variation Swatches for WooCommerce <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-swatches-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this toggle to use the amazing features of our plugin.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-swatches-in-shop-archive-category-page-2_wrap"><div class="documentor-section  section-1623" id="show-swatches-in-shop-archive-category-page-2" data-section-id="1623"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.2.</span>Show Color Variation Swatches over Shop/Archive/Category Page <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-swatches-in-shop-archive-category-page-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this feature to show WooCommerce Variation Swatches on Shop/Archive/Category pages.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/21-variation-master-6.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22353 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/21-variation-master-6.png" alt="general setting 2" width="904" height="673" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/21-variation-master-6.png 904w, https://docs.wpswings.com/wp-content/uploads/2022/02/21-variation-master-6-300x223.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/21-variation-master-6-768x572.png 768w" sizes="auto, (max-width: 904px) 100vw, 904px" /></a></p>
<p><span style="font-weight: 400;">Now, here you can see the variation color swatches on the shop page.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-hide-variations-button-on-shop_wrap"><div class="documentor-section  section-1624" id="show-hide-variations-button-on-shop" data-section-id="1624"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.3.</span>Display Show Variations Button and Hide Swatches <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-hide-variations-button-on-shop')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><div class="doc-sec-content">
<p><span style="font-weight: 400;">Enable this toggle to Display Show WooCommerce Variations Button And Hide Swatches on the Shop/Archive/Category page. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/23-variation-master-15-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22354 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/23-variation-master-15-1.png" alt="general setting 3" width="919" height="660" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/23-variation-master-15-1.png 919w, https://docs.wpswings.com/wp-content/uploads/2022/02/23-variation-master-15-1-300x215.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/23-variation-master-15-1-768x552.png 768w" sizes="auto, (max-width: 919px) 100vw, 919px" /></a></p>
<p><span style="font-weight: 400;">After enabling this feature, you can see the Hide Variations and Show Variations Button on the shop page.</span></p>
</div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-variation-wise-gallery_wrap"><div class="documentor-section  section-1625" id="enable-variation-wise-gallery" data-section-id="1625"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.4.</span>Enable Variation Wise Gallery and Add Slider On Variation Featured Image  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-variation-wise-gallery')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this toggle to add the variation-wise gallery on the product detail page. It will help your customers to easily select a variation. </span></p>
<p><span style="font-weight: 400;">Click on the Enable Slider On Variation Featured Image toggle to use the slider on the variation feature image.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/24-variation-master-1-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22356 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/24-variation-master-1-1.png" alt="general setting 4" width="1146" height="899" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/24-variation-master-1-1.png 1146w, https://docs.wpswings.com/wp-content/uploads/2022/02/24-variation-master-1-1-300x235.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/24-variation-master-1-1-1024x803.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/24-variation-master-1-1-768x602.png 768w" sizes="auto, (max-width: 1146px) 100vw, 1146px" /></a></p>
<p><span style="font-weight: 400;">After successfully saving the setting, set the variation gallery images of a particular product. </span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Go to the product edit page. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on </span><b>Variations &gt; Add Variation Gallery Images.</b><span style="font-weight: 400;"> </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Here you can add multiple images of your variable product.</span></li>
</ul>
<p><span style="font-weight: 400;">At last, click on the </span><b>Save Changes</b><span style="font-weight: 400;"> button.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/25-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22357 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/25-1.png" alt="general setting 5" width="905" height="993" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/25-1.png 905w, https://docs.wpswings.com/wp-content/uploads/2022/02/25-1-273x300.png 273w, https://docs.wpswings.com/wp-content/uploads/2022/02/25-1-768x843.png 768w" sizes="auto, (max-width: 905px) 100vw, 905px" /></a></p>
<p><span style="font-weight: 400;">Next up, you can see the variation gallery on the product detail page.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/26.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22358 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/26.png" alt="general setting 6" width="1054" height="574" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/26.png 1054w, https://docs.wpswings.com/wp-content/uploads/2022/02/26-300x163.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/26-1024x558.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/26-768x418.png 768w" sizes="auto, (max-width: 1054px) 100vw, 1054px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-variation-update-on-cart-setting_wrap"><div class="documentor-section  section-1626" id="enable-variation-update-on-cart-setting" data-section-id="1626"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.5.</span>Enable Variation Update On Cart  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-variation-update-on-cart-setting')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Through this setting, you can allow your customer to change the variation on the cart page.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/11/update-cart-setting.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-24323 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/11/update-cart-setting.png" alt="update cart setting" width="1369" height="478" srcset="https://docs.wpswings.com/wp-content/uploads/2019/11/update-cart-setting.png 1369w, https://docs.wpswings.com/wp-content/uploads/2019/11/update-cart-setting-300x105.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/11/update-cart-setting-1024x358.png 1024w, https://docs.wpswings.com/wp-content/uploads/2019/11/update-cart-setting-768x268.png 768w" sizes="auto, (max-width: 1369px) 100vw, 1369px" /></a></p>
<p><span style="font-weight: 400;">After adding this feature, your customer will see the update button on the cart page. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/28-WooCommerce-Variation-MasterUpdateInCart.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22360 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/28-WooCommerce-Variation-MasterUpdateInCart.png" alt="general setting 8" width="858" height="700" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/28-WooCommerce-Variation-MasterUpdateInCart.png 858w, https://docs.wpswings.com/wp-content/uploads/2022/02/28-WooCommerce-Variation-MasterUpdateInCart-300x245.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/28-WooCommerce-Variation-MasterUpdateInCart-768x627.png 768w" sizes="auto, (max-width: 858px) 100vw, 858px" /></a></p>
<p><span style="font-weight: 400;">After clicking on the ‘</span><b>Update</b><span style="font-weight: 400;">’ button, a Popup will display where customers can see the Gallery Slider and Variation Swatches. It will allow them to easily update their variations and product quantity.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/29-WooCommerce-Variation-Master-SelectProductInCart.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22362 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/29-WooCommerce-Variation-Master-SelectProductInCart.png" alt="general setting 29" width="797" height="388" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/29-WooCommerce-Variation-Master-SelectProductInCart.png 797w, https://docs.wpswings.com/wp-content/uploads/2022/02/29-WooCommerce-Variation-Master-SelectProductInCart-300x146.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/29-WooCommerce-Variation-Master-SelectProductInCart-768x374.png 768w" sizes="auto, (max-width: 797px) 100vw, 797px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-attribute-term-label-2_wrap"><div class="documentor-section  section-1627" id="show-attribute-term-label-2" data-section-id="1627"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.6.</span>Show Attribute Term Label <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-attribute-term-label-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this feature to show the attribute text as </span><b>Above Swatches, Over swatches, and Tool-tip</b><span style="font-weight: 400;">. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/30-variation-master-6.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22363 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/30-variation-master-6.png" alt="general setting 10" width="1146" height="479" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/30-variation-master-6.png 1146w, https://docs.wpswings.com/wp-content/uploads/2022/02/30-variation-master-6-300x125.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/30-variation-master-6-1024x428.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/30-variation-master-6-768x321.png 768w" sizes="auto, (max-width: 1146px) 100vw, 1146px" /></a></p>
<p><span style="font-weight: 400;">If you select the Attribute Term Label as the Tooltip, you can see the attribute text like this: </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-14-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22365 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-14-1.png" alt="general setting 11" width="880" height="541" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-14-1.png 880w, https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-14-1-300x184.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-14-1-768x472.png 768w, https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-14-1-620x380.png 620w" sizes="auto, (max-width: 880px) 100vw, 880px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="display-border-on-selected-swatch-2_wrap"><div class="documentor-section  section-1628" id="display-border-on-selected-swatch-2" data-section-id="1628"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.7.</span>Display border on selected swatch <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#display-border-on-selected-swatch-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this feature to show the border on the selected WooCommerce Variation swatches. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-7-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22367 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-7-1.png" alt="general setting 12" width="1148" height="479" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-7-1.png 1148w, https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-7-1-300x125.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-7-1-1024x427.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/32-variation-master-7-1-768x320.png 768w" sizes="auto, (max-width: 1148px) 100vw, 1148px" /></a></p>
<p><span style="font-weight: 400;">Here’s how to appear on the frontend. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/33-variation-master-15.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22370 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/33-variation-master-15.png" alt="general setting 13" width="1089" height="707" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/33-variation-master-15.png 1089w, https://docs.wpswings.com/wp-content/uploads/2022/02/33-variation-master-15-300x195.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/33-variation-master-15-1024x665.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/33-variation-master-15-768x499.png 768w" sizes="auto, (max-width: 1089px) 100vw, 1089px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="attributes-terms-thumbnails-display-type-2_wrap"><div class="documentor-section  section-1637" id="attributes-terms-thumbnails-display-type-2" data-section-id="1637"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.8.</span>Attributes Terms Thumbnails Display Type <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#attributes-terms-thumbnails-display-type-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Set the display type of attribute terms thumbnails. There are three types of display types: </span><b>Circle, Square, and Rectangle</b><span style="font-weight: 400;">.</span></p>
<p><b>Note:</b><span style="font-weight: 400;"> This setting will work when the per-product setting is disabled.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/34-variation-master-8.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22375 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/34-variation-master-8.png" alt="general setting 14" width="1146" height="525" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/34-variation-master-8.png 1146w, https://docs.wpswings.com/wp-content/uploads/2022/02/34-variation-master-8-300x137.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/34-variation-master-8-1024x469.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/34-variation-master-8-768x352.png 768w" sizes="auto, (max-width: 1146px) 100vw, 1146px" /></a></p>
<p><span style="font-weight: 400;">Here you can see the attribute terms thumbnails are square format.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/35-woocommerce-color-and-swatches-10.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22376 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/35-woocommerce-color-and-swatches-10.png" alt="general settings 15" width="898" height="755" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/35-woocommerce-color-and-swatches-10.png 898w, https://docs.wpswings.com/wp-content/uploads/2022/02/35-woocommerce-color-and-swatches-10-300x252.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/35-woocommerce-color-and-swatches-10-768x646.png 768w" sizes="auto, (max-width: 898px) 100vw, 898px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="attributes-terms-thumbnails-size_wrap"><div class="documentor-section  section-1629" id="attributes-terms-thumbnails-size" data-section-id="1629"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.9.</span>Attribute Terms Thumbnails Display Size for Product Detail Page <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#attributes-terms-thumbnails-size')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Set the ‘size’ of attribute terms thumbnails for the Shop Page. You can choose from the following four types of display sizes: </strong></p>
<p>&nbsp;</p>
<ul>
<li style="font-weight: 400;" aria-level="1"><strong>20px*20px</strong></li>
<li style="font-weight: 400;" aria-level="1"><strong>30px*30px</strong></li>
<li style="font-weight: 400;" aria-level="1"><strong>40px*40px</strong></li>
<li style="font-weight: 400;" aria-level="1"><strong>Other (This allows the admin to set the requested size of the thumbnail attribute) </strong></li>
</ul>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/36-variation-master-9.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22377 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/36-variation-master-9.png" alt="general setting 16" width="1132" height="487" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/36-variation-master-9.png 1132w, https://docs.wpswings.com/wp-content/uploads/2022/02/36-variation-master-9-300x129.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/36-variation-master-9-1024x441.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/36-variation-master-9-768x330.png 768w" sizes="auto, (max-width: 1132px) 100vw, 1132px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="attributes-terms-thumbnails-display-type-for-shop_wrap"><div class="documentor-section  section-1630" id="attributes-terms-thumbnails-display-type-for-shop" data-section-id="1630"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.10.</span>Attributes Terms Thumbnails Display Type for Shop/Category Page  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#attributes-terms-thumbnails-display-type-for-shop')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Attributes Terms Thumbnails Display Type for Shop/Category Page: </strong>Through this setting set the “size” of attribute terms thumbnails for Shop Page. Here we are providing four types of display size.</p>
<ul>
<li>20px*20px</li>
<li>30px*30px</li>
<li>40px*40px</li>
<li><strong>Custom size: </strong>This setting allow the admin to set the requested size of the thumbnail attribute.</li>
</ul>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-10.png"><img loading="lazy" decoding="async" class="alignnone wp-image-11751 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-10.png" alt="variation-master" width="1144" height="528" srcset="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-10.png 1144w, https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-10-300x138.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-10-768x354.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-10-1024x473.png 1024w" sizes="auto, (max-width: 1144px) 100vw, 1144px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="use-global-size-everywhere-2_wrap"><div class="documentor-section  section-1631" id="use-global-size-everywhere-2" data-section-id="1631"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.11.</span>Use Global Size Everywhere <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#use-global-size-everywhere-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this toggle button to use the global size for all swatches and labels.</span></p>
<p><b>Note:</b><span style="font-weight: 400;"> When you enable the Global Setting, then the per-product setting of size doesn’t work.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/38-variation-master-11.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22379 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/38-variation-master-11.png" alt="general setting 18" width="1134" height="660" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/38-variation-master-11.png 1134w, https://docs.wpswings.com/wp-content/uploads/2022/02/38-variation-master-11-300x175.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/38-variation-master-11-1024x596.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/38-variation-master-11-768x447.png 768w" sizes="auto, (max-width: 1134px) 100vw, 1134px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="use-variation-featured-image-2_wrap"><div class="documentor-section  section-1632" id="use-variation-featured-image-2" data-section-id="1632"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.12.</span>Use Variation Featured Image <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#use-variation-featured-image-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this setting to use the variation feature image as a swatch image for the selected product. </span></p>
<p><span style="font-weight: 400;">Follow these steps to set the featured image for color swatches.</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Go to the </span><b>Product edit page &gt; Variations</b><span style="font-weight: 400;">.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Set the featured image for WooCommerce variation swatches.</span></li>
</ul>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/39-variation-master.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22380 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/39-variation-master.png" alt="general setting 19" width="846" height="385" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/39-variation-master.png 846w, https://docs.wpswings.com/wp-content/uploads/2022/02/39-variation-master-300x137.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/39-variation-master-768x350.png 768w" sizes="auto, (max-width: 846px) 100vw, 846px" /></a></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on </span><b>Variations</b><span style="font-weight: 400;"> and go to the </span><b>Add Variation</b><span style="font-weight: 400;">. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on ‘</span><b>Go</b><span style="font-weight: 400;">’ and fill all the required fields, and set a featured image. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Choose only those colors that are previously selected under the attribute section.</span></li>
</ul>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/40-variation-master.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22381 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/40-variation-master.png" alt="general setting 20" width="850" height="989" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/40-variation-master.png 850w, https://docs.wpswings.com/wp-content/uploads/2022/02/40-variation-master-258x300.png 258w, https://docs.wpswings.com/wp-content/uploads/2022/02/40-variation-master-768x894.png 768w" sizes="auto, (max-width: 850px) 100vw, 850px" /></a></p>
<p>&nbsp;</p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Enable the </span><b>‘Use Variation Feature image</b><span style="font-weight: 400;">’. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on the ‘</span><b>Save Changes</b><span style="font-weight: 400;">’.</span></li>
</ul>
<p><span style="font-weight: 400;">On the product detail page, you can see the variation swatches as the featured images.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/42-variation-master13.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22382 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/42-variation-master13.png" alt="general setting 21" width="1072" height="698" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/42-variation-master13.png 1072w, https://docs.wpswings.com/wp-content/uploads/2022/02/42-variation-master13-300x195.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/42-variation-master13-1024x667.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/42-variation-master13-768x500.png 768w" sizes="auto, (max-width: 1072px) 100vw, 1072px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-this-to-hide-add-to-cart-button-and-quantity-from-shop_wrap"><div class="documentor-section  section-1634" id="enable-this-to-hide-add-to-cart-button-and-quantity-from-shop" data-section-id="1634"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.13.</span>Hide Add To Cart Button and Quantity from Shop <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-this-to-hide-add-to-cart-button-and-quantity-from-shop')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Click on the toggle to hide the </span><b>Add to Cart button</b><span style="font-weight: 400;"> and </span><b>Product Quantity</b><span style="font-weight: 400;"> from the shop/cart page.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/45-variation-master-3.png"><img loading="lazy" decoding="async" class="alignnone wp-image-22396 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/45-variation-master-3.png" alt="general setting 22" width="1152" height="1120" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/45-variation-master-3.png 1152w, https://docs.wpswings.com/wp-content/uploads/2022/02/45-variation-master-3-300x292.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/45-variation-master-3-1024x996.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/45-variation-master-3-768x747.png 768w" sizes="auto, (max-width: 1152px) 100vw, 1152px" /></a></p>
<p><span style="font-weight: 400;">On the front end, you can’t see the </span><b>Add to Cart</b><span style="font-weight: 400;"> button and the </span><b>Product Quantity</b><span style="font-weight: 400;"> of the product.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/44.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22400 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/44.png" alt="glenal setting 23" width="1160" height="646" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/44.png 1160w, https://docs.wpswings.com/wp-content/uploads/2022/02/44-300x167.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/44-1024x570.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/44-768x428.png 768w" sizes="auto, (max-width: 1160px) 100vw, 1160px" /></a></p>
<h3></h3>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-this-to-hide-add-to-cart-button-and-quantity-from-related-products_wrap"><div class="documentor-section  section-1635" id="enable-this-to-hide-add-to-cart-button-and-quantity-from-related-products" data-section-id="1635"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.14.</span>Hide Add To Cart Button and Quantity from Related Products <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-this-to-hide-add-to-cart-button-and-quantity-from-related-products')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This setting allows you to remove the </span><b>Add-To-Cart button</b><span style="font-weight: 400;"> and </span><b>Product Quantity</b><span style="font-weight: 400;"> from the related products.</span></p>
<p><span style="font-weight: 400;">Here’s how it appears on the front end.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/46-variation-master.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22417 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/46-variation-master.png" alt="general setting 26" width="1188" height="1410" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/46-variation-master.png 1188w, https://docs.wpswings.com/wp-content/uploads/2022/02/46-variation-master-253x300.png 253w, https://docs.wpswings.com/wp-content/uploads/2022/02/46-variation-master-863x1024.png 863w, https://docs.wpswings.com/wp-content/uploads/2022/02/46-variation-master-768x912.png 768w" sizes="auto, (max-width: 1188px) 100vw, 1188px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-single-attribute-on-shop-page_wrap"><div class="documentor-section  section-3667" id="show-single-attribute-on-shop-page" data-section-id="3667"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.15.</span>Show Single Attribute On Shop Page  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-single-attribute-on-shop-page')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This setting allows you to show a single attribute on the shop page rather than displaying all swatches attributes and change the variation image on the hover of attributes.</span></p>
<p><span style="font-weight: 400;">After the implementation, this is how it looks.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/48-variation-master-5.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-22422 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/48-variation-master-5.png" alt="general setting 30" width="866" height="582" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/48-variation-master-5.png 866w, https://docs.wpswings.com/wp-content/uploads/2022/02/48-variation-master-5-300x202.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/48-variation-master-5-768x516.png 768w" sizes="auto, (max-width: 866px) 100vw, 866px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="cross-variation-setting_wrap"><div class="documentor-section  section-1641" id="cross-variation-setting" data-section-id="1641"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.16.</span>Cross Variation Setting <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#cross-variation-setting')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p>This plugin provides an option to show the cross mark on unavailable variation. <strong>For example,</strong> you can see the variety of blue colors are not available with the medium size then display the cross sign on that variation.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-17.png"><img loading="lazy" decoding="async" class="alignnone wp-image-11864 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-17.png" alt="variation-master" width="936" height="822" srcset="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-17.png 936w, https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-17-300x263.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-17-768x674.png 768w" sizes="auto, (max-width: 936px) 100vw, 936px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="number-of-variations-you-want-to-create-on-one-request_wrap"><div class="documentor-section  section-3665" id="number-of-variations-you-want-to-create-on-one-request" data-section-id="3665"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.17.</span> Number of Variations You Want to Create on One Request <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#number-of-variations-you-want-to-create-on-one-request')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><h3><strong><span style="font-weight: 400;">4.17. Number of Variations You Want to Create on One Request </span></strong></h3>
<p>This setting enables you to increase/decrease the number of batch counts for variation creation with available product attributes. By default, it is 50.</p>
<p>Follow these steps to edit the batch count number:</p>
<ul>
<li style="list-style-type: none;">
<ul>
<li style="font-weight: 400;" aria-level="1">Go to<strong> Variation Master &gt; Global Settings &gt; Number of Variations</strong> You Want to <strong>Create on One Request .</strong></li>
<li style="font-weight: 400;" aria-level="1">Enter the number of variations .</li>
</ul>
</li>
</ul>
<ul>
<li aria-level="1">Click on <strong>Save Changes.</strong></li>
</ul>
<p>To see the change you have made, go to edit or create any variation product. Navigate to the WooCommerce variations tab in the product data section.<br /><b></b></p>
<p><span style="font-weight: 400;">Click on the </span><b>Add Variation</b><span style="font-weight: 400;"> dropdown and select </span><b>Create Variations for All Attributes.</b></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/46-create-variation-attributes.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-23545 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/46-create-variation-attributes.png" alt="create variation attributes" width="1313" height="796" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/46-create-variation-attributes.png 1313w, https://docs.wpswings.com/wp-content/uploads/2022/02/46-create-variation-attributes-300x182.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/46-create-variation-attributes-1024x621.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/46-create-variation-attributes-768x466.png 768w" sizes="auto, (max-width: 1313px) 100vw, 1313px" /></a></p>
<p>A notification will appear reminding you of the number of variations that can be created.</p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/47-variations-batch.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-23546 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/47-variations-batch.png" alt="variations batch" width="660" height="246" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/47-variations-batch.png 660w, https://docs.wpswings.com/wp-content/uploads/2022/02/47-variations-batch-300x112.png 300w" sizes="auto, (max-width: 660px) 100vw, 660px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-stock-alert-for-variations-on-a-single-page_wrap"><div class="documentor-section  section-3666" id="show-stock-alert-for-variations-on-a-single-page" data-section-id="3666"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.18.</span>Show Stock Alert for Variations on a Single Page <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-stock-alert-for-variations-on-a-single-page')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p>Enable this toggle button to show a stock alert for variations on a single page. You can add a custom message for a stock alert in the textbox and set a minimum stock quality to trigger the alert.</p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/44-show-stock-alert.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-23543 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/44-show-stock-alert.png" alt="show stock alert" width="1673" height="723" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/44-show-stock-alert.png 1673w, https://docs.wpswings.com/wp-content/uploads/2022/02/44-show-stock-alert-300x130.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/44-show-stock-alert-1024x443.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/44-show-stock-alert-768x332.png 768w, https://docs.wpswings.com/wp-content/uploads/2022/02/44-show-stock-alert-1536x664.png 1536w" sizes="auto, (max-width: 1673px) 100vw, 1673px" /></a></p>
<p>Here is how the stock alert appears on the front end.</p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/02/45-stock-alert-on-single-page.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-23544 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/02/45-stock-alert-on-single-page.png" alt="stock alert on single page" width="1388" height="798" srcset="https://docs.wpswings.com/wp-content/uploads/2022/02/45-stock-alert-on-single-page.png 1388w, https://docs.wpswings.com/wp-content/uploads/2022/02/45-stock-alert-on-single-page-300x172.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/02/45-stock-alert-on-single-page-1024x589.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/02/45-stock-alert-on-single-page-768x442.png 768w" sizes="auto, (max-width: 1388px) 100vw, 1388px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="variation-gallery-2_wrap"><div class="documentor-section  section-1639" id="variation-gallery-2" data-section-id="1639"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">5.</span>WooCommerce Variation Gallery <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#variation-gallery-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Variation swatches for Gallery: </strong>Here we are providing two different layouts of the product variation gallery.</p>
<ul>
<li>Gallery at Bottom</li>
<li>Gallary in Right Side</li>
</ul>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/11/7.png"><img loading="lazy" decoding="async" class="alignnone wp-image-11851 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/11/7.png" alt="" width="1191" height="567" srcset="https://docs.wpswings.com/wp-content/uploads/2019/11/7.png 1191w, https://docs.wpswings.com/wp-content/uploads/2019/11/7-300x143.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/11/7-768x366.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/11/7-1024x487.png 1024w" sizes="auto, (max-width: 1191px) 100vw, 1191px" /></a></div>
<p>To set the variation gallery goto the edit page of a particular product click on <strong>variations</strong> &gt; <strong>add variation gallery images.</strong> Here you can add the multiple images of your variable product and last click on the Save Changes button.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/11/9.png"><img loading="lazy" decoding="async" class="alignnone wp-image-11849 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/11/9.png" alt="" width="905" height="993" srcset="https://docs.wpswings.com/wp-content/uploads/2019/11/9.png 905w, https://docs.wpswings.com/wp-content/uploads/2019/11/9-273x300.png 273w, https://docs.wpswings.com/wp-content/uploads/2019/11/9-768x843.png 768w" sizes="auto, (max-width: 905px) 100vw, 905px" /></a></div>
<p><span style="font-weight: 400;">Finally, go to the ‘</span><b>Global Setting</b><span style="font-weight: 400;">’ of the plugin and enable the ‘</span><b>Variation Wise Gallery</b><span style="font-weight: 400;">’ setting and the ‘</span><b>Slider on Variation Featured Image</b><span style="font-weight: 400;">’ setting of the plugin. And click on the ‘</span><b>Save Setting</b><span style="font-weight: 400;">’ button.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-1.png"><img loading="lazy" decoding="async" class="alignnone" src="https://docs.wpswings.com/wp-content/uploads/2019/11/variation-master-1.png" alt="variation-master" width="1146" height="899" /></a></div>
<p>After successfully enable the settings, you can see the product variation gallery in a selected layout.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/11/8.png"><img loading="lazy" decoding="async" class="alignnone wp-image-11850 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/11/8.png" alt="" width="1054" height="574" srcset="https://docs.wpswings.com/wp-content/uploads/2019/11/8.png 1054w, https://docs.wpswings.com/wp-content/uploads/2019/11/8-300x163.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/11/8-768x418.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/11/8-1024x558.png 1024w" sizes="auto, (max-width: 1054px) 100vw, 1054px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="advance-settings-2_wrap"><div class="documentor-section  section-3805" id="advance-settings-2" data-section-id="3805"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.</span>Advance Settings  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#advance-settings-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The advanced settings, include the social sharing setting that allows the merchants to enable the social share buttons for social media platforms like Facebook, Gmail, Twitter, and Whatsapp for customers to share variable product details on social sites.</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/03/frontend-for-2.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-29720 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/03/frontend-for-2.png" alt="advanced settings" width="1202" height="903" srcset="https://docs.wpswings.com/wp-content/uploads/2023/03/frontend-for-2.png 1202w, https://docs.wpswings.com/wp-content/uploads/2023/03/frontend-for-2-300x225.png 300w, https://docs.wpswings.com/wp-content/uploads/2023/03/frontend-for-2-1024x769.png 1024w, https://docs.wpswings.com/wp-content/uploads/2023/03/frontend-for-2-768x577.png 768w, https://docs.wpswings.com/wp-content/uploads/2023/03/frontend-for-2-702x526.png 702w" sizes="auto, (max-width: 1202px) 100vw, 1202px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-social-sharing-settings_wrap"><div class="documentor-section  section-3806" id="enable-social-sharing-settings" data-section-id="3806"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.1.</span>Enable Social Sharing Settings  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-social-sharing-settings')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The admin/ user can enable this settings if he wants to make the social sharing icons visible on the product page.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="select-social-share-name-here_wrap"><div class="documentor-section  section-3807" id="select-social-share-name-here" data-section-id="3807"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.2.</span>Select Social Share Name Here <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#select-social-share-name-here')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">With this setting, the admin can select the social media platforms which he wants to show on the platform for sharing purposes. Social media platforms like Facebook, Gmail, Twitter, and Whatsapp. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-to-set-variation-swatches-text-font-size_wrap"><div class="documentor-section  section-3826" id="enable-to-set-variation-swatches-text-font-size" data-section-id="3826"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.3.</span>Enable to Set Variation Swatches Text Font Size  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-to-set-variation-swatches-text-font-size')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">With the </span><span style="font-weight: 400;">WooCommerce Variations</span><span style="font-weight: 400;"> plugin, the admin can also enable this setting if he/she wants to control the swatches&#8217; text font size on the single/ shop page. You can disable this setting if you want to go ahead with the default settings. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="swatches-font-size_wrap"><div class="documentor-section  section-3827" id="swatches-font-size" data-section-id="3827"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.4.</span>Swatches Font Size <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#swatches-font-size')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">WooCommerce product variation</span><span style="font-weight: 400;"> also enables the admin the enter the exact font size for the text, which will be shown over the swatches on the single/shop page. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="set-the-background-color-of-the-alert-message-for-woocomerce-variations_wrap"><div class="documentor-section  section-4861" id="set-the-background-color-of-the-alert-message-for-woocomerce-variations" data-section-id="4861"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.5.</span>Set the background color of the Alert message For WooComerce Variations  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#set-the-background-color-of-the-alert-message-for-woocomerce-variations')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The admin can set the background color of the alert message (available variation alert) WooCommerce Variations that he has already set. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="set-the-text-color-of-the-alert-message_wrap"><div class="documentor-section  section-4862" id="set-the-text-color-of-the-alert-message" data-section-id="4862"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.6.</span>Set the text color of the Alert message <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#set-the-text-color-of-the-alert-message')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The admin can also set the text color for the alert message (available variation alert) that he has already set for WooCommerce variations. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="set-the-background-color-of-the-alert-message_wrap"><div class="documentor-section  section-4863" id="set-the-background-color-of-the-alert-message" data-section-id="4863"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.7.</span>Set the background color of the Alert message <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#set-the-background-color-of-the-alert-message')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The admin can set the background color of the alert message (out-of-stock alert) WooCommerce Variations that he has already set. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="set-the-text-color-of-the-alert-message-2_wrap"><div class="documentor-section  section-4864" id="set-the-text-color-of-the-alert-message-2" data-section-id="4864"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.8.</span>Set the text color of the Alert message <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#set-the-text-color-of-the-alert-message-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The admin can also set the text color for the alert message (out-of-stock alert) that he has already set for WooCommerce variations. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-bestseller-highlight_wrap"><div class="documentor-section  section-4865" id="enable-bestseller-highlight" data-section-id="4865"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.9.</span>Enable Bestseller Highlight <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-bestseller-highlight')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This is the functionality of WooCommerce variation master, which allows you to assign badges to any product attribute.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="choose-terms_wrap"><div class="documentor-section  section-4866" id="choose-terms" data-section-id="4866"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.10.</span>Choose Terms <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#choose-terms')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This settings allows you to choose terms or products which you want to showcase. For example, suppose your red, medium-sized T-shirt is a bestseller (something that customers usually like purchasing). In that case, you can easily configure the settings to display a “Bestseller” badge on red color medium-sized T-shirt options. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enter-badge-tag-name_wrap"><div class="documentor-section  section-4867" id="enter-badge-tag-name" data-section-id="4867"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.11.</span>Enter Badge/ Tag Name <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enter-badge-tag-name')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This settings allows the admin to change the name of badge, that will show on selected variation items. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="select-badge-background-colour_wrap"><div class="documentor-section  section-4868" id="select-badge-background-colour" data-section-id="4868"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.12.</span>Select Badge Background Colour <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#select-badge-background-colour')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This settings allows admins to change the background color of badges that showcases the bestseller variations. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="choose-badge-font-colour_wrap"><div class="documentor-section  section-4869" id="choose-badge-font-colour" data-section-id="4869"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.13.</span>Choose Badge Font Colour <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#choose-badge-font-colour')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The admins can choose the font color for the badge that they want to display. </span></p>
<p><span style="font-weight: 400;">Frontend Representation Of This Feature,</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2025/08/frontend-representation.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-29376 size-full" src="https://docs.wpswings.com/wp-content/uploads/2025/08/frontend-representation.png" alt="Choose Badge Font Color" width="1071" height="941" srcset="https://docs.wpswings.com/wp-content/uploads/2025/08/frontend-representation.png 1071w, https://docs.wpswings.com/wp-content/uploads/2025/08/frontend-representation-300x264.png 300w, https://docs.wpswings.com/wp-content/uploads/2025/08/frontend-representation-1024x900.png 1024w, https://docs.wpswings.com/wp-content/uploads/2025/08/frontend-representation-768x675.png 768w" sizes="auto, (max-width: 1071px) 100vw, 1071px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-price-and-stock-information-on-hover_wrap"><div class="documentor-section  section-4967" id="show-price-and-stock-information-on-hover" data-section-id="4967"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.14.</span>Show Price And Stock Information On Hover <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-price-and-stock-information-on-hover')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">By enabling this setting, the admin can display the price and the stock on hovering over the variations. </span></p>
<p><span style="font-weight: 400;">Frontend Representation &#8211;</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-29723 size-full" src="https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1.png" alt="frontend for preview price and stock on hover" width="726" height="532" srcset="https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1.png 726w, https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1-300x220.png 300w" sizes="auto, (max-width: 726px) 100vw, 726px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="helpful-resources-12_wrap"><div class="documentor-section  section-3838" id="helpful-resources-12" data-section-id="3838"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.</span>Helpful Resources!! <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#helpful-resources-12')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><ul>
<li><a href="https://wpswings.com/blog/woocommerce-product-variations/?utm_source=wpswings-productvariations-blog&amp;utm_medium=vm-cc-doc&amp;utm_campaign=product-variations">6 Ways To Enhance Your Customers’ Experience With WooCommerce Product Variation</a></li>
</ul>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--></div><!--.doc-sec-container--><div id="sugestedit_popup218" class="sugestedit_popup">
				<a class="modal_close"></a>
				<form name="documentor-suggestform" method="post" class="documentor-suggestform">
					<div class="doc-frmdiv" style="font-weight: bold;">Suggest Edit
					</div>
					<div class="doc-frmdiv">
						<input type="text" name="sec_title" class="sedit-sectitle txtinput" value="" />
					</div><div class="doc-frmdiv">
							<input type="text" name="name" class="txtinput" placeholder="Name" required />
						</div><div class="doc-frmdiv">
							<input type="email" class="emailinput" placeholder="Email" name="email" required /> 
						</div><div class="doc-frmdiv">
							<textarea name="content" class="textareainput" placeholder="Post your suggestion..." required></textarea>
						</div><div class="doc-frmdiv"><label> Captcha :&nbsp; </label><span class="doc-sedit-captcha"></span></div><input type="hidden" class="sedit-secid" name="secid" value="" />
					<input type="hidden" class="sedit-postid" name="sedit_postid" value="" />
					<input type="hidden" class="sedit-docid" name="docid" value="218" />
					<button class="docsubmit-suggestform"> Submit </button>
				</form>
			</div><script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery("#documentor-218").documentor({
					documentid	: 218,
					docid		: "documentor-218",
					animation	: "",
					indexformat	: "1",
					pformat		: "decimal",
					cformat		: "decimal",					
					secstyle	: "clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;",
					actnavbg_default: "1",
					actnavbg_color	: "#f3b869",
					enable_ajax	: "0",
					scrolling	: "1",
					fixmenu		: "1",
					skin		: "mint",
					scrollBarSize	: "8",
					scrollBarColor	: "#ffffff",
					scrollBarOpacity: "0.5",
					windowprint	: "0",
					menuTop: "20",
					socialshare	: 0,
					sharecount	: 1,
					fbshare		: 1,
					twittershare	: 1,
					gplusshare	: 1,
					pinshare	: 1,
					togglechild	: 1,
					noResultsStr: "No results found!",
				});	
			});</script></div><!--/.document-wrapper--></div><div class="cleardiv"> </div><div id="documentor-218-end"></div>
<p>The post <a href="https://docs.wpswings.com/woocommerce-variation-masters/">WooCommerce Variation Master</a> appeared first on <a href="https://docs.wpswings.com">WP Swings Documentation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://docs.wpswings.com/woocommerce-variation-masters/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WooCommerce Colors &#038; Swatches for Variations</title>
		<link>https://docs.wpswings.com/woocommerce-colors-and-swatches-for-variations/</link>
					<comments>https://docs.wpswings.com/woocommerce-colors-and-swatches-for-variations/#respond</comments>
		
		<dc:creator><![CDATA[sanjeev maurya]]></dc:creator>
		<pubDate>Tue, 15 May 2018 13:20:41 +0000</pubDate>
				<category><![CDATA[Codecanyon]]></category>
		<category><![CDATA[WooCommerce / WordPress]]></category>
		<category><![CDATA[variable product]]></category>
		<category><![CDATA[variation update in cart]]></category>
		<category><![CDATA[woocommerce]]></category>
		<category><![CDATA[woocommerce add to cart variation]]></category>
		<category><![CDATA[woocommerce multiple product variations]]></category>
		<category><![CDATA[woocommerce price variations plugin]]></category>
		<category><![CDATA[woocommerce product variations plugin]]></category>
		<category><![CDATA[woocommerce swatches]]></category>
		<guid isPermaLink="false">http://docs.makewebbetter.com/?p=3138</guid>

					<description><![CDATA[<p>The post <a href="https://docs.wpswings.com/woocommerce-colors-and-swatches-for-variations/">WooCommerce Colors &#038; Swatches for Variations</a> appeared first on <a href="https://docs.wpswings.com">WP Swings Documentation</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="documentor-208" class="documentor-mint documentor-wrap" data-docid = "208" ><div class="documentor-topicons doc-noprint"><span class="doc-topiconswrap"></span><div class="cleardiv"></div><div class="clrright"></div></div><div class="document-wrapper"><div class="ddd doc-menu toggle doc-noprint" style="position: static;"><span class="doc-search">
					<input type="text" name="search_document" class="search-document" placeholder="Search" />
					<img decoding="async" src="https://docs.wpswings.com/wp-content/plugins/documentor/skins/mint/images/search.png" alt="search_image"/>
				</span><div class="doc-menurelated"><ol class="doc-list-front"><li class="doc-actli"><a class="documentor-menu " href="#overview-151"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#overview-151" data-sec-counter="1" data-section-id="1267">Overview</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#installation-114"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#installation-114" data-sec-counter="2" data-section-id="1268">Installation</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#general-setting-of-the-plugin"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#general-setting-of-the-plugin" data-sec-counter="3" data-section-id="1269">General Setting </a><span class="doc-mtoggle expand"></span><div class="doc-menu-border"></div><div class="doc-menu-border"></div><ol><li class="doc-actli"><a class="documentor-menu " href="#enable-swatches"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-swatches" data-sec-counter="3.1" data-section-id="3638">Enable Swatches</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-swatches-in-shop-archive-category-page"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-swatches-in-shop-archive-category-page" data-sec-counter="3.2" data-section-id="1272">Show Swatches in Shop/Archive/Category Page</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#display-show-variations-hide-variation-button"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#display-show-variations-hide-variation-button" data-sec-counter="3.3" data-section-id="1273">Display Show/Hide Variation Button</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#use-attributes-terms-thumbnails"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#use-attributes-terms-thumbnails" data-sec-counter="3.4" data-section-id="3639">Use Attributes Terms Thumbnails</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-attribute-term-label"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-attribute-term-label" data-sec-counter="3.5" data-section-id="1275">Show Attribute Term Label</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#display-border-on-selected-swatch"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#display-border-on-selected-swatch" data-sec-counter="3.6" data-section-id="1274">Display Border on Selected Swatch</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#attribute-term-label"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#attribute-term-label" data-sec-counter="3.7" data-section-id="3640">Attribute Term Label</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#attributes-terms-thumbnails-display-type"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#attributes-terms-thumbnails-display-type" data-sec-counter="3.8" data-section-id="1276">Attributes Terms Thumbnails Display Type</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#attributes-terms-thumbnails-display-size"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#attributes-terms-thumbnails-display-size" data-sec-counter="3.9" data-section-id="1277">Attribute Terms Thumbnails Display Size for Product Detail Page</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#attributes-terms-thumbnails-display-type-for-shop-page"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#attributes-terms-thumbnails-display-type-for-shop-page" data-sec-counter="3.10" data-section-id="1278"> Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#use-global-size-everywhere"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#use-global-size-everywhere" data-sec-counter="3.11" data-section-id="1279">Use Global Size Everywhere</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#use-variation-featured-image"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#use-variation-featured-image" data-sec-counter="3.12" data-section-id="1280">Use Variation Featured Image</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#display-cross-on-out-of-stock-product-variations"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#display-cross-on-out-of-stock-product-variations" data-sec-counter="3.13" data-section-id="3641">Display Cross on Out-of-Stock Product Variations</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-tick-symbol-on-attribute-terms"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-tick-symbol-on-attribute-terms" data-sec-counter="3.14" data-section-id="3797">Show Tick Symbol on Attribute Terms</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li></ol></li><li class="doc-actli"><a class="documentor-menu " href="#display-type-of-variations"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#display-type-of-variations" data-sec-counter="4" data-section-id="1366">Three Different Display Types of Variations </a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#multi-colored-variation-swatches"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#multi-colored-variation-swatches" data-sec-counter="5" data-section-id="3874">Multi-Colored Variation Swatches</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#import-export-setting-5"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#import-export-setting-5" data-sec-counter="6" data-section-id="3642">Import/Export Setting </a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#advance-features-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#advance-features-2" data-sec-counter="7" data-section-id="3659">Advance Features</a><span class="doc-mtoggle expand"></span><div class="doc-menu-border"></div><div class="doc-menu-border"></div><ol><li class="doc-actli"><a class="documentor-menu " href="#product-variation-limiter"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#product-variation-limiter" data-sec-counter="7.1" data-section-id="3660">Product Variation Limiter</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#social-sharing-of-variable-product"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#social-sharing-of-variable-product" data-sec-counter="7.2" data-section-id="3661">Social Sharing of Variable Product</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#remove-reset-button"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#remove-reset-button" data-sec-counter="7.3" data-section-id="3760">Remove Reset Button</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#change-the-cross-color"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#change-the-cross-color" data-sec-counter="7.4" data-section-id="3761">Change the Cross Color</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-to-show-attribute-name-on-the-shop-page"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-to-show-attribute-name-on-the-shop-page" data-sec-counter="7.5" data-section-id="3803">Enable to Show attribute Name on the Shop Page</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-to-show-color-on-tooltip"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-to-show-color-on-tooltip" data-sec-counter="7.6" data-section-id="3804">Enable to Show Color on Tooltip</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enable-bestseller-highlight-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enable-bestseller-highlight-2" data-sec-counter="7.7" data-section-id="4870">Enable Bestseller Highlight</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#choose-terms-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#choose-terms-2" data-sec-counter="7.8" data-section-id="4871">Choose Terms</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#enter-badge-tag-name-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#enter-badge-tag-name-2" data-sec-counter="7.9" data-section-id="4872"> Enter Badge/Tag Name</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#select-badge-background-color"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#select-badge-background-color" data-sec-counter="7.10" data-section-id="4873">Select Badge Background Color</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#choose-badge-font-color"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#choose-badge-font-color" data-sec-counter="7.11" data-section-id="4874">Choose Badge Font Color</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#show-price-and-stock-information-on-hover-2"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#show-price-and-stock-information-on-hover-2" data-sec-counter="7.12" data-section-id="4968">Show Price And Stock Information On Hover</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li></ol></li><li class="doc-actli"><a class="documentor-menu " href="#global-setting-of-the-product"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#global-setting-of-the-product" data-sec-counter="8" data-section-id="1270">Global Setting of the Product </a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#per-product-setting"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#per-product-setting" data-sec-counter="9" data-section-id="1271">Per Product Setting</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#woocommerce-colors-and-swatches-compatibility"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#woocommerce-colors-and-swatches-compatibility" data-sec-counter="10" data-section-id="3821">WooCommerce Colors and Swatches Compatibility</a><span class="doc-mtoggle expand"></span><div class="doc-menu-border"></div><div class="doc-menu-border"></div><ol><li class="doc-actli"><a class="documentor-menu " href="#compatibility-with-elementor-pro"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#compatibility-with-elementor-pro" data-sec-counter="10.1" data-section-id="3822">Compatibility With Elementor Pro</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#compatibility-with-popular-themes"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#compatibility-with-popular-themes" data-sec-counter="10.2" data-section-id="3823">Compatibility With Popular Themes</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li></ol></li><li class="doc-actli"><a class="documentor-menu " href="#faqs-125"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#faqs-125" data-sec-counter="11" data-section-id="3497">FAQs</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li><li class="doc-actli"><a class="documentor-menu " href="#helpful-resources-8"  style="clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;" data-href="#helpful-resources-8" data-sec-counter="12" data-section-id="3834">Helpful Resources !!</a><div class="doc-menu-border"></div><div class="doc-menu-border"></div></li></ol></div></div><div class="doc-sec-container" id="documentor_seccontainer"><div class="doc-sectionwrap " id="overview-151_wrap"><div class="documentor-section  section-1267" id="overview-151" data-section-id="1267"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">1.</span>Overview <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#overview-151')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><a href="https://codecanyon.net/item/woocommerce-colors-and-swatches-for-variations/21088754" target="blank" rel="noopener noreferrer nofollow">WooCommerce Colors and Swatches for Variations </a><span style="font-weight: 400;">plugin allows you to display product variations seamlessly with WooCommerce texts, images, and color swatches. It helps you select the style for each variable product attribute, such as color, size, variety, or quantity</span><span style="font-weight: 400;">. </span><span style="font-weight: 400;">Shoppers appreciate visual representations of product attributes when using your store as it gives a professional and clean look. WooCommerce Color and Swatches plugin organizes your product display and edges out the competition</span></p>
<p><iframe loading="lazy" title="YouTube video player" src="https://www.youtube.com/embed/e7q6badzrjk?rel=0&amp;showinfo=0" width="868" height="488" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<h3><strong>Features:</strong></h3>
<ul>
<li aria-level="1"><span style="font-weight: 400;">Add multi-colored variation swatches for variable products.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Compatible with themes:  </span><b>Avada, OceanWP, Flatsome, and Divi.</b></li>
<li aria-level="1"><span style="font-weight: 400;">Use Elementor Pro to build WooCommerce product swatches</span></li>
<li><span style="font-weight: 400;">Show WooCommerce Variation Swatches on Shop, Archive, and Categories Pages.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Enable social sharing for buttons for variable products. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Show a tick mark on selected WooCommerce variation swatches. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Display cross for out-of-stock product variations. Also, you can customize the cross color. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Hide the reset variation button from the shop and product page. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Allow social sharing of variable products. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Show variation thumbnail in the tooltip view on the Catalog/Archive page. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Display all WooCommerce variations of variable products. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Adding Variable products to the cart from Shop, Archive, and Categories Pages.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">You can add color </span><span style="font-weight: 400;">and image swatches for attributes.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">You can add color </span><span style="font-weight: 400;">and image swatches for each variation of the custom attribute.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">You can use</span><span style="font-weight: 400;"> both select and color and image swatch combinations.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Add a border on selected swatches.</span></li>
</ul>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="installation-114_wrap"><div class="documentor-section  section-1268" id="installation-114" data-section-id="1268"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">2.</span>Installation <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#installation-114')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p class="western">WordPress Provides two types of installation methods.<br />
<b>1. Automatic Installation:</b></p>
<p class="western">Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser.</p>
<p class="western"><strong>Steps are as follows :</strong></p>
<ul>
<li class="western">Download the zip folder of the plugin <strong>WooCommerce Colors and Swatches for Variations</strong>.</li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Once downloaded, install the plugin by browsing and activating it.</span></li>
</ul>
<p class="western"><strong>2. Manual Installation:</strong></p>
<p class="western">Manual installation of the plugin is another option to install the plugin to your WordPress-environment. The manual installation method involves downloading our <strong>WooCommerce Colors and Swatches for Variations</strong> Extension and uploading it to your web server via your favorite FTP application.</p>
<p class="western"><strong>Steps are as follows :</strong></p>
<ul>
<li class="western">Upload the <strong>WooCommerce Colors and Swatches for Variations</strong> folder to the /wp-content/plugins/ directory.</li>
<li class="western">Activate the plugin through the ‘Plugins’ menu in WordPress.</li>
</ul>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="general-setting-of-the-plugin_wrap"><div class="documentor-section  section-1269" id="general-setting-of-the-plugin" data-section-id="1269"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.</span>General Setting of the Plugin <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#general-setting-of-the-plugin')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The Global Settings tab will help you apply changes to all </span><span style="font-weight: 400;">product variation</span><span style="font-weight: 400;"> swatches. It will only work if you don’t select the per-product setting. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/1_preview1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24300 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/1_preview1.png" alt="" width="1681" height="1219" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/1_preview1.png 1681w, https://docs.wpswings.com/wp-content/uploads/2019/03/1_preview1-300x218.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/1_preview1-1024x743.png 1024w, https://docs.wpswings.com/wp-content/uploads/2019/03/1_preview1-768x557.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/1_preview1-1536x1114.png 1536w" sizes="auto, (max-width: 1681px) 100vw, 1681px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-swatches_wrap"><div class="documentor-section  section-3638" id="enable-swatches" data-section-id="3638"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.1.</span>Enable Swatches <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-swatches')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this feature to use the </span><span style="font-weight: 400;">Variation Swatches for WooCommerce</span><span style="font-weight: 400;"> plugin.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-swatches-in-shop-archive-category-page_wrap"><div class="documentor-section  section-1272" id="show-swatches-in-shop-archive-category-page" data-section-id="1272"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.2.</span>Show Swatches in Shop/Archive/Category Page <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-swatches-in-shop-archive-category-page')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Show Swatches in Shop/Archive/Category Page: </strong><span style="font-weight: 400;">Enable this feature to display </span><span style="font-weight: 400;">Variation Swatches</span><span style="font-weight: 400;"> on Shop/Archive/Category pages. </span><span style="font-weight: 400;">Now, here you can see the </span><span style="font-weight: 400;">variation swatches</span><span style="font-weight: 400;"> on the shop page.</span></p>
<div class="mwb-docs-product-images"><img loading="lazy" decoding="async" class="alignnone wp-image-23570 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/2-woocommerce-color-and-swatches-variations.png" alt="" width="913" height="758" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/2-woocommerce-color-and-swatches-variations.png 913w, https://docs.wpswings.com/wp-content/uploads/2019/03/2-woocommerce-color-and-swatches-variations-300x249.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/2-woocommerce-color-and-swatches-variations-768x638.png 768w" sizes="auto, (max-width: 913px) 100vw, 913px" /></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="display-show-variations-hide-variation-button_wrap"><div class="documentor-section  section-1273" id="display-show-variations-hide-variation-button" data-section-id="1273"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.3.</span>Display Show/Hide Variation Button <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#display-show-variations-hide-variation-button')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Display Show Variations Button and Hide Swatches in Shop/Archive/Category Page: </strong><span style="font-weight: 400;">Click on the ‘Show Variation Button‘ and ‘Hide Swatches Button On Shop/Archive/Category pages’ toggle buttons. </span><span style="font-weight: 400;">After enabling this feature, you can see the Hide and Show Variations Buttons on the shop page.</span></p>
<div class="mwb-docs-product-images"><img loading="lazy" decoding="async" class="alignnone wp-image-23572 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/3-woocommerce-color-and-swatches.png" alt="" width="903" height="807" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/3-woocommerce-color-and-swatches.png 903w, https://docs.wpswings.com/wp-content/uploads/2019/03/3-woocommerce-color-and-swatches-300x268.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/3-woocommerce-color-and-swatches-768x686.png 768w" sizes="auto, (max-width: 903px) 100vw, 903px" /></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="use-attributes-terms-thumbnails_wrap"><div class="documentor-section  section-3639" id="use-attributes-terms-thumbnails" data-section-id="3639"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.4.</span>Use Attributes Terms Thumbnails <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#use-attributes-terms-thumbnails')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Click on this toggle button to use attribute terms for thumbnails.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-attribute-term-label_wrap"><div class="documentor-section  section-1275" id="show-attribute-term-label" data-section-id="1275"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.5.</span>Show Attribute Term Label <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-attribute-term-label')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Show Attribute Term Label: <span style="font-weight: 400;">Variation in colors, texts, &amp; images can be denoted with their attribute terms on the shop and product page</span></strong><span style="font-weight: 400;">.</span><span style="font-weight: 400;"> Enable this feature to show the attribute text Above Swatches, Over Swatches, or as Tool-Tip. You can also show an image or text as a tooltip label. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/4_preview4.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24301 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/4_preview4.png" alt="" width="1698" height="716" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/4_preview4.png 1698w, https://docs.wpswings.com/wp-content/uploads/2019/03/4_preview4-300x127.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/4_preview4-1024x432.png 1024w, https://docs.wpswings.com/wp-content/uploads/2019/03/4_preview4-768x324.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/4_preview4-1536x648.png 1536w" sizes="auto, (max-width: 1698px) 100vw, 1698px" /></a></div>
<p>Here you can see the attribute text as a tool-tip.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-6.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9360 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-6.png" alt="woocommerce-color-and-swatches" width="933" height="614" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-6.png 933w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-6-300x197.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-6-768x505.png 768w" sizes="auto, (max-width: 933px) 100vw, 933px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="display-border-on-selected-swatch_wrap"><div class="documentor-section  section-1274" id="display-border-on-selected-swatch" data-section-id="1274"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.6.</span>Display Border on Selected Swatch <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#display-border-on-selected-swatch')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Display border on selected swatch: </strong><span style="font-weight: 400;">Enable the toggle button to show the border on the selected </span><span style="font-weight: 400;">product variation swatches.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-8.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9363 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-8.png" alt="woocommerce-color-and-swatches" width="888" height="761" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-8.png 888w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-8-300x257.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-8-768x658.png 768w" sizes="auto, (max-width: 888px) 100vw, 888px" /></a></div>
<div>Here you can see the border on the selected swatches.</div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="attribute-term-label_wrap"><div class="documentor-section  section-3640" id="attribute-term-label" data-section-id="3640"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.7.</span>Attribute Term Label <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#attribute-term-label')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Enable this setting to display attribute text above/over swatches or as a tooltip.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="attributes-terms-thumbnails-display-type_wrap"><div class="documentor-section  section-1276" id="attributes-terms-thumbnails-display-type" data-section-id="1276"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.8.</span>Attributes Terms Thumbnails Display Type <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#attributes-terms-thumbnails-display-type')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Attribute Terms Thumbnails Display Type: </strong><span style="font-weight: 400;">Set the size and display type of </span><span style="font-weight: 400;">variation attribute</span><span style="font-weight: 400;"> terms thumbnails. There are three types of display types: Circle, Square, and Rectangle.</span></p>
<p><span style="font-weight: 400;">On the front-end, you can see the attribute terms thumbnails are square.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-10.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9366 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-10.png" alt="woocommerce-color-and-swatches" width="898" height="755" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-10.png 898w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-10-300x252.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-10-768x646.png 768w" sizes="auto, (max-width: 898px) 100vw, 898px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="attributes-terms-thumbnails-display-size_wrap"><div class="documentor-section  section-1277" id="attributes-terms-thumbnails-display-size" data-section-id="1277"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.9.</span>Attribute Terms Thumbnails Display Size for Product Detail Page <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#attributes-terms-thumbnails-display-size')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Attribute Terms Thumbnails Display Size for Product Detail Page: <span style="font-weight: 400;">You can set</span></strong><span style="font-weight: 400;"> the size of attribute terms thumbnails for the product page. Click on the dropdown, to select different attribute term sizes. </span></p>
<p><span style="font-weight: 400;">The available sizes are: </span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">20px * 20px </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">40px * 40px</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">60px * 60px</span></li>
</ul>
<p><span style="font-weight: 400;">Select the ‘Other’ option to set a custom size for attribute terms thumbnails for </span><span style="font-weight: 400;">product variations. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="attributes-terms-thumbnails-display-type-for-shop-page_wrap"><div class="documentor-section  section-1278" id="attributes-terms-thumbnails-display-type-for-shop-page" data-section-id="1278"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.10.</span> Attribute Terms Thumbnails Display Type for Shop/Archive/Category Page <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#attributes-terms-thumbnails-display-type-for-shop-page')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Attribute Terms Thumbnails Display Size for Shop/Archive/Category Page: </strong><span style="font-weight: 400;">Using the dropdown, select the size of attribute terms thumbnails for the shop/archive/category page. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="use-global-size-everywhere_wrap"><div class="documentor-section  section-1279" id="use-global-size-everywhere" data-section-id="1279"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.11.</span>Use Global Size Everywhere <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#use-global-size-everywhere')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><strong>Use Global Size Everywhere: </strong><span style="font-weight: 400;">Turn on this feature to use the global size for all </span><span style="font-weight: 400;">WooCommerce swatches and labels</span><span style="font-weight: 400;">.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="use-variation-featured-image_wrap"><div class="documentor-section  section-1280" id="use-variation-featured-image" data-section-id="1280"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.12.</span>Use Variation Featured Image <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#use-variation-featured-image')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Click on this toggle to use the variations’ featured image as a swatch image for selection.</span></p>
<p><span style="font-weight: 400;">Go to the </span><b>Product Edit Page &gt; Variations</b><span style="font-weight: 400;"> and set the featured image for variation swatches. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-variations.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9381 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-variations.png" alt="woocommerce-color-and-swatches-global-setting-variations" width="870" height="421" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-variations.png 870w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-variations-300x145.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-variations-768x372.png 768w" sizes="auto, (max-width: 870px) 100vw, 870px" /></a></div>
<p><span style="font-weight: 400;">Go to </span><b>Variations</b><span style="font-weight: 400;">, </span><b>Add Variation</b><span style="font-weight: 400;">, and click on </span><b>Go</b><span style="font-weight: 400;">. Next, fill in all the required fields, and set a featured image</span><span style="font-weight: 400;">. Here, you can choose only those colors that were previously selected under the attribute section.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/08/woocommerce-color-and-swatches-for-variation-10.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9382 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-add-image.png" alt="woocommerce-color-and-swatches-global-setting-add-image" width="861" height="955" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-add-image.png 861w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-add-image-270x300.png 270w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-add-image-768x852.png 768w" sizes="auto, (max-width: 861px) 100vw, 861px" /></a></div>
<p><span style="font-weight: 400;">Then, enable the ‘Use Variation Feature image’ toggle. You can see the featured image as the color swatches. </span></p>
<p><span style="font-weight: 400;">And lastly, don’t forget to </span><span style="font-weight: 400;">click on “Save Changes</span><span style="font-weight: 400;">“.</span></p>
<p><span style="font-weight: 400;">On the product detail page, you can see the variation swatches as the featured images.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-image-swatches.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9380 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-image-swatches.png" alt="woocommerce-color-and-swatches-global-setting-image-swatches" width="674" height="694" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-image-swatches.png 674w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-global-setting-image-swatches-291x300.png 291w" sizes="auto, (max-width: 674px) 100vw, 674px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="display-cross-on-out-of-stock-product-variations_wrap"><div class="documentor-section  section-3641" id="display-cross-on-out-of-stock-product-variations" data-section-id="3641"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.13.</span>Display Cross on Out-of-Stock Product Variations <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#display-cross-on-out-of-stock-product-variations')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The </span><span style="font-weight: 400;">WooCommerce variations plugin</span><span style="font-weight: 400;"> automatically shows a cross sign over the swatches of out-of-stock product variations. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/07/12-cross-variation-image.png"><img loading="lazy" decoding="async" class="alignnone wp-image-23581 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/07/12-cross-variation-image.png" alt="" width="990" height="1279" srcset="https://docs.wpswings.com/wp-content/uploads/2022/07/12-cross-variation-image.png 990w, https://docs.wpswings.com/wp-content/uploads/2022/07/12-cross-variation-image-232x300.png 232w, https://docs.wpswings.com/wp-content/uploads/2022/07/12-cross-variation-image-793x1024.png 793w, https://docs.wpswings.com/wp-content/uploads/2022/07/12-cross-variation-image-768x992.png 768w" sizes="auto, (max-width: 990px) 100vw, 990px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-tick-symbol-on-attribute-terms_wrap"><div class="documentor-section  section-3797" id="show-tick-symbol-on-attribute-terms" data-section-id="3797"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">3.14.</span>Show Tick Symbol on Attribute Terms <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-tick-symbol-on-attribute-terms')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">You can display a tick symbol on the selected variation swatches and </span><span style="font-weight: 400;">provide clear visual detail to your customers during the purchase process. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/01/12-colors-and-swatches-tick-symbol.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24210 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/01/12-colors-and-swatches-tick-symbol.png" alt="" width="566" height="432" srcset="https://docs.wpswings.com/wp-content/uploads/2023/01/12-colors-and-swatches-tick-symbol.png 566w, https://docs.wpswings.com/wp-content/uploads/2023/01/12-colors-and-swatches-tick-symbol-300x229.png 300w" sizes="auto, (max-width: 566px) 100vw, 566px" /></a></div>
<div>
<p><b>Note:</b><span style="font-weight: 400;"> The border and tick mark on selected swatches can display at the same time. </span></p>
</div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="display-type-of-variations_wrap"><div class="documentor-section  section-1366" id="display-type-of-variations" data-section-id="1366"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">4.</span>Three Different Display Types of Variations  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#display-type-of-variations')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This </span><span style="font-weight: 400;">product variation plugin</span> provides three different display types to show variations of variable products.</p>
<p><strong>1. Display Type:</strong> Text</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-size-1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9941 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-size-1.png" alt="woocommerce-color-and-swatches-display-type-size" width="861" height="660" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-size-1.png 861w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-size-1-300x230.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-size-1-768x589.png 768w" sizes="auto, (max-width: 861px) 100vw, 861px" /></a></div>
<p>On the front end, you can see Text to show the variations of variable products.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-size.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9942 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-size.png" alt="woocommerce-color-and-swatches-size" width="1090" height="543" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-size.png 1090w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-size-300x149.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-size-768x383.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-size-1024x510.png 1024w" sizes="auto, (max-width: 1090px) 100vw, 1090px" /></a></div>
<p><strong>2. Display Type:</strong> Image</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-disolay-type-image.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9926 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-disolay-type-image.png" alt="woocommerce-color-and-swatches-disolay-type-image" width="859" height="661" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-disolay-type-image.png 859w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-disolay-type-image-300x231.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-disolay-type-image-768x591.png 768w" sizes="auto, (max-width: 859px) 100vw, 859px" /></a></div>
<p>On the front end, you can see Image to show the variations of variable products.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-image.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9931 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-image.png" alt="woocommerce-color-and-swatches-display-type-image" width="912" height="479" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-image.png 912w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-image-300x158.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-image-768x403.png 768w" sizes="auto, (max-width: 912px) 100vw, 912px" /></a></div>
<p><strong>3. Display Type:</strong> Color</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9929 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color.png" alt="woocommerce-color-and-swatches-display-type-color" width="860" height="661" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color.png 860w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color-300x231.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color-768x590.png 768w" sizes="auto, (max-width: 860px) 100vw, 860px" /></a></div>
<p><span style="font-weight: 400;">On the front end, the </span><span style="font-weight: 400;">selected color variation</span><span style="font-weight: 400;"> will be visible. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color-front.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9930 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color-front.png" alt="woocommerce-color-and-swatches-display-type-color-front" width="908" height="485" srcset="https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color-front.png 908w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color-front-300x160.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/05/woocommerce-color-and-swatches-display-type-color-front-768x410.png 768w" sizes="auto, (max-width: 908px) 100vw, 908px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="multi-colored-variation-swatches_wrap"><div class="documentor-section  section-3874" id="multi-colored-variation-swatches" data-section-id="3874"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">5.</span>Multi-Colored Variation Swatches <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#multi-colored-variation-swatches')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">WooCommerce Color Swatches allow you to show dual color swatches of product variants. It helps you show product variation with multiple color combinations. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/05/19-multi-colored-variation-swatches.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-24688 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/05/19-multi-colored-variation-swatches.png" alt="19 multi colored variation swatches" width="826" height="678" srcset="https://docs.wpswings.com/wp-content/uploads/2023/05/19-multi-colored-variation-swatches.png 826w, https://docs.wpswings.com/wp-content/uploads/2023/05/19-multi-colored-variation-swatches-300x246.png 300w, https://docs.wpswings.com/wp-content/uploads/2023/05/19-multi-colored-variation-swatches-768x630.png 768w" sizes="auto, (max-width: 826px) 100vw, 826px" /></a></p>
<p><span style="font-weight: 400;">Follow these steps to create dual-color swatches: </span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Go to </span><b>Product &gt;&gt; Add New.</b></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">In the &#8220;</span><b>Product Data</b><span style="font-weight: 400;">&#8221; section, choose the &#8220;</span><b>Variable Product</b><span style="font-weight: 400;">&#8221; option.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;"> Go to the “</span><b>Attributes</b><span style="font-weight: 400;">&#8221; tab and add your custom product attributes. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">In the &#8220;Name&#8221; field, enter the attribute name as color. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">In the &#8220;</span><b>Value(s)</b><span style="font-weight: 400;">&#8221; field, enter the color options such as </span><b>&#8220;Red,&#8221; &#8220;Blue,</b><span style="font-weight: 400;">&#8221; and &#8220;</span><b>Black</b><span style="font-weight: 400;">&#8220;. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Save your attributes. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">From the </span><b>Variations</b><span style="font-weight: 400;"> tab, select the &#8220;</span><b>Create Variations from All Attributes</b><span style="font-weight: 400;">&#8221; option and click on the Go button.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Go to the “</span><b>Variation Swatches</b><span style="font-weight: 400;">” tab and open the colored attribute terms. </span></li>
</ul>
<p><span style="font-weight: 400;">Select the </span><b>Display Type</b><span style="font-weight: 400;"> as </span><b>Multi Color.</b></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/05/20-daul-color-variation.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-24690 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/05/20-daul-color-variation.png" alt="20 daul color variation" width="1320" height="688" srcset="https://docs.wpswings.com/wp-content/uploads/2023/05/20-daul-color-variation.png 1320w, https://docs.wpswings.com/wp-content/uploads/2023/05/20-daul-color-variation-300x156.png 300w, https://docs.wpswings.com/wp-content/uploads/2023/05/20-daul-color-variation-1024x534.png 1024w, https://docs.wpswings.com/wp-content/uploads/2023/05/20-daul-color-variation-768x400.png 768w" sizes="auto, (max-width: 1320px) 100vw, 1320px" /></a></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Now, Select the color combination suitable for your multi-colored product variant. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Save your changes. </span></li>
</ul>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="import-export-setting-5_wrap"><div class="documentor-section  section-3642" id="import-export-setting-5" data-section-id="3642"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">6.</span>Import/Export Setting  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#import-export-setting-5')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/07/19-woocommerce-variation-import-setting.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24109 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/07/19-woocommerce-variation-import-setting.png" alt="" width="1690" height="554" srcset="https://docs.wpswings.com/wp-content/uploads/2022/07/19-woocommerce-variation-import-setting.png 1690w, https://docs.wpswings.com/wp-content/uploads/2022/07/19-woocommerce-variation-import-setting-300x98.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/07/19-woocommerce-variation-import-setting-1024x336.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/07/19-woocommerce-variation-import-setting-768x252.png 768w, https://docs.wpswings.com/wp-content/uploads/2022/07/19-woocommerce-variation-import-setting-1536x504.png 1536w" sizes="auto, (max-width: 1690px) 100vw, 1690px" /></a></p>
<p><span style="font-weight: 400;">The Import / Export tab allows you to download the existing product variation attributes in a CSV file. You can also create or edit the download file and upload it to load new product variation attributes. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="advance-features-2_wrap"><div class="documentor-section  section-3659" id="advance-features-2" data-section-id="3659"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.</span>Advance Features <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#advance-features-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The Advance Features tab contains functionalities to further improve the user experience of V</span><span style="font-weight: 400;">ariation Swatches for WooCommerce</span><span style="font-weight: 400;"> Customers and Increase your Brand Visibility. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/09/10_preview10.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24302 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/09/10_preview10.png" alt="" width="1083" height="1010" srcset="https://docs.wpswings.com/wp-content/uploads/2022/09/10_preview10.png 1083w, https://docs.wpswings.com/wp-content/uploads/2022/09/10_preview10-300x280.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/09/10_preview10-1024x955.png 1024w, https://docs.wpswings.com/wp-content/uploads/2022/09/10_preview10-768x716.png 768w" sizes="auto, (max-width: 1083px) 100vw, 1083px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="product-variation-limiter_wrap"><div class="documentor-section  section-3660" id="product-variation-limiter" data-section-id="3660"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.1.</span>Product Variation Limiter <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#product-variation-limiter')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">You can enable the variation limiter to reduce the number of variation swatches  that are displayed at first. Also, select the attribute and number of attribute swatches to display on the product page. </span></p>
<p><span style="font-weight: 400;">To do this, follow these steps: </span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on the </span><b>Enable Limiter</b><span style="font-weight: 400;"> toggle button. </span></li>
<li style="font-weight: 400;" aria-level="1"><b>Choose the Attribute</b><span style="font-weight: 400;"> that you want to display. You can only choose one.</span></li>
</ul>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/09/advanced-settings-colors-and-swatches.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-29725 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/09/advanced-settings-colors-and-swatches.png" alt="advanced settings colors and swatches" width="1190" height="1672" srcset="https://docs.wpswings.com/wp-content/uploads/2022/09/advanced-settings-colors-and-swatches.png 1190w, https://docs.wpswings.com/wp-content/uploads/2022/09/advanced-settings-colors-and-swatches-214x300.png 214w, https://docs.wpswings.com/wp-content/uploads/2022/09/advanced-settings-colors-and-swatches-729x1024.png 729w, https://docs.wpswings.com/wp-content/uploads/2022/09/advanced-settings-colors-and-swatches-768x1079.png 768w, https://docs.wpswings.com/wp-content/uploads/2022/09/advanced-settings-colors-and-swatches-1093x1536.png 1093w" sizes="auto, (max-width: 1190px) 100vw, 1190px" /></a></p>
<div>
<ul>
<li style="font-weight: 400;" aria-level="1"><b>Enter the Display Limit</b><span style="font-weight: 400;"> of the chosen attribute. If you choose 1, only one swatch will show. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">At last, save your changes. </span></li>
</ul>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/09/21-attribute-swatches-limiter.png"><img loading="lazy" decoding="async" class="alignnone wp-image-23767 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/09/21-attribute-swatches-limiter.png" alt="" width="919" height="718" srcset="https://docs.wpswings.com/wp-content/uploads/2022/09/21-attribute-swatches-limiter.png 919w, https://docs.wpswings.com/wp-content/uploads/2022/09/21-attribute-swatches-limiter-300x234.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/09/21-attribute-swatches-limiter-768x600.png 768w" sizes="auto, (max-width: 919px) 100vw, 919px" /></a></div>
</div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="social-sharing-of-variable-product_wrap"><div class="documentor-section  section-3661" id="social-sharing-of-variable-product" data-section-id="3661"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.2.</span>Social Sharing of Variable Product <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#social-sharing-of-variable-product')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">You can easily add social share buttons to the product pages and allows users to share your products. </span></p>
<div class="mwb-docs-product-images"><img loading="lazy" decoding="async" class="alignnone wp-image-24215 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/09/23-Social-sharing-buttons.png" alt="" width="846" height="596" srcset="https://docs.wpswings.com/wp-content/uploads/2022/09/23-Social-sharing-buttons.png 846w, https://docs.wpswings.com/wp-content/uploads/2022/09/23-Social-sharing-buttons-300x211.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/09/23-Social-sharing-buttons-768x541.png 768w" sizes="auto, (max-width: 846px) 100vw, 846px" /></div>
<div>
<p><span style="font-weight: 400;">To do this, follow these instructions: </span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on the</span><b> Enable Social Sharing Settings </b><span style="font-weight: 400;">toggle button. </span></li>
<li style="font-weight: 400;" aria-level="1">At last, click on the Save Changes button. Select from the following <b>Social Share Names</b>: <i>Facebook, Twitter, Gmail, Pinterest, and Whatsapp.</i></li>
</ul>
</div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="remove-reset-button_wrap"><div class="documentor-section  section-3760" id="remove-reset-button" data-section-id="3760"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.3.</span>Remove Reset Button <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#remove-reset-button')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">While selecting different WooCommerce product variations, customers can reset the swatches using the clear button. You can choose to remove the clear button from the shop and product page. </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/12/24-variation-swatches-on-shoppage.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24114 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/12/24-variation-swatches-on-shoppage.png" alt="" width="703" height="635" srcset="https://docs.wpswings.com/wp-content/uploads/2022/12/24-variation-swatches-on-shoppage.png 703w, https://docs.wpswings.com/wp-content/uploads/2022/12/24-variation-swatches-on-shoppage-300x271.png 300w" sizes="auto, (max-width: 703px) 100vw, 703px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="change-the-cross-color_wrap"><div class="documentor-section  section-3761" id="change-the-cross-color" data-section-id="3761"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.4.</span>Change the Cross Color <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#change-the-cross-color')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The colors &amp; swatches plugin shows a cross on unavailable or out-of-stock product variations. You can customize the color of that cross and keep it identical to your brand colors.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2022/12/image9-1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24305 size-full" src="https://docs.wpswings.com/wp-content/uploads/2022/12/image9-1.png" alt="" width="956" height="128" srcset="https://docs.wpswings.com/wp-content/uploads/2022/12/image9-1.png 956w, https://docs.wpswings.com/wp-content/uploads/2022/12/image9-1-300x40.png 300w, https://docs.wpswings.com/wp-content/uploads/2022/12/image9-1-768x103.png 768w" sizes="auto, (max-width: 956px) 100vw, 956px" /></a></div>
<p><span style="font-weight: 400;">Enable the cross color setting and choose a cross color from the color picker. </span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-to-show-attribute-name-on-the-shop-page_wrap"><div class="documentor-section  section-3803" id="enable-to-show-attribute-name-on-the-shop-page" data-section-id="3803"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.5.</span>Enable to Show attribute Name on the Shop Page <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-to-show-attribute-name-on-the-shop-page')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">You simply have to enable the toggle to display the product variation attribute names on the shop page. </span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/02/24-attribute-name-option-1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24461 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/02/24-attribute-name-option-1.png" alt="" width="886" height="520" srcset="https://docs.wpswings.com/wp-content/uploads/2023/02/24-attribute-name-option-1.png 886w, https://docs.wpswings.com/wp-content/uploads/2023/02/24-attribute-name-option-1-300x176.png 300w, https://docs.wpswings.com/wp-content/uploads/2023/02/24-attribute-name-option-1-768x451.png 768w" sizes="auto, (max-width: 886px) 100vw, 886px" /></a></p>
<p><span style="font-weight: 400;">Here is how the shop page will look afterward: </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/02/19_preview19.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24306 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/02/19_preview19.png" alt="" width="401" height="682" srcset="https://docs.wpswings.com/wp-content/uploads/2023/02/19_preview19.png 401w, https://docs.wpswings.com/wp-content/uploads/2023/02/19_preview19-176x300.png 176w" sizes="auto, (max-width: 401px) 100vw, 401px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-to-show-color-on-tooltip_wrap"><div class="documentor-section  section-3804" id="enable-to-show-color-on-tooltip" data-section-id="3804"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.6.</span>Enable to Show Color on Tooltip <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-to-show-color-on-tooltip')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">You can </span><b>enable the Show Color on Tooltip</b><span style="font-weight: 400;"> toggle to customize the tooltip label color. To do this, follow these steps: </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/02/image6.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24308 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/02/image6.png" alt="" width="870" height="396" srcset="https://docs.wpswings.com/wp-content/uploads/2023/02/image6.png 870w, https://docs.wpswings.com/wp-content/uploads/2023/02/image6-300x137.png 300w, https://docs.wpswings.com/wp-content/uploads/2023/02/image6-768x350.png 768w" sizes="auto, (max-width: 870px) 100vw, 870px" /></a></div>
<div>
<ol>
<li><span style="font-weight: 400;"> Go to the </span><b>Select Tooltip Background Color </b><span style="font-weight: 400;">and </span><b>Select the Tooltip Text Color </b><span style="font-weight: 400;">options. </span></li>
<li><span style="font-weight: 400;"> Click on the color picker and select the colors you want. </span></li>
<li><span style="font-weight: 400;"> Click on </span><b>Save Settings</b><span style="font-weight: 400;">. </span></li>
</ol>
<p><span style="font-weight: 400;">Here is how it appears on the variable product detail page: </span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2023/02/image26.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24311 size-full" src="https://docs.wpswings.com/wp-content/uploads/2023/02/image26.png" alt="" width="922" height="649" srcset="https://docs.wpswings.com/wp-content/uploads/2023/02/image26.png 922w, https://docs.wpswings.com/wp-content/uploads/2023/02/image26-300x211.png 300w, https://docs.wpswings.com/wp-content/uploads/2023/02/image26-768x541.png 768w" sizes="auto, (max-width: 922px) 100vw, 922px" /></a></div>
</div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enable-bestseller-highlight-2_wrap"><div class="documentor-section  section-4870" id="enable-bestseller-highlight-2" data-section-id="4870"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.7.</span>Enable Bestseller Highlight <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enable-bestseller-highlight-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2025/08/enable-best-seller-highlight.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-29378 size-full" src="https://docs.wpswings.com/wp-content/uploads/2025/08/enable-best-seller-highlight.png" alt="enable best seller highlight" width="1223" height="507" srcset="https://docs.wpswings.com/wp-content/uploads/2025/08/enable-best-seller-highlight.png 1223w, https://docs.wpswings.com/wp-content/uploads/2025/08/enable-best-seller-highlight-300x124.png 300w, https://docs.wpswings.com/wp-content/uploads/2025/08/enable-best-seller-highlight-1024x425.png 1024w, https://docs.wpswings.com/wp-content/uploads/2025/08/enable-best-seller-highlight-768x318.png 768w" sizes="auto, (max-width: 1223px) 100vw, 1223px" /></a>This feature of WooCommerce Colors and Swatches lets you add badges to any product attribute.</p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="choose-terms-2_wrap"><div class="documentor-section  section-4871" id="choose-terms-2" data-section-id="4871"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.8.</span>Choose Terms <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#choose-terms-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p>This setting allows you to select the terms or products you want to highlight. For example, if your red, medium-sized T-shirt is a bestseller (a product that customers often buy), you can set it up to display a “Bestseller” badge on that variation.</p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="enter-badge-tag-name-2_wrap"><div class="documentor-section  section-4872" id="enter-badge-tag-name-2" data-section-id="4872"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.9.</span> Enter Badge/Tag Name <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#enter-badge-tag-name-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">This setting lets the admin edit the name of the badge that will appear on the selected product variations.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="select-badge-background-color_wrap"><div class="documentor-section  section-4873" id="select-badge-background-color" data-section-id="4873"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.10.</span>Select Badge Background Color <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#select-badge-background-color')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Here, admins can choose the background color of the badge used for highlighting bestseller variations.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="choose-badge-font-color_wrap"><div class="documentor-section  section-4874" id="choose-badge-font-color" data-section-id="4874"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.11.</span>Choose Badge Font Color <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#choose-badge-font-color')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Admins can also set the font color of the badge text.</span></p>
<p><b>Frontend View of This Feature</b></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2025/08/Choose-Badge-Font-Colour.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-29383 size-full" src="https://docs.wpswings.com/wp-content/uploads/2025/08/Choose-Badge-Font-Colour.png" alt="Choose Badge Font Color" width="512" height="439" srcset="https://docs.wpswings.com/wp-content/uploads/2025/08/Choose-Badge-Font-Colour.png 512w, https://docs.wpswings.com/wp-content/uploads/2025/08/Choose-Badge-Font-Colour-300x257.png 300w" sizes="auto, (max-width: 512px) 100vw, 512px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="show-price-and-stock-information-on-hover-2_wrap"><div class="documentor-section  section-4968" id="show-price-and-stock-information-on-hover-2" data-section-id="4968"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">7.12.</span>Show Price And Stock Information On Hover <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#show-price-and-stock-information-on-hover-2')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">By enabling this setting, the admin can display the price and the stock on hovering over the variations. </span></p>
<p><span style="font-weight: 400;">Frontend Representation &#8211;</span></p>
<p><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1-1.png"><img loading="lazy" decoding="async" class="aligncenter wp-image-29727 size-full" src="https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1-1.png" alt="frontend for preview price and stock on hover" width="726" height="532" srcset="https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1-1.png 726w, https://docs.wpswings.com/wp-content/uploads/2025/10/frontend-for-preview-price-and-stock-on-hover-1-1-300x220.png 300w" sizes="auto, (max-width: 726px) 100vw, 726px" /></a></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="global-setting-of-the-product_wrap"><div class="documentor-section  section-1270" id="global-setting-of-the-product" data-section-id="1270"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">8.</span>Global Setting of the Product  <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#global-setting-of-the-product')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p>First, create Global Attributes.</p>
<p><span style="font-weight: 400;">Navigate to the sidebar and click on </span><b>Products &gt; Attribute</b><span style="font-weight: 400;">. In this section, you can create a new attribute and edit or delete previously created attributes.</span></p>
<p><span style="font-weight: 400;">To create a new attribute, fill out the required fields like Name, Slug, etc., and lastly, click on the ‘Add Attribute’ tab.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9335 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-1.png" alt="woocommerce-color-and-swatches-for-variation" width="1339" height="589" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-1.png 1339w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-1-300x132.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-1-768x338.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-1-1024x450.png 1024w" sizes="auto, (max-width: 1339px) 100vw, 1339px" /></a></div>
<p><span style="font-weight: 400;">After successfully creating an Attribute, add Attributes terms by clicking on a particular Attribute Name.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9343 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation.png" alt="woocommerce-color-and-swatches-for-variation" width="1346" height="588" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation.png 1346w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-300x131.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-768x336.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-1024x447.png 1024w" sizes="auto, (max-width: 1346px) 100vw, 1346px" /></a></div>
<p><span style="font-weight: 400;">To configure the terms, you have to enter the Term Name, Term Slug, and Description, and select the Display type. </span></p>
<p><span style="font-weight: 400;">This plugin provides three types of display types Image, Text, and Color.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-display-type-global.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9943 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-display-type-global.png" alt="woocommerce-color-and-swatches-display-type-global" width="1349" height="615" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-display-type-global.png 1349w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-display-type-global-300x137.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-display-type-global-768x350.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-display-type-global-1024x467.png 1024w" sizes="auto, (max-width: 1349px) 100vw, 1349px" /></a></div>
<p>And the last click on <strong>&#8216;Add New Term&#8217;</strong>, your Attribute Term is successfully created.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-4.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9339 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-4.png" alt="woocommerce-color-and-swatches-for-variation" width="1344" height="563" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-4.png 1344w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-4-300x126.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-4-768x322.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-4-1024x429.png 1024w" sizes="auto, (max-width: 1344px) 100vw, 1344px" /></a></div>
<p>Now, you can add multiple <strong>&#8216;Attributes&#8217; and &#8216;Attributes Terms&#8217;</strong> according to your requirements.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-5.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9340 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-5.png" alt="woocommerce-color-and-swatches-for-variation" width="1346" height="587" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-5.png 1346w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-5-300x131.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-5-768x335.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-for-variation-5-1024x447.png 1024w" sizes="auto, (max-width: 1346px) 100vw, 1346px" /></a></div>
<p>After successfully creating attributes, you have to enable the plugin setting.</p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Navigate to the dashboard and click on the ‘</span><b>WC Color &amp; Swatches</b><span style="font-weight: 400;">’ Settings. </span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Click on the ‘</span><b>Enable Swatches</b><span style="font-weight: 400;">’ and ‘</span><b>Use Attributes Terms Thumbnails</b><span style="font-weight: 400;">’ settings.</span></li>
</ul>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/31-use-attribute-term-thumnails.png"><img loading="lazy" decoding="async" class="alignnone wp-image-24118 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/31-use-attribute-term-thumnails.png" alt="" width="1686" height="519" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/31-use-attribute-term-thumnails.png 1686w, https://docs.wpswings.com/wp-content/uploads/2019/03/31-use-attribute-term-thumnails-300x92.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/31-use-attribute-term-thumnails-1024x315.png 1024w, https://docs.wpswings.com/wp-content/uploads/2019/03/31-use-attribute-term-thumnails-768x236.png 768w, https://docs.wpswings.com/wp-content/uploads/2019/03/31-use-attribute-term-thumnails-1536x473.png 1536w" sizes="auto, (max-width: 1686px) 100vw, 1686px" /></a></div>
<p><span style="font-weight: 400;">After enabling those two settings, you can view the </span><span style="font-weight: 400;">WooCommerce variation swatches</span><span style="font-weight: 400;"> of the product.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variations.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9353 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variations.png" alt="woocommerce-color-and-swatches-variations" width="913" height="758" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variations.png 913w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variations-300x249.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variations-768x638.png 768w" sizes="auto, (max-width: 913px) 100vw, 913px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="per-product-setting_wrap"><div class="documentor-section  section-1271" id="per-product-setting" data-section-id="1271"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">9.</span>Per Product Setting <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#per-product-setting')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">You can configure product variations individually. </span><span style="font-weight: 400;">To enable the product-wise setting, first, you need to add attributes and their values by clicking on the<strong> ‘Attribute‘</strong> tab.</span></p>
<p>&nbsp;</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/30-variable-product-attribute.png"><img loading="lazy" decoding="async" class="alignnone wp-image-23772 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/30-variable-product-attribute.png" alt="" width="1296" height="666" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/30-variable-product-attribute.png 1296w, https://docs.wpswings.com/wp-content/uploads/2019/03/30-variable-product-attribute-300x154.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/30-variable-product-attribute-1024x526.png 1024w, https://docs.wpswings.com/wp-content/uploads/2019/03/30-variable-product-attribute-768x395.png 768w" sizes="auto, (max-width: 1296px) 100vw, 1296px" /></a></div>
<p>And then click on the <strong>&#8216;Variation Swatches&#8217; </strong>tab.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9384 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches.png" alt="woocommerce-color-and-swatches-variation-swtches" width="848" height="346" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches.png 848w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches-300x122.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-variation-swtches-768x313.png 768w" sizes="auto, (max-width: 848px) 100vw, 848px" /></a></div>
<p>Now click on the <strong>Display Type Image</strong>/<strong>Color</strong>/<strong>Text</strong> and select Display Name &#8216;Yes&#8217; from the dropdown list.</p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-set-display-type.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9901 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-set-display-type.png" alt="woocommerce-color-and-swatches-set-display-type" width="858" height="564" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-set-display-type.png 858w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-set-display-type-300x197.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-set-display-type-768x505.png 768w" sizes="auto, (max-width: 858px) 100vw, 858px" /></a></div>
<p><span style="font-weight: 400;">Next, click on all attribute values. Set the Display Type and other Display settings of all attributes. Set ‘Yes’ in the ‘Enable this’ setting and set the Display Type, it may be color/image/text.</span></p>
<p><strong>For swatch 1:</strong></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9922 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1.png" alt="woocommerce-color-and-swatches-swatches-variation-1" width="859" height="625" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1.png 859w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1-300x218.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-1-768x559.png 768w" sizes="auto, (max-width: 859px) 100vw, 859px" /></a></div>
<p><strong>For swatch 2:</strong></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9903 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2.png" alt="woocommerce-color-and-swatches-select-color" width="862" height="630" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2.png 862w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2-300x219.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-select-color-2-768x561.png 768w" sizes="auto, (max-width: 862px) 100vw, 862px" /></a></div>
<p><strong>For swatch 3:</strong></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9923 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation.png" alt="woocommerce-color-and-swatches-swatches-variation" width="860" height="607" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation.png 860w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-300x212.png 300w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-swatches-variation-768x542.png 768w" sizes="auto, (max-width: 860px) 100vw, 860px" /></a></div>
<p>Enable the Swatches and last click on the &#8216;<strong>Save Changes</strong>&#8216; button.</p>
<p><span style="font-weight: 400;">Afterward, you can see the per-product variation swatches of the product.</span></p>
<div class="mwb-docs-product-images"><a class="mwb-image-popup" href="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-per-product-setting.png"><img loading="lazy" decoding="async" class="alignnone wp-image-9392 size-full" src="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-per-product-setting.png" alt="woocommerce-color-and-swatches-per-product-setting" width="668" height="693" srcset="https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-per-product-setting.png 668w, https://docs.wpswings.com/wp-content/uploads/2019/03/woocommerce-color-and-swatches-per-product-setting-289x300.png 289w" sizes="auto, (max-width: 668px) 100vw, 668px" /></a></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="woocommerce-colors-and-swatches-compatibility_wrap"><div class="documentor-section  section-3821" id="woocommerce-colors-and-swatches-compatibility" data-section-id="3821"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">10.</span>WooCommerce Colors and Swatches Compatibility <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#woocommerce-colors-and-swatches-compatibility')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="compatibility-with-elementor-pro_wrap"><div class="documentor-section  section-3822" id="compatibility-with-elementor-pro" data-section-id="3822"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">10.1.</span>Compatibility With Elementor Pro <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#compatibility-with-elementor-pro')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">Our WooCommerce product swatches plugin is compatible with the Elementor Pro plugin.</span></p>
<p><span style="font-weight: 400;">Elementor is a page editor which allows users to use widgets and modules to build various web pages. Similarly, you can use Elementor to build a product, shop, and any other page to display WooCommerce variation swatches. </span></p>
<p><span style="font-weight: 400;">Simply follow these steps to create a variable product page: </span></p>
<ol>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Create a new page or edit an existing page in Elementor Pro.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Add the &#8220;Single Product&#8221; widget to your page.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Customize the widget settings to display the product variations. Under the &#8220;Content&#8221; tab, you can choose to display the product title, image, price, and other details. Under the &#8220;Product&#8221; tab, you can choose to display the product attributes, and variations, and add to cart button.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Save your page changes and preview your variable product page.</span></li>
</ol>
<p><span style="font-weight: 400;">That&#8217;s it! Now you have a variable product page created using Elementor Pro.</span></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="compatibility-with-popular-themes_wrap"><div class="documentor-section  section-3823" id="compatibility-with-popular-themes" data-section-id="3823"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">10.2.</span>Compatibility With Popular Themes <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#compatibility-with-popular-themes')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><p><span style="font-weight: 400;">The WooCommerce Variation Swatches are compatible with the most popular themes, making it easier for you to sell variable products without breaking your page. </span></p>
<p><span style="font-weight: 400;">It works flawlessly with </span><b>Avada, OceanWP, Flatsome, and Divi.   </b></p>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="faqs-125_wrap"><div class="documentor-section  section-3497" id="faqs-125" data-section-id="3497"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">11.</span>FAQs <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#faqs-125')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><div id="sp_easy_accordion-1776281480"><div id="sp-ea-22539" class="sp-ea-one sp-easy-accordion" data-ea-active="ea-click" data-ea-mode="vertical" data-preloader="" data-scroll-active-item="" data-offset-to-scroll="0"><div class="ea-card ea-expand sp-ea-single"><h3 class="ea-header"><a class="collapsed" id="ea-header-225390" role="button" data-sptoggle="spcollapse" data-sptarget="#collapse225390" aria-controls="collapse225390" href="#" aria-expanded="true" tabindex="0"><i aria-hidden="true" role="presentation" class="ea-expand-icon eap-icon-ea-expand-minus"></i> Is your plugin showing Color or Image swatches on shop and category pages?</a></h3><div class="sp-collapse spcollapse collapsed show" id="collapse225390" data-parent="#sp-ea-22539" role="region" aria-labelledby="ea-header-225390"> <div class="ea-body"><p><span style="font-weight: 400">Yes, Color or Image swatches will show on shop and category pages.</span><span style="font-weight: 400"><br /></span><span style="font-weight: 400"><br /></span></p></div></div></div><div class="ea-card sp-ea-single"><h3 class="ea-header"><a class="collapsed" id="ea-header-225391" role="button" data-sptoggle="spcollapse" data-sptarget="#collapse225391" aria-controls="collapse225391" href="#" aria-expanded="false" tabindex="0"><i aria-hidden="true" role="presentation" class="ea-expand-icon eap-icon-ea-expand-plus"></i> How to enable swatches globally to all variable products?</a></h3><div class="sp-collapse spcollapse " id="collapse225391" data-parent="#sp-ea-22539" role="region" aria-labelledby="ea-header-225391"> <div class="ea-body"><p><span style="font-weight: 400">Yes,It can be done by using global attributes so merchants just follow these simple steps.</span></p><p><span style="font-weight: 400">1: WooCommerce-&gt; product-&gt;attribute.</span></p><p><span style="font-weight: 400">2: Click on attribute(color)-&gt; then all variations are listed (black,blue,black-silver,black-green etc).</span></p><p><span style="font-weight: 400">3: Click on configure terms-&gt;as you click on that, all variations will list.</span></p><p><span style="font-weight: 400">4: Select any variation -&gt; click on edit(button)-&gt; there is an option “Display Type” from there you can select the thumbnail-image/color/text which you want to display on the front end.</span></p><p><span style="font-weight: 400">5: Now this setting works globally for all global attributes and swatches will show on all products.</span></p></div></div></div><div class="ea-card sp-ea-single"><h3 class="ea-header"><a class="collapsed" id="ea-header-225392" role="button" data-sptoggle="spcollapse" data-sptarget="#collapse225392" aria-controls="collapse225392" href="#" aria-expanded="false" tabindex="0"><i aria-hidden="true" role="presentation" class="ea-expand-icon eap-icon-ea-expand-plus"></i> How many Variations Can be made of each product?</a></h3><div class="sp-collapse spcollapse " id="collapse225392" data-parent="#sp-ea-22539" role="region" aria-labelledby="ea-header-225392"> <div class="ea-body"><p><span style="font-weight: 400">Variation can be made according to the requirements.</span></p></div></div></div><div class="ea-card sp-ea-single"><h3 class="ea-header"><a class="collapsed" id="ea-header-225393" role="button" data-sptoggle="spcollapse" data-sptarget="#collapse225393" aria-controls="collapse225393" href="#" aria-expanded="false" tabindex="0"><i aria-hidden="true" role="presentation" class="ea-expand-icon eap-icon-ea-expand-plus"></i> How would I remove the drop-down option and keep only variation (color/size)?</a></h3><div class="sp-collapse spcollapse " id="collapse225393" data-parent="#sp-ea-22539" role="region" aria-labelledby="ea-header-225393"> <div class="ea-body"><p><span style="font-weight: 400"> First ,you have to go to the wooCommerce product setting , select  the product and then go to the variation swatches setting after that set  the swatches value as per your Requirement .</span><span style="font-weight: 400"><br /></span></p></div></div></div><div class="ea-card sp-ea-single"><h3 class="ea-header"><a class="collapsed" id="ea-header-225394" role="button" data-sptoggle="spcollapse" data-sptarget="#collapse225394" aria-controls="collapse225394" href="#" aria-expanded="false" tabindex="0"><i aria-hidden="true" role="presentation" class="ea-expand-icon eap-icon-ea-expand-plus"></i> Is it possible to use the same size of swatches globally over the site?</a></h3><div class="sp-collapse spcollapse " id="collapse225394" data-parent="#sp-ea-22539" role="region" aria-labelledby="ea-header-225394"> <div class="ea-body"><p><span style="font-weight: 400">Yes, we have provided a setting under a general setting of the plugin, by enabling swatches of the same size shown over the website.</span><span style="font-weight: 400"><br /></span><span style="font-weight: 400"><br /></span></p></div></div></div><div class="ea-card sp-ea-single"><h3 class="ea-header"><a class="collapsed" id="ea-header-225395" role="button" data-sptoggle="spcollapse" data-sptarget="#collapse225395" aria-controls="collapse225395" href="#" aria-expanded="false" tabindex="0"><i aria-hidden="true" role="presentation" class="ea-expand-icon eap-icon-ea-expand-plus"></i> How Would I connect you?</a></h3><div class="sp-collapse spcollapse " id="collapse225395" data-parent="#sp-ea-22539" role="region" aria-labelledby="ea-header-225395"> <div class="ea-body"><p><span style="font-weight: 400">You can raise a ticket from </span><a href="https://wpswings.com/submit-query/?utm_source=wpswings-colorsandswatches-support&amp;utm_medium=colorsandswatches-doc-page&amp;utm_campaign=support"><span style="font-weight: 400">here</span></a><span style="font-weight: 400">, our team will check and help you in all your queries.</span></p></div></div></div><div class="ea-card sp-ea-single"><h3 class="ea-header"><a class="collapsed" id="ea-header-225396" role="button" data-sptoggle="spcollapse" data-sptarget="#collapse225396" aria-controls="collapse225396" href="#" aria-expanded="false" tabindex="0"><i aria-hidden="true" role="presentation" class="ea-expand-icon eap-icon-ea-expand-plus"></i> Is it possible to share the product Variation over the Social Media?</a></h3><div class="sp-collapse spcollapse " id="collapse225396" data-parent="#sp-ea-22539" role="region" aria-labelledby="ea-header-225396"> <div class="ea-body"><p>Yes, you can share the variation of the product using this plugin over Social Media.</p></div></div></div></div></div>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--><div class="doc-sectionwrap " id="helpful-resources-8_wrap"><div class="documentor-section  section-3834" id="helpful-resources-8" data-section-id="3834"><h2 class="doc-sec-title" style="clear:none;line-height:39px;font-family:;font-size:31px;font-weight:normal;font-style:normal;color:#3c3c3c;border-bottom: 1px dotted #e6e6e6;"> <span class="doc-sec-count" style="display:inline-block">12.</span>Helpful Resources !! <span class="doc-sec-link doc-noprint" onclick="prompt('Press Ctrl + C, then Enter to copy to clipboard','https://docs.wpswings.com/tag/woocommerce-add-to-cart-variation/feed/#helpful-resources-8')"><span class="icon-hyperlink doc-icons"></span></span> <div class="documentor-social doc-noprint"></div></h2><div class="doc-sec-content" style="clear:none;line-height:24px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#333333;"><h1 class="title-heading-left fusion-responsive-typography-calculated"><a href="https://wpswings.com/blog/display-variation-swatches/?utm_source=wpswings-cns-blog&amp;utm_medium=colorsandswatches-doc&amp;utm_campaign=bookings-cns-blog">The Ultimate Guide to Variation Swatches for WooCommerce</a></h1>
</div><div class="documentor-help"><div class="negative-feedbackform doc-noprint">
					</div><div class="feedback-msg doc-noprint"></div></div></div></div><!--./doc-sectionwrap--></div><!--.doc-sec-container--><div id="sugestedit_popup208" class="sugestedit_popup">
				<a class="modal_close"></a>
				<form name="documentor-suggestform" method="post" class="documentor-suggestform">
					<div class="doc-frmdiv" style="font-weight: bold;">Suggest Edit
					</div>
					<div class="doc-frmdiv">
						<input type="text" name="sec_title" class="sedit-sectitle txtinput" value="" />
					</div><div class="doc-frmdiv">
							<input type="text" name="name" class="txtinput" placeholder="Name" required />
						</div><div class="doc-frmdiv">
							<input type="email" class="emailinput" placeholder="Email" name="email" required /> 
						</div><div class="doc-frmdiv">
							<textarea name="content" class="textareainput" placeholder="Post your suggestion..." required></textarea>
						</div><div class="doc-frmdiv"><label> Captcha :&nbsp; </label><span class="doc-sedit-captcha"></span></div><input type="hidden" class="sedit-secid" name="secid" value="" />
					<input type="hidden" class="sedit-postid" name="sedit_postid" value="" />
					<input type="hidden" class="sedit-docid" name="docid" value="208" />
					<button class="docsubmit-suggestform"> Submit </button>
				</form>
			</div><script type="text/javascript">
			jQuery(document).ready(function(){
				jQuery("#documentor-208").documentor({
					documentid	: 208,
					docid		: "documentor-208",
					animation	: "",
					indexformat	: "1",
					pformat		: "decimal",
					cformat		: "decimal",					
					secstyle	: "clear:none;line-height:20px;font-family:;font-size:15px;font-weight:normal;font-style:normal;color:#326693;",
					actnavbg_default: "1",
					actnavbg_color	: "#f3b869",
					enable_ajax	: "0",
					scrolling	: "1",
					fixmenu		: "1",
					skin		: "mint",
					scrollBarSize	: "8",
					scrollBarColor	: "#326693",
					scrollBarOpacity: "0.5",
					windowprint	: "0",
					menuTop: "20",
					socialshare	: 0,
					sharecount	: 1,
					fbshare		: 1,
					twittershare	: 1,
					gplusshare	: 1,
					pinshare	: 1,
					togglechild	: 1,
					noResultsStr: "No results found!",
				});	
			});</script></div><!--/.document-wrapper--></div><div class="cleardiv"> </div><div id="documentor-208-end"></div>
<p>The post <a href="https://docs.wpswings.com/woocommerce-colors-and-swatches-for-variations/">WooCommerce Colors &#038; Swatches for Variations</a> appeared first on <a href="https://docs.wpswings.com">WP Swings Documentation</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://docs.wpswings.com/woocommerce-colors-and-swatches-for-variations/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
