Você já se perguntou se poderia substituir o emblema de venda básico do WooCommerce por algo mais atraente (e um pouco menos chato)?
Essa é uma pergunta comum que recebemos de nossos leitores, e temos o prazer de dizer que a resposta é sim. Você pode, com certeza!
Os crachás de produtos personalizados são uma maneira fantástica de destacar itens especiais em sua loja on-line. Eles são úteis se você quiser mostrar novidades, marcar itens em promoção ou chamar a atenção para ofertas por tempo limitado.
Nesta postagem, mostraremos duas maneiras simples de adicionar emblemas de produtos personalizados à sua loja WooCommerce. Você pode usar um plugin poderoso ou adicionar um código simples.
Não se preocupe. Nós o orientaremos passo a passo sobre cada opção!

Observação importante: para seguir este tutorial, você precisará ter uma loja WooCommerce totalmente funcional. Se você ainda não configurou a sua (ou ainda está no processo), confira nosso guia definitivo do WooCommerce para iniciantes.
O que são os emblemas de produtos do WooCommerce?
Você já notou aquelas pequenas etiquetas de “Promoção” ou “Novo” que aparecem nos produtos durante as compras on-line?
Esses são emblemas de produtos e são incrivelmente úteis para fazer com que determinados itens se destaquem em sua loja on-line.
Pense neles como adesivos virtuais que chamam a atenção de seus clientes para detalhes importantes do produto, como vendas, novidades ou ofertas por tempo limitado.
Já vimos proprietários de lojas usarem crachás de produtos de maneiras realmente criativas para mostrar ofertas especiais, destacar os mais vendidos ou marcar itens que estão com pouco estoque.
Agora, se você já estiver usando o WooCommerce, deve ter notado que ele vem com um recurso básico de crachá de venda que aparece automaticamente quando você reduz o preço de um produto.

Embora o emblema de venda do WooCommerce funcione bem para necessidades simples, vamos ser honestos: ele é bastante limitado em termos do que você pode fazer com ele.
Não é possível alterar facilmente a aparência do emblema, adicionar novos tipos de emblemas ou controlar exatamente onde eles aparecem nas imagens do produto.
Enquanto isso, os crachás de produtos personalizados permitem que você mostre mais a personalidade da sua marca. Porém, o mais importante é que os crachás originais podem chamar a atenção de forma mais eficaz para produtos especiais.
Dessa forma, você pode gerar mais vendas em sua loja on-line. 💰
Neste guia, vamos orientá-lo em dois métodos comprovados para adicionar e personalizar emblemas de produtos no WooCommerce. Ambas as abordagens lhe darão controle total sobre a aparência e o funcionamento deles.
Você pode usar os links rápidos abaixo para pular para o método de sua preferência:
Método 1: use o YITH WooCommerce Badge Management (mais personalizável)
Vamos começar com nossa ferramenta favorita para adicionar emblemas de produtos personalizados à sua loja WooCommerce.
Recomendamos o uso do YITH WooCommerce Badge Management porque ele facilita muito a adição e a personalização de emblemas de produtos em sua loja on-line.
Além disso, testamos muitos plug-ins do YITH ao longo dos anos, como os que adicionam assinaturas e vídeos de produtos, e eles sempre funcionam muito bem para nossos usuários.
Deseja exibir um distintivo especial durante as festas de fim de ano? Ou talvez exibir quanto dinheiro os clientes economizarão? Esse plug-in pode fazer tudo isso. Você pode até mesmo definir crachás para serem exibidos em determinados horários e ocultá-los posteriormente.
Você pode começar com a versão gratuita ou premium do plug-in. A versão gratuita é perfeita se você quiser apenas adicionar emblemas simples de texto ou imagem aos seus produtos.
Neste guia, mostraremos como usar a versão premium, mas a maioria das etapas funcionará da mesma forma para ambas. Lembre-se de que alguns recursos interessantes, como crachás que mostram automaticamente os valores dos descontos, só vêm com a versão premium.
Observação: A versão premium custa US$ 79,99 por ano se você quiser todos os recursos. Embora isso possa parecer muito, achamos que vale a pena, pois você tem muitas maneiras de personalizar os crachás de produtos e deixá-los com a aparência exata que deseja.
Pronto para começar? Primeiro, você precisará comprar o plug-in no site do YITH.
Em seguida, faça login em sua conta do YITH, vá para a guia “Licenses & Downloads” e clique no botão “Download Plugin” para baixar o arquivo.

