3 maneiras eficazes de personalizar e editar a página de checkout do WooCommerce

Procurando a melhor maneira de editar a página de checkout do WooCommerce ?

Aprender a personalizar a página de checkout do WooCommerce permite mais controle sobre seu design e aumenta o potencial de mais vendas.

‍ Neste tutorial detalhado, mostraremos três maneiras sem código de personalizar a página de checkout, incluindo ajustar totalmente o design e/ou alterar os campos que aparecem na página de checkout.

Também abordaremos todos os recursos integrados que o WooCommerce oferece para personalizar a experiência de checkout.

Vamos começar…

Razões para editar a página de checkout do WooCommerce

Existe uma razão óbvia para modificar a página de checkout do WooCommerce para começar? Depende. O módulo de checkout integrado é limpo, funcional e rápido o suficiente para processar pagamentos sem incomodar seus clientes.

Mas você também pode notar suas desvantagens. Aqui estão os principais motivos pelos quais você pode querer editar a página de checkout do WooCommerce :

• Para substituir os elementos de marca padrão do WooCommerce, como suas fontes predefinidas, estilos e o roxo do WooCommerce.
• Para adicionar itens da Web relacionados à sua empresa, como um logotipo, cores de marca e links para documentação de suporte.
• Se for necessário otimizar o checkout para conversões após o teste.
• Para acelerar o processo de checkout, convertendo-o em uma etapa.
• Incorporar upsells, cross-sells e produtos relacionados.
• Para adicionar campos personalizados ou remover alguns campos fornecidos pelo WooCommerce.
• Para modificar as opções de envio.
• Para alterar elementos de design, como texto de botão, texto de campo predefinido e opções de checkout de convidado.

Como editar a página de checkout do WooCommerce

Você tem várias opções disponíveis para editar a página de checkout do WooCommerce. O método que funciona melhor para você dependerá das edições específicas que você está tentando fazer e se está ou não aberto a usar um plug-in.

Abaixo, abordaremos três dos melhores métodos:

1. Configurações nativas do WooCommerce – WooCommerce inclui muitas opções internas para personalizar o checkout, que detalharemos no primeiro método. Seu tema também pode oferecer suas próprias opções para personalizar o design da página de checkout.
2. Elementor Pro – O Elementor Pro agora oferece seu próprio widget de checkout que permite personalizar totalmente o design da página de checkout. Esta é uma ótima opção se você deseja editar especificamente o design da página.
3. Editor de Campos de Checkout – esta é uma ótima opção se você quiser editar os campos de formulário que aparecem na página de checkout. Você pode usá-lo para adicionar novos campos, remover campos padrão e reorganizar tudo conforme necessário.

Vamos passar por eles..

Método 1: Use as configurações de checkout padrão do WooCommerce

O WooCommerce oferece configurações integradas para editar seu módulo de checkout, e seu tema WordPress já pode fornecer ferramentas para ajustar alguns campos e configurações de checkout no WordPress Customizer.

É sempre aconselhável verificar essas configurações antes de procurar um plugin, tema ou personalizador de campo adicional, pois você já pode ter os recursos necessários.

Por exemplo, o WooCommerce tem ferramentas para remover certos campos, habilitar taxas de impostos durante o checkout e mostrar campos de cupom.

Etapa 1: adicionar cálculos de impostos e um campo de cupom na finalização da compra

O WooCommerce possui configurações integradas para automatizar cálculos de impostos e aceitar cupons no checkout.

Para ativar/desativar, vá para WooCommerce > Configurações no WordPress.

Escolha a guia Geral e role para baixo até a seção Habilitar impostos . Marque a caixa para Ativar alíquotas e cálculos de impostos durante a finalização da compra. Isso gera e exibe taxas de impostos com base nas taxas que você configura no WooCommerce ( WooCommerce > Configurações > Impostos > Taxas padrão ).

Marque a caixa para Ativar o uso de códigos de cupom para mostrar um campo onde os clientes podem digitar códigos de desconto.

Se você preferir não mostrar determinados elementos, basta remover as caixas de seleção. Certifique-se de clicar no botão Salvar para ver suas alterações no frontend.

Etapa 2: exibir preços de produtos com ou sem impostos

Uma coisa é calcular os impostos no final do checkout, mas você também deve decidir se deseja incluir impostos no custo total dos produtos, especialmente à medida que os clientes passam pelo checkout.

Em geral, isso mostra mais transparência, em vez de aumentar o preço com imposto logo antes do cliente pagar.

Para incluir impostos com preços no processo de checkout, acesse WooCommerce > Configurações > Impostos .

Role para baixo na página para encontrar o campo "Exibir preços durante o carrinho e a finalização da compra".

Escolha no menu suspenso:

• Incluindo taxas
• Excluindo impostos

Clique em Salvar alterações .

Etapa 3: definir quais itens de envio são exibidos na finalização da compra

Além disso, em WooCommerce > Configurações , você pode marcar qual zona de envio, métodos e cálculos aparecem no checkout do WooCommerce.

