Como adicionar um botão de adicionar ao carrinho personalizado no WooCommerce

Quer aprender como adicionar um botão de adicionar ao carrinho personalizado no 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 de adicionar ao carrinho no WooCommerce passo a passo.

Por que personalizar o botão Adicionar ao carrinho do WooCommerce?

Editar seu botão de adicionar ao carrinho ajuda a alinhá-lo aos produtos WooCommerce que você vende. Se você ficar com o botão de carrinho padrão, ele pode não estar relacionado ao tipo de produto.

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, você pode alterar a cor do botão para se destacar mais em seu site.

Você também pode querer mostrar os botões do carrinho em outros lugares do seu site WooCommerce, como sua página de checkout, categorias e página do carrinho de compras.

Para fazer qualquer um dos itens acima, você precisará de uma maneira de personalizar seu botão de adicionar ao carrinho facilmente, com o mínimo de barulho.

Como adicionar o botão Add-to-Cart personalizado no WooCommerce

Felizmente, compartilhamos 2 métodos para criar um botão de adicionar ao carrinho personalizado do WooCommerce. O primeiro método usa um plugin WordPress fácil e poderoso, e o segundo método mostra como personalizar os botões do carrinho manualmente sem um plugin.

Método 1: Adicionar um botão Adicionar ao carrinho personalizado com 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 do WordPress, criar páginas de destino de alta conversão e personalizar qualquer layout com apontar e clicar.

Como o SeedProd inclui suporte ao WooCommerce, você pode usá-lo para projetar e lançar sites WooCommerce inteiros sem um desenvolvedor. Siga as etapas abaixo para usar o SeedProd para adicionar um botão personalizado de adicionar ao carrinho ao seu site WooCommerce.

Etapa 1. Instale e ative o SeedProd

Primeiro, vá para 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 baixe o arquivo .zip do plugin. Você também pode copiar a chave de licença na mesma página.

Agora você pode fazer o upload do plugin para o seu site WordPress. Se você precisar de ajuda com isso, siga este guia sobre como instalar e ativar um plugin do WordPress.

Depois de instalar o SeedProd, vá para a página SeedProd »Configurações e cole a chave de licença que você salvou anteriormente.

Certifique-se de clicar no botão Verificar chave antes de ir para a próxima etapa.

Nota: O SeedProd permite adicionar botões personalizados de adicionar ao carrinho ao WooCommerce de 2 maneiras:

• Usando uma página de destino
• Criando um tema personalizado do WooCommerce

Para este tutorial, criaremos um tema WooCommerce personalizado porque ele cria todas as suas páginas de loja 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 construindo cada parte do zero ou usando um kit de site pré-fabricado. Vamos com a segunda opção porque é mais fácil e rápido.

Para escolher um Website Kit, clique no botão Temas .

Na próxima tela, você verá os kits de sites disponíveis. Os kits compatíveis com WooCommerce terão “WooCommerce” ao lado de seus títulos.

Você pode passar o mouse sobre um design que você gosta e clicar no ícone de marca de seleção para importá-lo para o seu Theme Builder.

Para este guia, estamos usando o Kit de site WooCommerce da Pottery Shop .

Após importar seu 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 suas páginas sobre, carrinho, checkout e contato. Você pode visualizar essas páginas acessando Páginas » Todas as páginas do seu painel do WordPress e personalizá-las com o construtor de páginas de arrastar e soltar do SeedProd.

Vamos iniciar o processo de personalização personalizando o botão Adicionar ao carrinho do WooCommerce.

Etapa 3. Personalize seu botão Adicionar ao carrinho

Abaixo, mostraremos como adicionar um botão personalizado de adicionar ao carrinho no WooCommerce em suas páginas de loja, produto, arquivo de produto e blog.

Adicionando um botão Adicionar ao carrinho de página de loja personalizada

Primeiro, começaremos editando sua página de loja WooCommerce. Para fazer isso, localize a parte do modelo Página da loja e clique no link Editar design .

Sua página da loja 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 template Shop Page usa o bloco Products Grids . 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 Avançado para ver mais opções de personalização, incluindo estilos de fonte, cores, bordas e muito mais.

Na seção Botões, você pode personalizar seu botão de adicionar ao carrinho do WooCommerce com apenas alguns cliques. Por exemplo, na lista suspensa Estilo do botão, você pode escolher:

• Apartamento
• 2D
• Vintage
• Fantasma
• Link

Além disso, você pode alterar a cor do botão, tipografia, tamanho e raio da borda.

