Última atualização - 24 de fevereiro de 2020

Quando você oferece descontos em sua loja WooCommerce, o selo de venda é adicionado automaticamente ao(s) produto(s). Embora isso possa atrair a atenção de seus clientes em potencial para o produto, pode haver casos em que você deseja oferecer o produto com desconto imediatamente sem atrair a atenção do usuário. Alguns lojistas também gostariam de personalizar o selo de venda com base em seus requisitos. Eles podem personalizar o selo para torná-lo mais atraente, alterar o texto e a cor e assim por diante.

Neste artigo, veremos como remover facilmente o selo de venda em sua loja WooCommerce. Também analisaremos maneiras de personalizar o selo de venda.

Removendo o selo de venda do WooCommerce

Você pode remover o selo de venda do WooCommerce de duas maneiras simples:

1. Fragmento de código
2. CSS

Os métodos listados acima podem ser substituídos por alguns temas. Assim, você mesmo pode testar e usar o método desejado.

1. Usando trecho de código

Abaixo está uma captura de tela mostrando os emblemas de venda de produtos na página da loja, por padrão.

Adicione o trecho de código abaixo no arquivo functions.php do seu tema de site ativado. O snippet de código é aplicável tanto à página da loja quanto às páginas de produtos individuais.

 add_filter('woocommerce_sale_flash', 'lw_hide_sale_flash');
função lw_hide_sale_flash()
{
retorna falso;
}

Dica: Leia nosso artigo de blog para saber como atualizar um trecho de código para o arquivo functions.php.

A captura de tela abaixo mostra a página da loja sem os emblemas de venda do WooCommerce. Você pode notar que o preço de venda ainda é aplicado.

2. Usando CSS

Você pode adicionar o snippet CSS usando o WordPress Customizer. Abra o Personalizador e clique em CSS Adicional , conforme mostrado na captura de tela abaixo. Você também pode observar os selos de venda visíveis para os produtos.

Adicione o trecho abaixo ao site.

 .woocommerce span.onsale{
Mostrar nenhum;
}

O WordPress irá visualizar as alterações atualizadas. O selo de venda agora ficará oculto nas páginas da loja e do produto. Você pode clicar no botão Publicar para salvar as alterações. A captura de tela abaixo mostra como o CSS deve ser adicionado e a alteração atualizada. ou seja, selo de venda removido.

Personalizando o selo de venda do WooCommerce

Em vez de remover completamente o selo de venda, você pode optar por personalizá-lo. Você pode alterar o texto, cor, posição, adicionar imagem, agendá-lo, automatizá-lo e fazer muito mais. Analisaremos algumas das personalizações que você pode fazer com trechos de código e plugins.

1. Usando trechos de código

Veremos alguns snippets de código básicos que ajudam você a personalizar o selo de venda de diferentes maneiras.

1) Alterando o Texto do Selo de Venda

Vamos alterar o texto do selo de venda do padrão "Venda" para "Desconto da oferta". Para fazer isso, adicione o trecho de código abaixo no arquivo functions.php do seu tema de site ativado.

 add_filter('woocommerce_sale_flash', 'lw_replace_sale_text');
function lw_replace_sale_text( $html) {
return str_replace( __( 'Venda!', 'woocommerce' ), __( 'Oferta de desconto', 'woocommerce' ), $html );
}

No snippet de código acima, você pode substituir o texto 'Offer Discount' pelo texto desejado.

A captura de tela abaixo mostra como o texto do emblema de venda atualizado é exibido.

2) Substituindo o texto do selo de venda por uma imagem

Você pode adicionar uma imagem em vez do texto padrão. Novamente, você precisa adicionar o trecho de código abaixo ao arquivo functions.php do seu tema de site ativado.

 add_filter('woocommerce_sale_flash', 'lw_custom_sales_badge');