Uma dica: não feche esta página depois de fazer o download, pois você precisará da chave de licença que é mostrada nela.
Em seguida, vá para o painel do WordPress e instale o plug-in. Para obter mais informações, temos um guia passo a passo sobre como instalar um plug-in do WordPress.
Quando estiver ativo, você verá uma tela de configuração solicitando seu e-mail e chave de licença do YITH. Basta copiá-los do site do YITH e clicar em ‘Activate license’.

Quando você vir a mensagem dizendo que sua licença está ativa, estará tudo pronto!
Agora, clique em “Go to plugin dashboard” (Ir para o painel do plug-in) e você poderá começar a criar seu primeiro emblema personalizado.

Etapa 1: ocultar o emblema de venda padrão do WooCommerce
Primeiro, precisamos ocultar o emblema de venda integrado do WooCommerce para que ele não entre em conflito com nossos emblemas de produtos personalizados.
O processo é muito simples. Vá para o painel do WordPress e clique em YITH ” Badge Management. Em seguida, navegue até a guia “General Settings” (Configurações gerais).
Aqui, você encontrará uma opção que diz ‘Hide WooCommerce “On sale” badge’. Vá em frente e ative essa opção.
Em seguida, em ‘Hide “On sale” on:’ (Ocultar “Em promoção” em:), selecione ‘All products’ (Todos os produtos) para garantir que o emblema padrão não apareça em nenhum lugar de sua loja.

Enquanto estiver nas configurações, você poderá observar algumas outras opções úteis. Você pode optar por ocultar seus emblemas personalizados em determinados locais, como a barra lateral ou páginas de produtos individuais.
Isso é ótimo se você quiser manter sua loja com aparência limpa e organizada. Por exemplo, se o site móvel parecer muito cheio, você também poderá ocultar os emblemas.
Não se esqueça de clicar no botão “Save Options” (Salvar opções) na parte inferior da página quando terminar.

Etapa 2: Crie seu crachá personalizado
Agora vem a parte divertida: criar seu primeiro emblema de produto personalizado no WooCommerce!
Vá até a guia “Badges” (Crachás) e clique no botão “Create Badge” (Criar crachá) para começar.

O plug-in oferece quatro tipos diferentes de emblemas para você escolher: emblema de texto, emblema de imagem, emblema de CSS ou emblema avançado para produtos de vendas.
Cada tipo permite que você crie maneiras exclusivas de destacar seus produtos. Por exemplo, se você quiser marcar os produtos como “New Arrival” ou “Vegan Friendly”, as três primeiras opções funcionam muito bem.
Mas aqui vai uma dica: se estiver criando crachás de desconto, recomendamos usar a opção avançada, que é atualizada automaticamente com base nas alterações de preço do produto.

Depois de escolher o tipo de crachá, dê a ele um nome que o ajude a lembrar para que serve.
Se tiver escolhido um emblema de imagem, CSS ou avançado, você verá uma coleção completa de designs de emblemas pré-criados diretamente no plug-in.
Você pode escolher o que preferir. Esses emblemas prontos para uso economizam seu tempo e você ainda pode personalizá-los para que correspondam ao estilo das suas páginas do WooCommerce.

Esse plug-in realmente se destaca por suas opções de personalização. Dependendo do tipo de crachá escolhido, você pode ajustar todos os tipos de configurações para que o crachá fique perfeito nas imagens do produto.
Quer mudar a cor? É fácil.
Precisa ajustar o grau de transparência? Não tem problema.
Você pode até mesmo girar o emblema ou movê-lo em seus produtos até que ele esteja no lugar certo.

No nosso exemplo, fizemos com que o emblema realmente se destacasse, alterando sua cor para vermelho e colocando-o no canto superior direito da imagem do produto.
Esses pequenos ajustes podem fazer uma grande diferença na eficácia com que seus emblemas chamam a atenção das pessoas.
Quando estiver satisfeito com a aparência de tudo, clique em “Save badge” (Salvar emblema) para concluir.

