Se você administra uma loja WooCommerce, o botão padrão "Adicionar ao carrinho" pode parecer simples e fácil de perder. Ao personalizá-lo, você pode trocar o texto por algo mais persuasivo, como "Buy Now" (Compre agora), alterar a cor para combinar com sua marca ou até mesmo adicionar um ícone para chamar a atenção.
A personalização do botão Adicionar ao carrinho do WooCommerce o torna mais relevante para seus produtos e sua marca, o que ajuda a aumentar os cliques e as vendas.
Neste guia, mostrarei maneiras simples de personalizar o botão Adicionar ao carrinho no WooCommerce para que ele se adapte à sua loja e ajude a aumentar os cliques.
Etapas para personalizar o botão Adicionar ao carrinho do WooCommerce:
- Etapa 1. Instalar e ativar o SeedProd
- Etapa 2. Escolha um kit de site
- Etapa 3. Personalize seu botão Add to Cart
- Etapa 4. Salvar e publicar suas alterações
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.
Esse poderoso plug-in 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 o WordPress, criar páginas de destino de alta conversão e personalizar qualquer layout com o recurso de apontar e clicar.
Como o SeedProd inclui suporte ao WooCommerce, você pode usá-lo para projetar e lançar sites inteiros do WooCommerce sem um desenvolvedor. Siga as etapas abaixo para usar o SeedProd e adicionar um botão personalizado de adicionar ao carrinho ao seu site do WooCommerce.
Etapa 1. Instalar e ativar 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 plug-in.
Em seguida, vá para SeedProd " Settings, cole sua chave de licença e clique em Verify Key.
Etapa 2. Escolha um kit de site
Em seguida, vá para SeedProd " Theme Builder e clique no botão Themes (Temas ). Aqui você verá uma biblioteca de Website Kits que pode importar com um clique.
Procure os kits marcados como "WooCommerce", pois eles são projetados para lojas on-line.
Escolha um design de sua preferência e o SeedProd o carregará no Theme Builder para que você possa começar a personalizá-lo imediatamente.
Etapa 3. Personalize seu botão Add to Cart
Agora vamos editar o botão Adicionar ao carrinho onde é mais importante: nas páginas Shop e Product.
Personalize o botão Adicionar ao carrinho na página da loja
No SeedProd " Theme Builder, abra sua Shop Page e clique em Edit Design (Editar design).
Selecione o bloco Products Grid e abra as configurações dos botões.
- Estilo: Escolha Flat, 2D, Vintage, Ghost ou Link.
- Texto: Altere o rótulo para algo mais claro, como "Buy Now".
- Design: Ajuste a cor, o tamanho, o raio da borda e os efeitos de foco em Advanced.
Clique em Save quando estiver satisfeito com o estilo do botão.
Personalizar o botão Adicionar ao carrinho na página do produto
Em seguida, abra o modelo Product Page e clique em Edit 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 da CTA.
- Ícone: adicione um ícone de carrinho ou de verificação antes/depois do texto com Font Awesome.
- Avançado: Ajuste as cores, a tipografia, o espaçamento e os estilos de foco.
Dica de bônus: Adicionar um botão Adicionar ao carrinho às postagens do blog
Se quiser promover produtos no conteúdo do seu blog, abra o modelo Blog Page, adicione uma seção de duas colunas com uma imagem e detalhes do produto e, em seguida, arraste o bloco Add to Cart Button (Botão Adicionar ao carrinho ). Insira o ID do produto para que o botão seja vinculado diretamente ao item.
Etapa 4. Salvar e publicar suas alterações
Quando estiver satisfeito com a aparência das páginas do WooCommerce, você estará pronto para colocar sua loja no ar. Para fazer isso, volte ao Theme Builder e, no canto superior direito, coloque o botão Enable SeedProd Theme na posição "On".
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
Adicionar um botão personalizado Adicionar ao carrinho do WooCommerce com o 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 plug-in como o WPCode em vez de editar diretamente os arquivos do tema.
Como alterar o texto do botão Adicionar ao carrinho no WooCommerce
Crie um novo snippet PHP no WPCode e cole esse código para substituir "Add to cart" por 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 único produto para ver o novo texto do botão.
Como alterar a cor do botão Adicionar ao carrinho no WooCommerce
Vá para Appearance " Customize " Additional CSS e adicione este CSS para alterar a cor do botão em páginas de produtos individuais.
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}Para estilizar botões nos arquivos de produtos ou na grade da loja, use esse 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 obter mais personalizações do WooCommerce, consulte os seguintes guias:
- Como personalizar a guia Informações adicionais do WooCommerce
- Como adicionar o botão Exibir 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;. Alguns plug-ins também permitem que você o desative para produtos específicos.border-radius para cantos arredondados.Espero que este artigo tenha ajudado você a aprender como adicionar um botão personalizado de adicionar ao carrinho no WooCommerce.
Talvez você também goste desta postagem: Como editar um menu no WordPress para navegação personalizada.
Pronto para personalizar seus botões de adicionar ao carrinho do WooCommerce?
Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.
