Como Personalizar o Botão Adicionar ao Carrinho do WooCommerce (Sem Código ou Com Código) 

Você configurou sua loja WooCommerce, mas o botão padrão "Adicionar ao carrinho" é cinza claro e se mistura à página. Você quer que ele diga algo mais claro, combine com a cor da sua marca ou tenha um ícone que chame a atenção.

Eu construí páginas de loja WooCommerce com SeedProd e ajustei o texto do botão com WPCode, então mostrarei as opções de botão personalizado de adicionar ao carrinho do WooCommerce que eu realmente uso. Para um redesenho visual completo, uso SeedProd, para uma alteração nativa gratuita, uso Blocos do WooCommerce, e para uma troca rápida de texto ou cor, insiro um trecho de código.

Qual Método Você Deve Usar?

Escolha o método que corresponde à quantidade de controle que você precisa e pelo que está disposto a pagar.

• SeedProd (visual, sem código): Melhor quando você está projetando suas páginas de loja e de produtos e deseja controle total sobre texto, cor, ícone e estilos de passagem do mouse. O design do WooCommerce requer o plano Elite.
• Blocos do WooCommerce (gratuito, nativo): Bom para posicionar o botão e definir o estilo do seletor de quantidade, mas não alterará o texto, a cor ou a tipografia do botão na página do produto individual.
• Trecho de código (ajuste rápido): Melhor para uma alteração rápida de texto ou cor em páginas de produtos individuais e de loja quando você se sente confortável em colar um trecho no WPCode.

Uma coisa que vale a pena dizer logo de cara é que rótulos mais claros e orientados para a ação, como "Comprar Agora" ou "Adicionar à Sacola", tendem a reduzir a hesitação de visitantes de primeira viagem, pois dizem exatamente o que acontecerá em seguida. Essa pequena mudança de redação é frequentemente a vitória mais fácil aqui.

Personalize o Botão Personalizado Adicionar ao Carrinho do WooCommerce com SeedProd

Para o primeiro método, usarei o SeedProd, pois ele permite editar o texto, a cor e o ícone do botão visualmente enquanto você observa a mudança acontecer.

SeedProd é um construtor de sites de arrastar e soltar que permite personalizar qualquer parte da sua loja sem código. Como ele inclui suporte ao WooCommerce, você pode projetar suas páginas de loja e de produtos, incluindo o botão adicionar ao carrinho, com um clique.

Uma observação honesta antes de começar: os recursos de design do WooCommerce do SeedProd exigem o plano Elite. Se você deseja uma opção gratuita, pule para o método WooCommerce Blocks abaixo.

Passo 1. Instale e Ative o SeedProd

Vá para a página de preços do SeedProd e escolha o plano Elite para desbloquear os recursos do WooCommerce. Em seguida, instale e ative o plugin.

Em seguida, vá para SeedProd » Configurações, cole sua chave de licença e clique em Verificar Chave.

Passo 2. Escolha um Kit de Site

Em seguida, vá para SeedProd » Construtor de Temas e clique no botão Temas. Aqui você verá uma biblioteca de Kits de Site que pode importar com um clique.

Procure por kits marcados como "WooCommerce", pois eles são projetados para lojas online.

Escolha um design que você goste, e o SeedProd o carregará em seu Construtor de Temas para que você possa começar a personalizar imediatamente.

Passo 3. Personalize seu Botão Adicionar ao Carrinho

Agora vamos editar o botão adicionar ao carrinho onde ele mais importa: suas páginas de Loja e de Produto.

Personalize o Botão Adicionar ao Carrinho na Página da Loja

Em SeedProd » Construtor de Temas, abra sua Página da Loja e clique em Editar Design.

Selecione o bloco Grade de Produtos, em seguida, abra as configurações de Botões.

• Estilo: Escolha Flat, 2D, Vintage, Ghost ou Link.
• Texto: Altere o rótulo para algo mais claro como "Comprar agora".
• Design: Ajuste cor, tamanho, raio da borda e efeitos de hover em Avançado.

Clique em Salvar quando estiver satisfeito com o estilo do botão.

Personalize o Botão Adicionar ao Carrinho na Página do Produto

