EHERO Woo Swatches – Amostras visuais para variações de WooCommerce

Amostras visuais para variações de WooCommerce: o cliente vê a cor e o tamanho antes de escolher

O EHERO Woo Swatches troca os menus pendentes por amostras visuais para variações de WooCommerce: círculos de cor, fotografias e botões de texto que os seus clientes tocam na ficha do produto e também na lista da loja.

Por omissão, o WooCommerce mostra cada atributo como um menu pendente. Para saber se a camisola com capuz existe em verde é preciso abri-lo, e para saber se o M ainda existe nesse verde é preciso experimentar a combinação. No telemóvel são muitos toques até ao botão de compra.

O plugin resolve isso sem mexer nos seus produtos: escolhe o tipo de amostra de cada atributo e, a partir daí, o que não existe aparece riscado, o tamanho que está a acabar avisa, cada opção mostra o acréscimo de preço e a loja deixa comprar sem entrar na ficha.

Quatro tipos de amostras visuais para variações de WooCommerce

Cada atributo da forma que se percebe mais depressa: uma cor como círculo, um padrão como fotografia e um tamanho como botão de texto.

• Cor: um círculo ou quadrado com o tom exato que escolhe no seletor de cor.
• Bicolor: duas cores divididas na diagonal, para peças em dois tons ou acabamentos duplos.
• Imagem: a fotografia que atribui ao termo ou, se não tiver, a da variação ou a do produto, conforme a alternativa que escolher.
• Etiqueta: texto sobre fundo liso ou com um dos oito gradientes incluídos (dourado, prateado, bronze, preto premium, azul pro, esmeralda, pôr do sol e oceano) ou um seu, mais um distintivo como «Popular» ou «-20%» e um pequeno ícone.

Esgotado, stock baixo e acréscimo de preço na própria amostra

Quando o cliente escolhe uma cor, os tamanhos que não existem nessa cor, e os esgotados se a sua loja oculta os produtos sem stock, ficam riscados de imediato.

• O que não está disponível aparece riscado, esbatido ou escondido, como preferir.
• O aviso «Restam só 3!» debaixo das amostras quando o stock da variação desce abaixo do seu limite (5 por omissão).
• A diferença de preço junto de cada opção, por exemplo «+5€» no tamanho mais caro.
• Ao passar o rato, uma dica mostra o nome da opção.

Amostras também na loja e nas categorias

As amostras aparecem debaixo de cada produto variável na loja, nas categorias e nas páginas de etiquetas.

• Número máximo de amostras por atributo; o resto junta-se num contador «+N».
• Posição: depois do título, depois do preço ou antes da imagem; alinhadas à esquerda, ao centro ou à direita.
• Um clique numa cor mostra a fotografia dessa variação e, com a escolha completa, também o seu preço.
• O shortcode coloca-as à mão em modelos do Bricks ou noutros modelos personalizados.

Adicionar ao carrinho sem sair da lista

Quando o cliente escolhe todas as opções na lista, o botão do produto já sabe de que variação se trata.

• Modo ligação: o botão abre a ficha com a variação já escolhida, pronta a comprar.
• Modo direto: adiciona a variação ao carrinho por AJAX, sem recarregar a página.
• O botão confirma com «Adicionado ao carrinho!» e o contador ou o minicarrinho do seu tema atualizam-se como com o botão do WooCommerce.
• Se a variação não puder ser adicionada, o botão fica marcado com o erro.

Um tipo por atributo e cada termo ao seu gosto

A página Atributos lista os atributos globais da sua loja com o respetivo tipo de amostra. Muda o tipo num menu e aplica-se a todos os termos.

• Botão Configurar: abre a grelha com todos os termos do atributo e os campos próprios do seu tipo.
• Fundo, segunda cor, cor do texto, imagem ou ícone, gradiente e distintivo, guardados no momento.
• Os mesmos campos aparecem quando cria ou edita um termo em Produtos → Atributos do WordPress.
• Um atributo sem tipo aparece como etiqueta de texto, tal como os atributos criados apenas dentro de um produto.

Design com pré-visualização ao vivo

As amostras ficam como quer sem escrever uma linha de CSS, e a pré-visualização muda a cada ajuste.