Experimente as opções de personalização para encontrar uma aparência que atenda às suas necessidades de negócios. Em seguida, clique no botão Salvar no canto superior direito para armazenar suas alterações e clique no ícone X para retornar ao Construtor de temas.

Alterando o botão Adicionar ao carrinho da página do produto

Agora vamos ver como personalizar o botão adicionar ao carrinho em páginas de produtos individuais. Você precisará encontrar o modelo de página do produto e clicar no link Editar design para abri-lo.

Desta vez, você verá os detalhes do produto único dentro do editor visual do SeedProd.

Por padrão, ele exibirá:

• Imagem do Produto
• Título do produto
• Preço do produto
• Pequena descrição
• Botão adicionar ao carrinho
• Guias de dados do produto

Você pode personalizar cada elemento clicando neles para mostrar suas configurações. Por exemplo, clicar no botão adicionar ao carrinho permite 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 Avançado permitirá que você altere as cores dos botões, tipografia, sombras e espaçamento como antes.

Editando o botão do carrinho de arquivos do produto

A alteração do botão adicionar ao carrinho em seus Arquivos de produtos segue um processo semelhante à página da sua loja. Basta encontrar a parte do modelo Product Archives e clicar no link Edit Design para abri-lo no editor visual.

O bloco que o SeedProd usa nesta página é o bloco Archive Products . Os usuários verão esta página se clicarem em um título de categoria de produto ou usarem a barra de pesquisa da sua loja.

Este bloco não exibirá uma visualização no editor visual ao vivo; 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 habilitar a filtragem por Consulta, como:

• Consulta por atributo
• Selecionar por tags
• Selecionar por categoria
• Selecionar por produto SKU
• Selecionar por grupo
• Selecionar por visibilidade

Em seguida, na guia Avançado , você pode personalizar o botão adicionar ao carrinho alterando suas cores, fonte, espaçamento, tamanho e muito mais.

Adicionando um botão de adicionar ao carrinho personalizado na página do blog

A página do seu blog é outro lugar onde você pode exibir um botão de 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, encontre o modelo de página do blog e clique no link Editar design .

Por padrão, sua página de blog exibirá uma lista de suas postagens mais recentes, mas você pode personalizá-la para incluir qualquer outro conteúdo que desejar.

Vamos adicionar uma seção a esta página apresentando um novo produto. Primeiro, arraste um bloco de colunas para a página e escolha um layout de coluna.

Em seguida, escolha o bloco Imagem e adicione uma imagem do produto.

Na segunda coluna, você pode usar os blocos Título e Parágrafo para o título e a descrição do seu produto. Em seguida, arraste o botão Adicionar ao carrinho para que os usuários possam adicionar o produto ao carrinho de compras.

Agora, clique no bloco para abrir suas configurações e adicione o texto do botão de adicionar ao carrinho personalizado.

Você também precisará do ID do produto para esse produto específico. Você pode encontrá-lo acessando Produtos » Todos os produtos 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 um produto específico seja adicionado ao seu carrinho depois de clicar no URL Adicionar ao carrinho.

Lembre-se de clicar no botão Salvar para salvar suas alterações.

Etapa 4. Salve e publique suas alterações

Quando estiver satisfeito com a aparência das suas páginas WooCommerce, você estará pronto para tornar sua loja online. Para fazer isso, volte para o Theme Builder e, no canto superior direito, gire o botão Enable SeedProd Theme para a 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 de adicionar ao carrinho personalizado com código

O próximo método que mostraremos envolve alterar o código em seu site WordPress. Normalmente, não recomendamos fazer isso se você for iniciante, pois pode quebrar seu site.

Dito isso, entendemos que algumas pessoas não querem substituir completamente o design do site existente.

Antes de começar, sugerimos criar um tema filho para garantir que você não perca suas alterações ao atualizar seu tema WordPress. Você também deve fazer backup do seu site 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 seus arquivos de tema diretamente.

Quando tiver tudo pronto, você pode 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 “Comprar este 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 suas alterações e, quando visualizar um único produto, verá o novo texto do botão adicionar ao carrinho.

Alterar a cor do botão Adicionar ao carrinho

Se você quiser alterar a cor do botão de adicionar ao carrinho, precisará adicionar um CSS personalizado. Você pode fazer isso acessando Aparência » Personalizar » CSS adicional do seu 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 para suas páginas de arquivo de produtos colando o seguinte snippet de código CSS:

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

Aí está!

Esperamos que este artigo tenha ajudado você a aprender como adicionar um botão de adicionar ao carrinho personalizado 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. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.