Em seguida, abra o modelo da Página de Produto e clique em Editar Design. Selecione o botão adicionar ao carrinho na área de detalhes do produto para editar suas configurações.

• Texto e Alinhamento: Atualize o texto e a posição do CTA.
• Ícone: Adicione um ícone de carrinho ou de check antes/depois do texto com Font Awesome.
• Avançado: Ajuste cores, tipografia, espaçamento e estilos de hover.

Você também pode adicionar o bloco Botão Adicionar ao Carrinho a outros templates, como uma postagem de blog, e inserir um ID de produto para que o botão vincule diretamente a esse item. Eu faço isso quando quero promover um único produto dentro de um artigo.

Passo 4. Salve e Publique Suas Alterações

Quando estiver satisfeito com a aparência das suas páginas WooCommerce, estará pronto para colocar sua loja no ar. Para fazer isso, volte ao Theme Builder e, no canto superior direito, ative a opção Habilitar Tema SeedProd para a posição "Ligado".

Vamos dar uma olhada em algumas das páginas que personalizei, começando pela página da loja.

Aqui está a página do produto com o novo botão.

E aqui está a página de arquivo do produto.

Você também pode usar o mesmo bloco Botão Adicionar ao Carrinho em uma página de blog.

Personalize o Botão Adicionar ao Carrinho com Blocos do WooCommerce (Grátis)

Se o seu tema for um tema de blocos, você pode abrir o botão adicionar ao carrinho no Editor do Site em Aparência » Editor e editar seu template de produto único.

Em seguida, selecione o bloco Adicionar ao Carrinho.

Aqui está o limite honesto que atingi: o bloco nativo de produto único não permite que você altere o texto, a cor ou a tipografia do botão. Sua principal opção é o estilo do seletor de quantidade, que você pode alternar entre um campo de entrada simples e um seletor de mais/menos.

Em grades de loja e arquivo, o bloco Botão de Produto expõe configurações de cor e tipografia, mas o rótulo ainda vem do WooCommerce, então você também não pode reescrevê-lo lá. Para alterar o texto do botão gratuitamente, use o método de snippet de código abaixo.

Para controle total sobre texto, cores, ícones e estilos de passagem em um só lugar, o construtor visual acima oferece o máximo, e você pode personalizar a página da loja WooCommerce no mesmo editor.

Adicione um Botão Personalizado Adicionar ao Carrinho do WooCommerce com Código

Prefere código? Você pode alterar o texto e a cor do botão com pequenos trechos. Por segurança, adicione-os usando um plugin como WPCode em vez de editar os arquivos do tema diretamente.

Como Alterar o Texto do Botão Adicionar ao Carrinho no WooCommerce?

Você altera o texto do botão com um pequeno filtro PHP. O WooCommerce usa um filtro para páginas de produtos únicos e um separado para páginas de loja e arquivo, então cubra ambos se quiser o novo rótulo em todos os lugares.

Este primeiro snippet altera o rótulo em páginas de produtos únicos. Crie um novo snippet PHP no WPCode e cole-o.

add_filter('woocommerce_product_single_add_to_cart_text', 'SP_customize_add_to_cart_button_woocommerce');
function SP_customize_add_to_cart_button_woocommerce() {
  return __('Buy this item', 'woocommerce');
}

Este segundo snippet altera o rótulo nas páginas de loja e arquivo de produtos, onde os produtos são exibidos em uma grade. Adicione-o como seu próprio snippet ao lado do primeiro.

add_filter('woocommerce_product_add_to_cart_text', 'SP_customize_archive_add_to_cart_button_woocommerce');
function SP_customize_archive_add_to_cart_button_woocommerce() {
  return __('Buy this item', 'woocommerce');
}

Salve os snippets e visualize um produto único para ver o novo texto do seu botão.

Se o novo texto não aparecer, limpe o cache da sua página e o cache de objetos. O filtro só altera renderizações recentes, então uma página em cache ou cópia de CDN pode continuar servindo o antigo rótulo "Adicionar ao carrinho" até que você o limpe.

Como Alterar a Cor do Botão Adicionar ao Carrinho no WooCommerce?