Etapa 3: Crie uma regra para exibir seu crachá
Agora que criamos nosso emblema personalizado, vamos informar ao WooCommerce exatamente onde e quando exibi-lo.
Vá até a guia “Badge Rules” (Regras de crachá) e clique em “Set Rule” (Definir regra).

Pense nas regras como instruções que informam aos seus emblemas quando devem aparecer nas imagens dos produtos.
O plug-in oferece quatro maneiras principais de controlar onde seus emblemas são exibidos: emblema de produtos, emblema de categoria, emblema de tag e emblema de classe de envio.

Você pode escolher a regra “Emblema de produtos” para adicionar emblemas a determinados itens ou a regra “Emblema de categoria” para cobrir todas as categorias de produtos.
Enquanto isso, a regra de crachá de tag mostra crachás em produtos que compartilham a mesma tag do WooCommerce, e a regra de crachá de classe de envio exibe crachás com base nas opções de envio.
Cada regra visa a diferentes aspectos do produto, mas todas funcionam de maneira semelhante. Portanto, você só precisa escolher o que funciona melhor para suas necessidades.
Vamos usar a regra do crachá de produtos para este exemplo, pois é a opção mais comum.
Em seguida, dê à sua regra um nome simples para que você possa encontrá-la facilmente mais tarde.
Em seguida, procure a configuração “Show badge in:” (Mostrar selo em:). É aqui que você decide quais produtos receberão seu emblema. Você pode optar por mostrá-lo em todos os produtos, nas adições recentes, nos itens em promoção, nos produtos populares em destaque ou até mesmo apenas nos produtos que estão em estoque.

Digamos que você esteja criando uma regra para itens em promoção. Se você selecionar “Produtos em promoção”, seu emblema aparecerá automaticamente sempre que você marcar um produto como em promoção. É simples assim!
Mas algumas opções vêm com mais configurações para você definir. Por exemplo, se você escolher “Only recent Products” (Somente produtos recentes), poderá definir que os emblemas apareçam nos itens adicionados nos últimos dias (como 7, 14 ou 30 dias).
Isso torna muito fácil destacar automaticamente os produtos recém-chegados em sua loja sem adicionar crachás manualmente a cada produto.

Às vezes, você pode querer manter determinados produtos sem crachá. É aí que a configuração “Excluir produtos” é útil.
Basta ativar essa configuração e digitar os nomes dos produtos para os quais você não deseja exibir o selo. Esses itens permanecerão sem crachá, mesmo que correspondam às suas outras regras.

Em seguida, selecione o design de crachá que deseja usar no menu suspenso “Badge to assign” (Crachá a ser atribuído).
Agora, é aqui que ele se torna realmente flexível. Você pode programar quando seus emblemas serão exibidos e escolher quem poderá vê-los.

A opção “Schedule rule” é perfeita para ofertas por tempo limitado.
Quando você o ativar, o plug-in solicitará que você defina as datas de início e término dos seus emblemas.

E se você quiser exibir crachás especiais para determinados clientes, como exibir um crachá de “Desconto VIP” somente para os clientes mais fiéis, também é possível fazer isso.
Para fazer isso, basta selecionar “Only specific users or user roles” na configuração “Show badge to”. Em seguida, digite suas funções de usuário preferidas ou nomes de usuários individuais abaixo dela.
Quando tudo estiver certo, basta clicar em “Save Rule” (Salvar regra) e pronto!

Sinta-se à vontade para visitar o front-end de sua loja e ver os novos emblemas de produtos em ação.
Se estiver usando o tipo de crachá avançado para itens em promoção, você verá que ele exibe a porcentagem de desconto e o dinheiro real economizado, ajudando os clientes a identificar rapidamente as melhores ofertas.

