O VariSwatch (frequentemente referido como WooCommerce VariSwatch ou Variations Swatches for WooCommerce) é uma solução para lojas virtuais baseadas em WooCommerce que transforma os seletores padrão de variações de produtos (as tradicionais caixas dropdown) em amostras visuais interativas e dinâmicas.
A ferramenta substitui seletores de texto por botões visuais de cores, imagens, rótulos (labels) e rádio, melhorando significativamente a experiência de navegação (UX) e facilitando a visualização dos atributos do produto antes da compra.
Destaques:
- Tipos Diversificados de Amostras (Swatches):
- Amostras de Cor (Color Swatches): Exibição de cores únicas ou duplas (bicolores) para atributos como tonalidades e acabamentos.
- Amostras de Imagem (Image Swatches): Exibição de miniaturas de fotos do produto ou padrões de textura/estampa para cada variação.
- Amostras de Rótulo/Texto (Button/Label Swatches): Botões estilizados para exibição de tamanhos (Ex: P, M, G, XL), dimensões ou especificações técnicas.
- Botões de Rádio (Radio Swatches): Seleção em formato de lista com opções marcáveis.
- Amostras em Páginas de Catálogo e Arquivo: Permite exibir as variações de cores/tamanhos diretamente na grade de produtos do catálogo (Shop Page, categorias e resultados de busca), permitindo que o cliente altere a imagem e veja as opções sem precisar entrar na página individual do produto.
- Animação e Efeitos Visuais (Hover & Tooltip):
- Exibição de balões informativos (tooltips) com o nome do atributo ou prévia da imagem expandida ao passar o mouse.
- Efeitos de destaque e seleção (bordas, sombras e animações sutis ao clicar).
- Tratamento de Variações Fora de Estoque: Opções configuráveis para esmaecer (fade out), riscar (cross-out) ou ocultar automaticamente amostras de combinações e tamanhos indisponíveis no estoque.
- Troca Dinâmica de Imagem Principal e Galeria: Atualização instantânea da foto principal e da galeria de imagens da página do produto assim que o cliente clica em uma amostra de cor ou imagem correspondente.