Você altera a cor do botão com CSS. Esta primeira regra visa o botão em páginas de produtos únicos.

Acesse Aparência » Personalizar » CSS Adicional e adicione este CSS.

.single-product .product .single_add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

Esta segunda regra estiliza os botões nos arquivos de produtos e na grade da loja, para que a cor corresponda também à página de categoria de produto (arquivo).

.woocommerce .product .add_to_cart_button.button {
  background-color: #FF0000;
  color: #C0C0C0;
}

Vincule um Botão de Comprar de Qualquer Lugar com URLs de Adicionar ao Carrinho

Se você deseja um botão que adicione um produto ao carrinho a partir de uma página de destino, tabela de preços ou postagem de blog, use um URL de adicionar ao carrinho. Vincule para ?add-to-cart=ID&quantity=N, substituindo ID pelo ID do produto e N pela quantidade.

Por exemplo, https://sua-loja.com/?add-to-cart=99&quantity=1 adiciona um do produto 99 ao carrinho quando clicado. É uma maneira limpa de enviar as pessoas diretamente para o checkout sem uma etapa extra.

Mais Maneiras de Personalizar o WooCommerce

A personalização do botão adicionar ao carrinho é apenas uma das muitas maneiras de ajustar sua loja. Para mais personalizações do WooCommerce, consulte os seguintes guias:

• Como Personalizar a Aba Informações Adicionais do WooCommerce
• Como Adicionar o Botão Ver Carrinho no WooCommerce
• Como Alterar o Título da Página da Loja no WooCommerce
• Como Ocultar Produtos Fora de Estoque no WooCommerce

Perguntas Frequentes sobre o Botão Personalizado Adicionar ao Carrinho do WooCommerce

Como altero o texto do botão adicionar ao carrinho nas páginas da loja e de arquivo, não apenas nos produtos individuais?

Páginas de produtos individuais e páginas de loja/arquivo usam filtros diferentes. Use woocommerce_product_single_add_to_cart_text para a página de produto individual e woocommerce_product_add_to_cart_text para as grades da loja e de arquivo.

Adicione ambos os trechos no WPCode para obter o novo rótulo em todos os lugares. Se preferir não mexer no código, altere o texto visualmente no SeedProd.

Preciso de um plugin para personalizar o botão adicionar ao carrinho do WooCommerce, ou posso fazer isso gratuitamente?

Você pode fazer isso gratuitamente com um trecho de código. A versão gratuita do WPCode permite alterar o texto e a cor do botão sem comprar nada.

O design visual do WooCommerce do SeedProd requer o plano Elite, mas ele oferece o máximo controle sobre texto, cor, ícones e estilos de hover em um só lugar.

Como personalizo o botão adicionar ao carrinho usando blocos do WooCommerce ou o Editor de Site?

Abra Aparência » Editor em um tema de blocos, edite seu modelo de produto individual e selecione o bloco Adicionar ao Carrinho. O bloco nativo é limitado: na página do produto individual, sua principal opção é o estilo do seletor de quantidade, um campo de entrada simples ou um controle deslizante de mais/menos.

Isso não alterará o texto, a cor ou a tipografia do botão lá. Para isso, use um trecho de código ou o construtor visual do SeedProd.

Por que o texto personalizado do meu botão adicionar ao carrinho não está aparecendo?

A causa mais comum é o cache. Um plugin de cache, cache de objeto ou CDN pode servir uma versão antiga da página, então o filtro altera o rótulo apenas em renderizações novas.

Limpe o cache da sua página e o cache de objeto, depois recarregue. Verifique também se você adicionou o filtro correto para o tipo de página, já que páginas individuais e de arquivo usam separadamente.

Personalize Seu Botão Adicionar ao Carrinho do WooCommerce Hoje

Aquele botão cinza simples agora é um call to action claro e alinhado à sua marca, que diz aos compradores exatamente o que fazer a seguir. Escolha o método que se adapta à sua loja, seja a opção gratuita WooCommerce Blocks, um trecho de código rápido ou SeedProd para uma reformulação visual completa.

Você também pode gostar desta postagem: Como Editar um Menu no WordPress para Navegação Personalizada.

Comece com o SeedProd Hoje

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.