💡 Postagem relacionada: Procurando mais ferramentas e estratégias interessantes para melhorar sua loja WooCommerce? Confira nossa lista dos melhores plugins de WooCommerce.
Método 2: usar código personalizado (gratuito e simples)
Se você não precisar das opções avançadas do primeiro método, ou se estiver procurando uma opção totalmente gratuita, temos um método de código simples que não lhe custará nada.
E se você não se sentir confortável com códigos, não se preocupe! Usaremos o plug-in WPCode para tornar isso muito fácil e seguro. Ele permite que você adicione trechos de código personalizados no WordPress sem precisar ser um desenvolvedor ou correr o risco de danificar seu website.
Usaremos a versão gratuita do WPCode para este tutorial porque ela funciona perfeitamente para nossas necessidades. Dito isso, há uma versão premium com recursos interessantes, como geração de código de IA e modo de teste.
Para obter mais informações, confira nossa análise detalhada do WPCode.
Primeiro, você precisa instalar o plug-in do WordPress em sua área de administração.
Em seguida, vá para Code Snippets ” + Add Snippet. Passe o mouse sobre a seção “Add Your Custom Code (New Snippet)” e, em seguida, clique no botão “+ Add Custom Snippet”.

Em seguida, escolha “PHP Snippet” quando for perguntado sobre o tipo de código.
Isso informa ao WordPress que tipo de código está sendo usado.

Agora, você precisa dar ao snippet um nome que o ajude a lembrar o que ele faz.
Como esse código removerá o emblema de venda padrão do WooCommerce e adicionará emblemas de novos produtos e emblemas de desconto dinâmico, você pode chamá-lo de algo como “Custom WooCommerce Badges” (emblemas personalizados do WooCommerce).
Feito isso, cole o trecho de código que fornecemos abaixo na caixa “Code Preview” (Visualização de código).
Esse código faz algo muito legal. Ele calcula automaticamente as porcentagens de desconto e as mostra no selo de vendas. Além disso, ele adiciona um emblema “Novo” aos produtos adicionados nos últimos 7 dias.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | // Remove default WooCommerce sale flash badge remove_action( 'woocommerce_before_shop_loop_item_title' , 'woocommerce_show_product_loop_sale_flash' , 10 ); remove_action( 'woocommerce_after_shop_loop_item_title' , 'woocommerce_show_product_loop_sale_flash' , 10 ); remove_action( 'woocommerce_before_single_product_summary' , 'woocommerce_show_product_sale_flash' , 10 ); // Add custom badges to products add_action( 'woocommerce_before_shop_loop_item_title' , 'add_custom_product_badges' , 10 ); function add_custom_product_badges() { global $product ; // Initialize a variable to track whether a badge has been displayed $badge_displayed = false; // For products with any amount of discount percentage (1% or more) if ( $product ->is_on_sale() ) { // Get regular and sale prices $regular_price = floatval ( $product ->get_regular_price() ); $sale_price = floatval ( $product ->get_sale_price() ); // Handle variable products if ( $product ->is_type( 'variable' ) ) { // Get variation prices $regular_price = floatval ( $product ->get_variation_regular_price( 'max' , true ) ); $sale_price = floatval ( $product ->get_variation_sale_price( 'min' , true ) ); } // Calculate discount percentage if regular price is valid if ( $regular_price > 0 ) { $discount_percentage = ( ( $regular_price - $sale_price ) / $regular_price ) * 100; // Display badge if discount is 1% or more if ( $discount_percentage >= 1 ) { echo '<span class="product-badge sale-product">' . round ( $discount_percentage ) . '% off!</span>' ; $badge_displayed = true; // Badge has been displayed } } } // Only show the "New" badge if no other badge has been displayed if ( ! $badge_displayed ) { // For "New" products added in the last 7 days $post_date = get_the_time( 'Y-m-d' , $product ->get_id() ); $post_stamp = strtotime ( $post_date ); $newness = 7; // Number of days the product is considered new // Check if the product is new if ( ( time() - ( 60 * 60 * 24 * $newness ) ) < $post_stamp ) { echo '<span class="product-badge new-product">New</span>' ; $badge_displayed = true; } } } |
Deseja ajustar por quanto tempo um produto é considerado “novo”? Basta procurar a linha onde está escrito $newness = 7
no código. Você pode alterar esse número 7 para o número de dias que desejar, como 14 para duas semanas ou 30 para um mês.
Para concluir, clique no botão “Inactive” (Inativo) até que ele mude para “Active” (Ativo) e, em seguida, clique em “Save Snippet” (Salvar snippet).

