Woocommerce product swatches

<!-- wp:paragraph -->
<p>By default, woocommerce uses Select type for variation select and text values in specifications. Woocomerce addon adds several additional options for attribute types: color tag, text tag, image and image + text tag</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2946,"width":512,"height":349,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/swatch-1024x698.jpg" alt="" class="wp-image-2946" width="512" height="349"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This feature supports variable selector, specification table and <a href="https://greenshiftwp.com/woocommerce-product-comparison/" data-type="post" data-id="2889">dynamic comparison</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="how-to-add-product-swatches-to-woocommerce-fse-templates">How to add product swatches to Woocommerce FSE templates?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you create attribute in Woocommerce, you can select it's type</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2947,"width":512,"height":456,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/swatch2-1024x911.jpg" alt="" class="wp-image-2947" width="512" height="456"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Once you select custom type and save it, you can find additional fields when you configure your attribute terms</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2948,"width":562,"height":768,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/05/swatch3-749x1024.jpg" alt="" class="wp-image-2948" width="562" height="768"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="how-to-show-swatches-on-pages">How to show swatches on pages</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>On inner product pages, swatches are added automatically if you use Single Product Template Button block. This will show dynamic swatches which are connected to variations and show dynamic price.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you just need swatches as information (not clickable), you can use Meta getter block - Woocommerce - Product swatches</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can also show swatches in query, for this, use block "Button with quantity and variations"</p>
<!-- /wp:paragraph -->