Basta acessar a guia Frete e ajustar:

• Cálculos: para habilitar a calculadora de frete na página do carrinho
• Cálculos: para ocultar os custos de envio no checkout até que um endereço seja inserido
• Destino de envio: para definir endereços de envio padrão na finalização da compra

Clique em Salvar alterações .

Etapa 4: gerenciar contas e privacidade no checkout

Enquanto permanece em WooCommerce > Configurações , vá para a guia Contas e privacidade .

Na parte superior da página, você verá dois campos:

• Check-out de convidados: incluir/remover check-outs de convidados e logins de contas existentes
• Criação de conta: permite que os clientes criem uma conta ou iniciem uma assinatura durante o checkout

Continue na página Contas e privacidade para encontrar a área Política de privacidade .

Preencha a caixa de texto Política de Privacidade do Checkout para garantir que os clientes vejam a política quando fizerem o checkout. Deixe o campo em branco se preferir não exibir uma política de privacidade nessa área.

Etapa 5: escolha a página de checkout real e outras configurações avançadas

Navegue até a guia Avançado para revelar uma seção de configuração de página ; isso faz com que os comerciantes digam ao WooCommerce para onde enviar os clientes quando eles fizerem o check-out.

Por padrão, o WooCommerce gera as páginas Carrinho , Checkout , Minha Conta e Termos e Condições , que você pode encontrar acessando Páginas > Todas as páginas no WordPress.

No entanto, você tem a opção de gerar uma página totalmente nova e vinculá-la aqui. Isso substitui as páginas de checkout padrão e envia os clientes para as personalizadas.

Outra opção na guia Avançado é Force Secure Checkout , que requer um certificado SSL.

Passo 6: Altere o design de checkout do seu tema no WordPress Customizer

Os temas do WordPress com funcionalidade WooCommerce geralmente instalam ferramentas do WordPress Customizer para ajustar facilmente o estilo do checkout.

Tenha em mente que todos os temas WooCommerce oferecem configurações exclusivas do WordPress Customizer (alguns não têm nenhuma configuração), mas no geral, vale a pena verificar o WordPress Customizer para controle rápido sobre o checkout.

Para começar, vá para Aparência > Personalizar no WordPress.

Se disponível, seu tema deve exibir um botão WooCommerce em algum lugar no WordPress Customizer. Clique nisso.

Este é apenas um exemplo com o tema Storefront (então você pode não ver a mesma coisa), mas é bastante comum que os temas tenham uma guia Checkout no Personalizador. Escolha isso, ou algo semelhante, que possa indicar controle sobre o checkout.

Percorra todas as configurações de checkout oferecidas pelo seu tema. No tema Storefront, você pode tornar estes campos opcionais, obrigatórios ou ocultos:

• Campo do nome da empresa
• Campo da linha de endereço 2
• Campo de telefone

Também é possível destacar os campos obrigatórios com um asterisco.

Por fim, o tema Storefront oferece opções para mostrar uma página de Política de Privacidade e Termos e Condições no final do checkout.

Método 2: Use um construtor de páginas para editar os campos de checkout do WooCommerce e o estilo geral

Construtores de páginas como Elementor, Beaver Builder e Themify oferecem widgets de conteúdo WooCommerce para substituir o que está atualmente na página de checkout do WooCommerce.

Os criadores de páginas reservam quase exclusivamente seus módulos de checkout do WooCommerce para seus planos Premium, portanto, há uma boa chance de você ter que pagar por essa funcionalidade. Por exemplo, você recebe o widget Elementor Checkout com o plano Pro.

Dito isto, um construtor de páginas oferece controle quase completo sobre sua página de checkout, por isso é uma maneira fácil de editar o checkout do WooCommerce sem conhecimento de codificação e apenas por cerca de US $ 50 a US $ 100 por ano.

Neste tutorial, mostraremos como a personalização de checkout geralmente funciona com um construtor de páginas, usando o Elementor.

Etapa 1: abra a página de checkout designada no Elementor

Para editar o checkout do WooCommerce no Elementor, você deve acessar a página Checkout criada automaticamente pelo WooCommerce. Encontre isso em Páginas > Todas as páginas .

Abra a página chamada “Página de checkout” e clique em Editar com Elementor .

Etapa 2: remova o shortcode de checkout do WooCommerce

O WooCommerce adicionou automaticamente seu “WooCommerce checkout” no editor, que renderiza o módulo de checkout padrão do WooCommerce.

O objetivo é trocar isso por um módulo de checkout do seu construtor de páginas. Portanto, exclua o shortcode de checkout do WooCommerce.

Etapa 3: insira o widget Elementor Checkout

Agora é hora de encontrar o widget de checkout do seu construtor de páginas. A Elementor oferece um chamado Checkout , que você pode encontrar usando a barra de pesquisa ou navegando no título WooCommerce. Clique e arraste o widget Checkout para a página em branco, onde diz "Arraste o widget aqui".