Em seguida, precisamos estilizar nossos crachás para que tenham uma ótima aparência em seus produtos. Vamos adicionar algumas CSS para ajustar sua aparência.
Para adicionar um novo snippet, siga as mesmas etapas anteriores, mas, dessa vez, escolha “CSS Snippet” quando solicitado.

Dê ao seu snippet um nome descritivo, como “Product Badge Styles”. Isso ajudará você a encontrá-lo facilmente se precisar fazer alterações mais tarde.
Aqui está o código CSS que fará com que seus crachás tenham uma aparência profissional. Basta colá-lo na caixa “Code Preview” (Visualização de código):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* Common styles for all product badges */ .product-badge { position : absolute ; top : -10px ; /* Position at the top edge */ right : -10px ; /* Position at the right edge */ padding : 12px 16px ; border-radius : 50% ; color : #ffffff ; font-size : 16px ; font-weight : bold ; z-index : 99 ; box-shadow : 0 2px 5px rgba ( 0 , 0 , 0 , 0.3 ); } /* Styles for the "New" badge */ .new-product { background-color : #4CAF50 ; /* Green background */ } /* Styles for the "Sale" badge */ .sale-product { background-color : #FF0000 ; /* Red background */ } |
Vamos detalhar o que você pode personalizar nesse código.
Deseja que seus emblemas fiquem em um local diferente? Para fazer isso, você pode alterar os valores superior
e direito
. Por exemplo, alterando top: -10px
para top: 10px
moverá o emblema para baixo.
Não gosta das cores? É muito fácil alterá-las. Basta localizar as linhas de cor de fundo
e substituir os códigos de cores.
Por exemplo, se você quiser um emblema de venda azul em vez de um vermelho, altere #FF0000
para #0000FF
. Você também pode tornar os emblemas maiores ou menores ajustando o valor do tamanho da fonte
.
Deseja saber mais sobre como ajustar esses estilos? Confira nosso guia para iniciantes sobre CSS no WordPress.
Quando terminar, basta clicar no botão “Inactive” (Inativo) para torná-lo “Active” (Ativo) e, em seguida, clicar em “Save Snippet” (Salvar snippet).

É isso aí!
Seus emblemas agora devem aparecer nas imagens dos produtos. Veja um exemplo da aparência do nosso usando nosso código CSS:

Descubra mais dicas e truques do WooCommerce
Agora que você sabe como exibir emblemas de produtos no WooCommerce, talvez queira explorar outras maneiras de melhorar sua loja on-line. Aqui estão alguns guias úteis que recomendamos:
- Aumente as vendas com upselling inteligente – Saiba como promover estrategicamente produtos relacionados e aumentar o valor médio de seus pedidos por meio de táticas eficazes de upsell.
- Recompense as avaliações dos clientes com cupons – Descubra como enviar automaticamente cupons de desconto para os clientes que deixam avaliações de produtos, incentivando mais comentários e compras repetidas.
- Exibir recomendações inteligentes de produtos – Descubra como exibir sugestões de produtos para aumentar suas vendas no WooCommerce.
- Adicione opções avançadas de filtragem de produtos – Aprenda a ajudar os clientes a encontrar exatamente o que estão procurando com filtros de produtos personalizáveis que tornam as compras mais fáceis e rápidas.
- Crie um recurso de lista de desejos do cliente – Veja como a adição de uma função de lista de desejos pode aumentar o engajamento e dar aos compradores um motivo para retornar à sua loja, além de fornecer insights valiosos sobre as preferências do cliente.
- Ocultar preços no WooCommerce – Saiba como ocultar preços para clientes de atacado, catálogos on-line e produtos de luxo e pedir aos compradores que entrem em contato com você ou façam login.
Esperamos que este artigo tenha ajudado você a aprender como adicionar emblemas de produtos no WooCommerce. Talvez você também queira conferir nossas escolhas de especialistas dos melhores plugins de grade de produtos do WooCommerce e nosso guia sobre como acelerar o desempenho do WooCommerce.
Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.