• Forma quadrada, arredondada ou redonda; tamanho de 16 a 80 px, espaçamento e raio dos cantos.
• Estado selecionado com contorno destacado, visto ou ligeira ampliação, com a sua cor e espessura.
• Estado indisponível com cruz ou opacidade reduzida, mais um efeito de zoom ao passar o rato.
• Um efeito de legibilidade para texto sobre cor (sombra escura, sombra clara ou contorno) e um campo para o seu CSS.

Definições de stock, preço e seleção automática

Um único ecrã com tudo o que altera o comportamento, com uma explicação debaixo de cada opção.

• Seleção automática na ficha e nas listas: nenhuma, a primeira, a mais barata ou a mais cara.
• Imagem alternativa para amostras de imagem sem fotografia: nenhuma, a da variação ou a do produto.
• O nome de cada atributo junto das suas amostras, com cor, tamanho e espessura de letra à escolha.
• Um texto depois do preço, separado para a ficha e para as listas, com a sua cor e tamanho.

Um painel que diz como está tudo

Ao abrir o Woo Swatches vê logo se está tudo a funcionar e vai com um clique onde quer alterar alguma coisa.

• Estado da licença, número de atributos configurados e de produtos variáveis.
• Se as amostras estão ativas na ficha e nas listas.
• Atalhos para Atributos, Design, Definições e a sua loja.
• Versões do plugin e do WooCommerce, úteis quando nos escreve.

Compatível com subscrições, temas de blocos e Bricks

As amostras visuais para variações de WooCommerce assentam no formulário padrão de variações, por isso adaptam-se à maioria dos temas.

• Produtos variáveis e subscrições variáveis, incluindo as do EHERO WooCommerce Subscriptions.
• Voltam a ativar-se sozinhas quando o Bricks carrega conteúdo por AJAX, por exemplo ao paginar ou filtrar.
• O evento ehero_swatches_reinit permite que um tema ou plugin peça a sua reconstrução.
• Produtos variáveis padrão do WooCommerce (veja a documentação oficial); compatibilidade com HPOS declarada.

Leve, acessível e respeitador do WooCommerce

O menu original não é eliminado: fica escondido e continua a enviar a variação para o carrinho, por isso as validações e outros plugins não notam diferença.

• Os ficheiros só carregam na loja, nas categorias e nas fichas de produto.
• Nas listas, as amostras ativam-se quando o produto entra na zona visível.
• Usam-se com o teclado: Tab para avançar, Enter ou barra de espaço para escolher.
• Um limite de variações ajustável (30 por omissão) para riscar logo as combinações que não existem.

Ideal para

As amostras visuais para variações de WooCommerce rendem mais onde a diferença entre opções se vê. É aqui que brilham:

📋 Requisitos do sistema

O que a versão 1.0.9 do plugin precisa.

🛟 Suporte técnico

Suporte por email* em soporte@consultoriaehero.com. O plugin de amostras visuais para variações de WooCommerce atualiza-se a partir do painel do WordPress enquanto a licença estiver ativa.

⚖️ Comparação: porquê o EHERO Woo Swatches?

Há muitos plugins de amostras; dois dos mais usados são o Variation Swatches for WooCommerce Pro, da GetWooPlugins, e o Variation Swatches and Photos, do mercado oficial WooCommerce.com. Eis o que cada um declara no seu site, ao lado do que o EHERO oferece para as amostras visuais para variações de WooCommerce.

Dados retirados do site de cada fornecedor, outubro de 2026. «Não consta»: não aparece na ficha nem nas condições ou nas perguntas frequentes. Os preços não indicam impostos.

Quantos clientes desistem perante um menu pendente? As amostras visuais para variações de WooCommerce mostram tudo de relance. Comece hoje por 59 € por ano, IVA não incluído.

Deixe os seus clientes ver o que estão a escolher, com o EHERO Woo Swatches.

Quer ver mais ferramentas para a sua loja? Descubra todos os nossos plugins para WooCommerce ou visite a loja da Consultoría EHERO.

*O suporte cobre incidências, erros e a instalação do plugin; não inclui consultoria, configurações personalizadas nem desenvolvimentos à medida. Aplicam-se as condições.