Observação: você pode não ver o widget Checkout se não tiver atualizado para a versão Premium do Elementor. Este é o caso da maioria dos construtores de páginas.

Etapa 4: personalize o conteúdo, o estilo e os recursos avançados

Depois de arrastar o widget de checkout, o Elementor renderiza a visualização do checkout. Você pode clicar nessas guias à esquerda para personalizar todos os aspectos do checkout:

Como exemplo, você pode alternar o Layout geral para uma coluna e ajustar o texto do espaço reservado para o campo de nome.

Outras guias de personalização incluem:

• Detalhes de faturamento
• informação adicional
• Seu pedido
• Cupom
• Pagamento

Também existem infinitas maneiras de editar o checkout do WooCommerce na guia Estilo .

Use estas abas:

• Seções
• Tipografia
• Formulários
• resumo do pedido
• Botão de compra

Como exemplo, trocamos o botão azul Comprar por um verde.

Por fim, a guia Avançado oferece ferramentas ainda mais poderosas para editar:

• Layouts
• Efeitos de movimento
• Transformações
• Planos de fundo
• Fronteiras
• Máscaras
• Capacidade de resposta
• Atributos
• CSS customizado

Contanto que você mantenha a página definida anteriormente como “Página de checkout” para WooCommerce e troque o código de acesso de checkout do WooCommerce pelo widget de checkout do construtor de páginas, você pode salvar as alterações e concluir o processo!

Método 3: Instale um plug-in personalizador para editar campos

Existem muitos plugins de personalização de checkout WooCommerce, como:

A maioria dos plug-ins de checkout do WooCommerce fornece ferramentas de personalização adicionais para modificar e adicionar campos, mas existem alguns para reformular completamente o design, como o plug-in Multi-step Checkout.

Sugerimos que você analise todos os plugins recomendados acima, mas passaremos por um tutorial rápido com o plugin Checkout Field Editor para ajudá-lo a entender como editar o checkout do WooCommerce com um plugin.

Passo 1: Instale e ative o plugin Checkout Field Editor

Instale o plug-in Checkout Field Editor e, em seguida, percorra o processo de ativação do plug-in.

Uma vez ativo, o plugin adiciona uma nova aba no WordPress, que você pode acessar acessando WooCommerce > Checkout Form .

Etapa 2: editar os campos atuais

O plug-in exibe todos os campos atuais dentro do checkout do WooCommerce, exceto que o plug-in agora é vinculado ao checkout padrão do WooCommerce, para que você tenha controle total sobre os campos.

Você pode editar:

• Campos de cobrança
• Campos de envio
• Campos Adicionais

Para editar os campos de checkout do WooCommerce, clique em Editar ao lado do campo que deseja alterar. Para este exemplo, modificaremos o campo Nome da empresa .

Na janela Editar campo , você pode modificar as opções do campo, como:

• Etiqueta
• Espaço reservado
• Valor padrão
• Classe
• Validação

Também é possível desmarcar a caixa Obrigatório , para que os clientes não sejam obrigados a preencher o campo. Você também pode desabilitar o campo para que ele não apareça no checkout. Certifique-se de clicar em Salvar e Fechar .

O plug-in geralmente salva tudo depois disso, mas você pode clicar no botão Salvar alterações novamente para garantir que funcione.

Como você pode ver, removemos o campo Nome da empresa da área de checkout.

E desapareceu do checkout do front-end.

Você também pode querer editar algo como o texto do espaço reservado . Nesse caso, é o mesmo processo de abrir o campo em questão e alterar as configurações.

O campo Nome em nosso checkout agora revela um novo texto de espaço reservado.

Etapa 3: adicione um novo campo ao checkout do WooCommerce

Para adicionar um campo totalmente novo, clique no botão Adicionar campo .

Escolha o Tipo de campo, escolhendo entre opções como:

• Texto
• Número
• Escondido
• Senha
• Telefone
• Caixa de seleção
• Mês
• URL
• e muitos mais

Como exemplo, criaremos um campo Número e pediremos aos clientes que digitem seu Número de Recompensas de Fidelidade. Você também pode designar elementos como espaços reservados, valores padrão e se é um campo obrigatório.

Certifique-se de marcar a caixa Ativado e clique em Salvar e Fechar .

Etapa 4: veja os resultados

No back-end, você verá o novo campo de checkout na parte inferior da lista. Ele é colocado no final por padrão, mas você pode clicar e arrastar para reordenar.

E o novo campo também aparece no módulo de checkout do frontend.

Crie a página de checkout perfeita hoje

Recomendamos começar com as configurações padrão de checkout do WooCommerce para ver se elas ajudam a alcançar os resultados desejados. Para edições mais avançadas, considere usar campos personalizados. E para personalizações avançadas, mas relativamente fáceis de implementar, use um dos construtores de páginas sugeridos.

Quais são suas principais dúvidas sobre como editar o checkout do WooCommerce? Compartilhe seus pensamentos nos comentários!