function lw_custom_sales_badge() {
$img = '<img width="100px" height="100px" src="http://demostore.com/wp-content/uploads/2019/02/Sale-Red-Tag.png"></img> ';
retorna $img;
}

Ao usar o trecho de código acima, não se esqueça de substituir o valor da URL no atributo src da tag <img> .

A captura de tela abaixo mostra a imagem personalizada adicionada em vez do selo de venda. Você deve observar que a posição da imagem pode diferir em outros temas.

2. Usando plug-ins

Existem vários plugins no mercado, que fazem mais do que apenas alterar o texto e a cor do selo de venda do WooCommerce. Os plugins oferecem mais controle e permitem que você personalize diferentes aspectos do selo de venda.

Alguns dos principais plug-ins de gerenciamento de crachá do WooCommerce são:

1. Plugin YITH Badge Management – ​​Este plugin permite que você personalize o texto, cor, design e posição. O plugin também possui uma atribuição automática de crachás com base em categorias, designs de crachás predefinidos e fácil gerenciamento de todos os crachás.
2. Etiquetas de produtos avançados do WooCommerce – Você pode aplicar crachás em um indivíduo ou em um conjunto de produtos. Ele também calculará o desconto percentual e mostrará o valor com desconto no selo. Existem várias condições, como tipo de produto, preço de venda, quantidade em estoque, etc., com as quais você pode configurar as etiquetas.
3. Woo Badge Manager – Você pode criar designs atraentes usando texto, imagens e ícones. Ele também possui um cronômetro de contagem regressiva de vendas, a data de validade do emblema e mais de 60 designs de emblemas para mimá-lo com muitas opções.
4. Gerenciamento de crachás de produtos WooCommerce – Você pode configurar crachás para produtos individuais, categorias ou um crachá genérico para todos os produtos. Tem muitos crachás embutidos para escolher, permite posicionar o crachá, controlar a opacidade, preenchimento e raio do crachá.
5. WordPress WooCommerce Badge Manager Plugin – Configure crachás para produtos individuais, bem como com base nas categorias de produtos. Ele também atribuirá automaticamente um selo 'Novo' para todos os novos produtos de sua loja.
6. Badge Management for WooCommerce – Este plugin também ajuda a personalizar o texto, a cor e a posição do emblema. Você pode criar conjuntos e também atribuir emblemas para categorias de produtos. Você pode usar as imagens embutidas ou fazer upload de sua imagem personalizada. Ele também permite definir um período de validade, alterar o preenchimento, a cor do plano de fundo ou até ocultar o selo de venda do WooCommerce.

Para entender mais recursos de cada um dos plugins acima, leia nosso artigo no blog. PS, também discutimos algumas das práticas recomendadas para usar selos de produto no artigo. Não perca!

Se você preferir entender usando um tutorial em vídeo, assista ao vídeo abaixo.

Você também pode assistir ao vídeo para conferir os principais plug-ins de gerenciamento de crachás. Alguns dos plugins podem ser adicionados ou removidos da lista de plugins acima, no vídeo.

Conclusão

Os crachás de vendas são uma ótima maneira de atrair a atenção do cliente e aumentar as vendas em sua loja WooCommerce. Embora possa funcionar bem para alguns donos de lojas, alguns podem considerá-lo desnecessário. Discutimos maneiras de remover o selo de venda do WooCommerce usando um snippet de código e CSS. E também discutimos maneiras de personalizar os crachás de venda na forma de um trecho de código e plugins.

Alguns trechos de código são substituídos por temas. Portanto, é melhor testá-los e usá-los. No entanto, testamos todos os trechos de código e eles funcionam bem com nosso tema. Se você está procurando mais personalização, sempre há plugins!

Você pode conferir artigos de blog sobre WordPress Basics, WordPress Security & Performance ou customizações do WooCommerce para aprender sobre diferentes aspectos do WordPress e WooCommerce.

Ou continue explorando o LearnWoo para mais artigos incríveis.