B3 Swatches Article
Shop Page
Enable swatches on the shop loop and understand the lighter archive output the plugin renders there.
Shop-loop swatches are intentionally lighter than single-product output. When enabled, B3 Swatches adds a compact selector to variable product cards so shoppers can preview options before opening the product.
Browse docs
Enable on shop
Turn on loop output only when product cards still stay readable.
The current plugin UI exposes one switch here: Enable on Shop Page. When
it is on, variable products in the loop can render a compact swatch preview
instead of waiting for the shopper to open the full product page.
Archive output
The shop loop uses a smaller, simpler swatch renderer than the product page.
The archive renderer is intentionally lighter. It only appears on variable products, and it mounts a minimal swatch layer so the loop stays fast and compact.
- First variation attribute
- The plugin uses the first variation attribute for the shop-loop swatch preview, not the full multi-attribute product form.
- Variable products only
- Simple products do not get loop swatches because there is no variation selector to render.
- Shared data source
- The loop uses the same swatch data you set on attribute terms and product overrides.
Keep cards clean
Use the loop view as a quick preview, not a full product form.
If the wrong attribute is showing in the shop loop, check the product’s variation-attribute order in WooCommerce. Since the loop uses the first variation attribute only, that ordering matters.