Se você administra uma loja WooCommerce, o botão padrão "Adicionar ao carrinho" pode parecer simples e fácil de ignorar. Ao personalizá-lo, você pode trocar o texto por algo mais persuasivo como "Comprar agora", mudar a cor para combinar com sua marca ou até adicionar um ícone para chamar a atenção.
Personalizar o botão adicionar ao carrinho do WooCommerce o torna mais relevante para seus produtos e marca, o que ajuda a aumentar cliques e vendas.
Neste guia, vou mostrar maneiras simples de personalizar o botão adicionar ao carrinho no WooCommerce para que ele se ajuste à sua loja e ajude a aumentar cliques.
Passos para personalizar o botão adicionar ao carrinho do WooCommerce:
Personalize o Botão Adicionar ao Carrinho do WooCommerce com o SeedProd
Para o primeiro método, usaremos o SeedProd, o melhor construtor de sites para WordPress.
Este poderoso plugin inclui um construtor de páginas de arrastar e soltar que permite personalizar qualquer parte do seu site sem código. Você pode criar temas personalizados para WordPress, criar páginas de destino de alta conversão e personalizar qualquer layout com um clique.
Como o SeedProd inclui suporte ao WooCommerce, você pode usá-lo para projetar e lançar sites WooCommerce inteiros sem um desenvolvedor. Siga os passos abaixo para usar o SeedProd e adicionar um botão personalizado de adicionar ao carrinho ao seu site WooCommerce.
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.
Dica Bônus: Adicione um Botão Adicionar ao Carrinho em Posts de Blog
Se você deseja promover produtos no conteúdo do seu blog, abra o modelo da Página do Blog, adicione uma seção de duas colunas com uma imagem e detalhes do produto, em seguida, arraste o bloco Botão Adicionar ao Carrinho. Insira o ID do produto para que o botão vincule diretamente ao item.
Passo 4. Salve e Publique Suas Alterações
Quando estiver satisfeito com a aparência das suas páginas WooCommerce, você estará pronto para colocar sua loja no ar. Para fazer isso, volte ao Theme Builder e, no canto superior direito, ative o controle deslizante Ativar Tema SeedProd para a posição ‘Ligado’.
Vamos dar uma olhada em algumas das páginas que personalizamos:
Página da Loja
Página do Produto
Página de Arquivo
Página do Blog
Adicione um Botão Personalizado de 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
Crie um novo snippet PHP no WPCode e cole este código para substituir “Adicionar ao carrinho” pelo seu próprio texto.
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');
}
Salve o snippet e, em seguida, visualize um produto individual para ver o novo texto do seu botão.
Como Alterar a Cor do Botão Adicionar ao Carrinho no WooCommerce
Vá para Aparência » Personalizar » CSS Adicional e adicione este CSS para alterar a cor do botão nas páginas de produtos individuais.
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}Para estilizar botões em arquivos de produtos ou na grade da loja, use este seletor:
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
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 Adicionar ao Carrinho do WooCommerce
display: none;. Some plugins also let you disable it for specific products.border-radius for rounded corners.Espero que este artigo tenha ajudado você a aprender como adicionar um botão personalizado de adicionar ao carrinho no WooCommerce.
Você também pode gostar deste post: Como Editar um Menu no WordPress para Navegação Personalizada.
Pronto para personalizar seus botões de adicionar ao carrinho do WooCommerce?
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.
