Deseja personalizar o botão Adicionar ao carrinho do WooCommerce?
A personalização de botões em sua loja WooCommerce pode ajudá-lo a chamar a atenção, melhorando as taxas de conversão e as vendas.
Neste artigo, mostraremos como adicionar um botão personalizado add-to-cart no WooCommerce, passo a passo.
Por que personalizar o botão Adicionar ao carrinho do WooCommerce?
Editing your add to cart button helps you align it to the WooCommerce products you sell. If you stick with the default cart button, it may be completely unrelated to the product type.
Por exemplo, talvez você queira alterar o texto de adicionar ao carrinho e substituí-lo por um ícone ou caixa de seleção para vários produtos. Como alternativa, talvez você queira alterar a cor do botão para que ele se destaque mais em seu site.
Você também pode querer mostrar os botões de carrinho em outros lugares do site WooCommerce, como na página de checkout, nas categorias e na página do carrinho de compras.
Para realizar qualquer uma das ações acima, você precisará de uma maneira de personalizar o botão Adicionar ao carrinho de forma fácil e com o mínimo de esforço.
Como adicionar o botão personalizado Adicionar ao carrinho no WooCommerce
Felizmente, compartilhamos dois métodos para criar um botão personalizado de adicionar ao carrinho do WooCommerce. O primeiro método usa um plug-in fácil e poderoso do WordPress, e o segundo método mostra como personalizar os botões do carrinho manualmente sem um plug-in.
Método 1: 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
Primeiro, vá até a página de preços do SeedProd e escolha seu plano SeedProd. Para acessar os recursos do WooCommerce, você precisará do plano SeedProd Elite.
Em seguida, faça login na sua conta SeedProd, clique na guia Downloads e faça download do arquivo .zip do plug-in. Você também pode copiar a chave de licença na mesma página.
Agora você pode carregar o plug-in em seu site do WordPress. Se precisar de ajuda com isso, siga este guia sobre como instalar e ativar um plug-in do WordPress.
Depois de instalar o SeedProd, vá para a página SeedProd " Settings e cole a chave de licença que você salvou anteriormente.
Certifique-se de clicar no botão Verify Key (Verificar chave ) antes de ir para a próxima etapa.
Observação: o SeedProd permite que você adicione botões personalizados de adição ao carrinho ao WooCommerce de duas maneiras:
- Usando uma página de destino
- Criação de um tema personalizado do WooCommerce
Para este tutorial, criaremos um tema personalizado do WooCommerce porque ele cria todas as páginas da sua loja do WooCommerce automaticamente.
Etapa 2. Escolha um kit de site
Para a próxima etapa, navegue até a página SeedProd " Theme Builder. É aqui que você pode criar as diferentes partes do seu tema WooCommerce e personalizar o design de cada modelo.
Você pode fazer isso criando cada parte do zero ou usando um kit de site pré-fabricado. Escolheremos a segunda opção porque é mais fácil e mais rápida.
Para escolher um Website Kit, clique no botão Temas.
Na próxima tela, você verá os kits de site disponíveis. Os kits compatíveis com o WooCommerce terão "WooCommerce" ao lado de seus títulos.
Em seguida, passe o mouse sobre um design de sua preferência e clique no ícone de marca de seleção para importá-lo para o Theme Builder.
Para este guia, estamos usando o Pottery Shop WooCommerce Website Kit.
Depois de importar o Website Kit, você verá as partes individuais do seu tema em uma lista como esta:
O SeedProd cria automaticamente páginas de conteúdo, como as páginas sobre, carrinho, checkout e contato. Você pode visualizar essas páginas acessando Pages " All Pages no painel do WordPress e personalizá-las com o construtor de páginas de arrastar e soltar do SeedProd.
Vamos começar o processo de personalização personalizando o botão Adicionar ao carrinho do WooCommerce.
Etapa 3. Personalize seu botão Add to Cart
Below we’ll show you how to add a custom add to cart button in WooCommerce on your Shop, Product, Product Archives, and Blog pages.
Adição de um botão Adicionar ao carrinho na página da loja personalizada
Primeiro, começaremos editando sua página de loja do WooCommerce. Para fazer isso, localize a parte do modelo Shop Page e clique no link Edit Design.
Sua página de loja do WooCommerce será aberta no construtor de páginas de arrastar e soltar do SeedProd, onde você pode personalizar seu design sem código.
Você pode clicar na visualização ao vivo para editar qualquer elemento da página e personalizar suas configurações. Da mesma forma, você pode arrastar blocos do painel esquerdo e soltá-los em sua página para adicionar mais conteúdo.
Por padrão, o modelo Shop Page usa o bloco Products Grids (Grades de produtos ). Ao clicar nele, você verá as configurações para controlar a aparência das listagens de produtos.
Por exemplo, você pode alterar o número de colunas, filtrar produtos por ID do produto, consulta ou tipo e alterar a ordem de exibição.
Você também pode clicar na guia Advanced (Avançado ) para ver mais opções de personalização, incluindo estilos de fonte, cores, bordas e muito mais.
Na seção Buttons, você pode personalizar o botão Adicionar ao carrinho do WooCommerce com apenas alguns cliques. Por exemplo, no menu suspenso Button Style (Estilo do botão), você pode escolher:
- Plano
- 2D
- Vintage
- Fantasma
- Link
Além disso, você pode alterar a cor, a tipografia, o tamanho e o raio da borda do botão.
Experimente as opções de personalização para encontrar um visual que atenda às necessidades de sua empresa. Em seguida, pressione o botão Save (Salvar ) no canto superior direito para armazenar suas alterações e clique no ícone X para retornar ao Theme Builder.
Como alterar o botão Adicionar ao carrinho da página do produto
Agora vamos dar uma olhada na personalização do botão Adicionar ao carrinho em páginas de produtos individuais. Você precisará localizar o modelo Product Page e clicar no link Edit Design para abri-lo.
Dessa vez, você verá os detalhes de um único produto no editor visual do SeedProd.
Por padrão, ele será exibido:
- Imagem do produto
- Título do produto
- Preço do produto
- Descrição resumida
- Botão Adicionar ao carrinho
- Abas de dados do produto
Você pode personalizar cada elemento clicando neles para mostrar suas configurações. Por exemplo, ao clicar no botão Adicionar ao carrinho, você pode alterar o texto do botão para algo mais atraente.
Você também pode alterar o alinhamento do botão e adicionar um ícone da biblioteca de ícones do Font Awesome.
A guia Advanced permitirá que você altere as cores, a tipografia, as sombras e o espaçamento dos botões como antes.
Edição do botão do carrinho de compras dos arquivos de produtos
A alteração do botão Adicionar ao carrinho nos Arquivos de produtos segue um processo semelhante ao da página da loja. Basta localizar a parte do modelo Product Archives e clicar no link Edit Design para abri-lo no editor visual.
O bloco que a SeedProd usa nessa página é o bloco Archive Products. Os usuários verão essa página se clicarem em um título de categoria de produto ou usarem a barra de pesquisa da sua loja.
Esse bloco não exibirá uma visualização no editor visual em tempo real; no entanto, você ainda pode personalizar o que o bloco mostra no front-end abrindo suas configurações.
Por exemplo, você pode alterar o número de colunas, mostrar itens por contagem e ordenar por filtro. Além disso, você pode ativar a filtragem por Consulta, como:
- Consulta por atributo
- Selecionar por tags
- Selecionar por categoria
- Selecionar por SKU de produto
- Selecionar por grupo
- Selecionar por visibilidade
Em seguida, na guia Advanced (Avançado ), você pode personalizar o botão Adicionar ao carrinho alterando suas cores, fonte, espaçamento, tamanho e muito mais.
Adição de um botão personalizado Adicionar ao carrinho na página do blog
A página do seu blog é outro local em que você pode exibir um botão adicionar ao carrinho. Dessa forma, você pode recomendar produtos após as postagens do blog para aumentar as vendas.
Para fazer isso com o SeedProd, localize o modelo Blog Page e clique no link Edit Design.
Por padrão, a página do blog exibirá uma lista das últimas publicações do blog, mas você pode personalizá-la para incluir qualquer outro conteúdo que desejar.
Vamos adicionar uma seção a essa página para apresentar um novo produto. Primeiro, arraste um bloco de colunas para a página e escolha um layout de coluna.
Em seguida, selecione o bloco Image (Imagem ) e adicione uma imagem do produto.
Na segunda coluna, você pode usar os blocos Heading e Paragraph para o título e a descrição do produto. Em seguida, arraste o botão Add to Cart para que os usuários possam adicionar o produto ao carrinho de compras.
Agora, clique no bloco para abrir suas configurações e adicionar seu texto personalizado do botão Adicionar ao carrinho.
Você também precisará do ID do produto para esse produto específico. Você pode encontrá-lo acessando Products " All Products no painel do WordPress e copiando o valor do ID.
Depois, você pode colar o ID no campo ID do produto no botão Adicionar ao carrinho. Isso garantirá que o produto específico seja adicionado ao seu carrinho depois de clicar no URL Adicionar ao carrinho.
Lembre-se de clicar no botão Save (Salvar ) para salvar suas alterações.
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
Método 2: Adicionar um botão personalizado Adicionar ao carrinho do WooCommerce com código
O próximo método que mostraremos a você envolve a alteração do código em seu site do WordPress. Normalmente, não recomendamos fazer isso se você for um iniciante, pois isso pode danificar seu site.
Dito isso, entendemos que algumas pessoas não querem substituir completamente o design do site existente.
Antes de começar, sugerimos a criação de um tema filho para garantir que você não perca suas alterações ao atualizar o tema do WordPress. Você também deve fazer backup do seu site do WordPress para restaurá-lo com segurança se algo der errado.
Como lidaremos com trechos de código para esse método, é uma boa ideia instalar um plug-in de trechos de código, como o WPCode. Isso significa que você não precisará editar os arquivos do tema diretamente.
Quando tiver tudo pronto, você poderá começar a adicionar manualmente botões personalizados de adicionar ao carrinho no WooCommerce.
Alterar o texto do botão Adicionar ao carrinho nas páginas de produtos
Primeiro, veremos como alterar o texto do botão Adicionar ao carrinho no WooCommerce. Por exemplo, você pode querer alterar o texto do botão para "Buy This Item".
Para fazer isso, crie um trecho de código personalizado no WPCode e cole o seguinte código PHP:
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 as alterações e, em seguida, ao visualizar um único produto, você verá o novo texto do botão Adicionar ao carrinho.
Alterar a cor do botão Adicionar ao carrinho
Se quiser alterar a cor do botão Adicionar ao carrinho, você precisará adicionar um CSS personalizado. Você pode fazer isso acessando Appearance " Customize " Additional CSS no painel do WordPress.
Agora, cole o seguinte código CSS:
.single-product .product .single_add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}Você pode fazer o mesmo com suas páginas de arquivo de produtos colando o seguinte trecho de código CSS:
.woocommerce .product .add_to_cart_button.button {
background-color: #FF0000;
color: #C0C0C0;
}
More Ways to Customize WooCommerce
Customizing the add-to-cart button is just one of the many ways to tweak your store. For more WooCommerce customizations, please see the following guides:
- How to Customize the WooCommerce Additional Information Tab
- Como adicionar o botão Exibir carrinho no WooCommerce
- Como alterar o título da página da loja no WooCommerce
- Como criar uma impressionante galeria de imagens de produtos no WooCommerce
- Como adicionar classificação por estrelas às páginas de produtos do WooCommerce
- How to Display Related Products in WooCommerce
- Como exibir categorias e tags de produtos no WooCommerce
- Como obter e exibir descrições de produtos no WooCommerce
- How to Display Featured Products in WooCommerce
- Como corrigir o problema de não funcionamento do WooCommerce View Cart
- How to Hide Out of Stock Products in WooCommerce
Aí está!
Esperamos 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, fique à vontade para deixar um comentário com perguntas e feedback.
Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.
