O Guia Completo para o WooCommerce Checkout – Personalização, Mudança de Modelo, Criação de Checkout de Uma Página

O WooCommerce é um plugin flexível e poderoso que você pode usar para transformar seu site WordPress em uma loja de comércio eletrônico dinâmica. Entretanto, se você estiver procurando reduzir o abandono do carrinho de compras, conduzir conversões e aumentar a receita, é importante prestar atenção cuidadosa à sua página de checkout do WooCommerce.

Há tantas maneiras diferentes de estilizar e editar a página de checkout no WooCommerce. Se você está começando sua primeira loja on-line e procurando entender como esta página funciona, ou se você quer melhorar a experiência de checkout em seu site WooCommerce existente, nós temos você coberto.

Neste post, explicaremos o que é a página de checkout do WooCommerce e como ele funciona. Em seguida, vamos lhe mostrar as muitas opções que você tem para estilizar, mudar e aproveitar para otimizar as conversões usando plugins, código, temas e muito mais.

Vamos entrar logo!

Uma visão geral da página de checkout do WooCommerce

Quando você monta sua primeira loja WooCommerce, o plugin cria e atribui automaticamente uma página de checkout. Se você visualizá-la na parte frontal do seu site, você notará que é bastante simples:

Por padrão, o WooCommerce pede aos clientes algumas informações básicas. Isto inclui:

• Detalhes de faturamento
• Nome e sobrenome
• Nome da empresa
• Endereço (Cidade/Cidade, País, Distrito e Código Postal/ZIP)
• Número de telefone
• Endereço de e-mail
• Notas de encomenda
• Declaração de política de privacidade

Esta é uma informação importante a ser incluída em uma página de checkout do WooCommerce. Ela fornece os detalhes necessários para que um cliente complete sua compra, e para que o site processe suas informações de pagamento.

Entretanto, não há nada aqui que esteja necessariamente ajudando a aumentar as conversões ou a reduzir o abandono das caixas. Além disso, a página padrão pode não oferecer as informações mais relevantes ou úteis para seu negócio específico. Portanto, como muitos proprietários de sites WooCommerce, você pode estar procurando mudar tanto o design quanto o conteúdo de sua página de checkout.

Antes de entrarmos nas diferentes formas de personalizar a página de checkout no WooCommerce, há algumas coisas a entender primeiro.

Vamos falar sobre onde encontrar esta página, assim como as várias configurações e recursos padrão disponíveis dentro do plugin WooCommerce.

Onde encontrar a página e as configurações padrão do WooCommerce Checkout

O WooCommerce cria automaticamente uma página de checkout para sua loja assim que você ativa o plugin. Você pode localizá-la navegando para Páginas > Checkout em seu painel de administração:

Você pode editar esta página exatamente como faria com qualquer conteúdo WordPress. Por exemplo, você pode alterar o título e permalink da página, adicionar uma imagem em destaque, modificar os atributos da página, etc. Também usa o atalho [woocommerce_checkout]:

Há um punhado de opções padrão para configurar esta página, algumas das quais você pode encontrar em WooCommerce > Settings > Advanced:

Nesta tela, sob a seção Configurar Página, você pode selecionar uma página diferente para usar como tela de checkout para sua loja. Você também tem a opção de forçar uma conexão HTTPS segura.

Na página Configurações gerais, você pode permitir que os cupons sejam usados no checkout, e configurar como os impostos serão calculados:

Na aba Contabilidade e Privacidade, você também pode encontrar algumas opções para criação de contas e checkouts de convidados:

Abaixo disso, há uma seção de Política de privacidade onde você pode modificar o texto da política de privacidade que aparece na página de checkout:

Além destas configurações integradas, você tem opções limitadas para personalizar sua página de checkout usando apenas o plugin WooCommerce. Felizmente, existem outros métodos que você pode usar para melhorar sua aparência e ampliar sua funcionalidade.

Por que você pode querer mudar sua página de checkout do WooCommerce

A página de checkout é a última coisa que os clientes vêem antes de concluir suas compras. Ela pode fazer a diferença entre se eles acabam convertendo ou abandonando seu site completamente.

Como tal, é essencial garantir que sua página de checkout do WooCommerce seja bem projetada e funcione de forma a incentivar conversões. Há muitas maneiras de você proporcionar uma experiência melhor, como por exemplo, por

• Mudando o design e o modelo da página
• Criando um checkout de uma página
• Acréscimo, remoção ou rearranjo de campos
• Mudança de etiquetas de campo de entrada e texto de botão
• Exigindo o preenchimento de certos campos
• Acionar automaticamente o envio gratuito
• Vinculação direta de produtos à página de checkout

Quer você queira revisar completamente a página padrão ou fazer pequenas modificações, o importante é que você seja capaz de fazer isso com facilidade. Felizmente, você tem várias opções.

Métodos que você pode usar para mudar sua página de checkout do WooCommerce

Há muitas maneiras de mudar sua página de checkout do WooCommerce. A melhor para usar depende de um punhado de fatores, tais como a edição específica que você está tentando fazer e seu nível de conforto com a codificação.

Alguns dos métodos que você pode usar para melhorar sua página de checkout do WooCommerce incluem:

• Características do WooCommerce, blocos e códigos de atalho. O WooCommerce vem com alguns recursos e configurações embutidos que você pode usar para melhorar sua loja. Por exemplo, você pode acionar automaticamente o envio gratuito, assim como vincular diretamente os produtos à página de checkout. Há também blocos e atalhos para modificar a página.
• Plugins e extensões. Se você não é especialista em tecnologia ou simplesmente quer uma maneira rápida e sem complicações de melhorar sua página de checkout do WooCommerce, há muitos plugins que você pode usar. A maioria é fácil de começar e requer pouco suporte. Alguns complementos são fornecidos pelo WooCommerce e disponíveis na biblioteca de extensão, enquanto outros são desenvolvidos e oferecidos por plataformas de terceiros.
• Modelos de páginas e temas. Se você quiser mudar o estilo da sua página de checkout, você pode usar um modelo ou tema pré-construído. Assim como os plugins, esta é uma opção sólida se você tiver experiência limitada em codificação e quiser fazer mudanças na aparência geral da página, a fim de combinar melhor com sua marca. A desvantagem é que ela não oferece tanta flexibilidade quanto uma codificação personalizada.
• Código personalizado. Outro método que você pode utilizar para alterar a página de checkout do WooCommerce é a codificação personalizada. Este é um caminho poderoso se você estiver confortável editando os arquivos do seu site e quiser adicionar muita personalização.

Nas seções seguintes, daremos uma olhada em algumas das mudanças mais efetivas que você pode fazer em sua página de WooCommerce. Para cada uma delas, explicaremos porque você pode querer fazer a edição, e o acompanharemos através dos diferentes métodos que você pode usar para fazer a edição.

Como personalizar os campos checkout do WooCommerce

Uma das mudanças mais comuns que você pode fazer em uma página do WooCommerce é modificar seus campos de forma. Estes normalmente ocupam o maior espaço na página, portanto, precisam ser relevantes. Quer você queira remover campos, reorganizar seu pedido ou adicionar novos campos personalizados, você tem um par de opções para fazer isso. Você pode usar um plugin ou editar o código diretamente.

Usando um Plugin para mudar os campos de checkout do WooCommerce

Se você deseja uma maneira rápida e simples de personalizar os campos de checkout no WooCommerce, recomendamos o uso de um plugin. Há um punhado de opções para escolher.

Um dos mais populares é o plug-in do Checkout Field Editor:

Esta é uma ferramenta freemium que lhe permite adicionar ou editar os campos do formulário em sua página de checkout do WooCommerce. Você pode ativar ou desativar certos campos, assim como reorganizar seus pedidos.

Embora a versão gratuita permita que você administre estas tarefas básicas, o WooCommerce Checkout Field Editor Pro vem com funcionalidade adicional. Isto inclui 17 tipos de campo e ganchos personalizados.

Para usar este plugin, você pode instalá-lo em seu site WooCommerce navegando para Plugins > Adicionar novo e depois procurando por ele. Uma vez encontrado, clique no botão Install Now, seguido por Activate.

Quando estiver ativado, você pode configurar as configurações indo para WooCommerce > Formulário de Checkout:

Há três tipos diferentes de campos que você pode editar:

1. Faturamento
2. Expedição
3. Adicional

Você pode selecionar qualquer campo que queira alterar e depois clicar no botão Remover, Habilitar ou Desabilitar. Para adicionar um novo campo, selecione Adicionar campo.

Se você quiser mudar um campo de formulário existente, selecione a caixa à esquerda, e clique no botão Editar. Um painel será aberto onde você poderá alterar o tipo de campo (somente na versão premium), editar a etiqueta do campo, escolher se ele será necessário, e muito mais:

Quando terminar, clique no botão Salvar. Quando terminar de fazer todas as mudanças desejadas nos campos da página de checkout, não se esqueça de clicar em Salvar mudanças na parte inferior da tela.

Para uma orientação mais detalhada, você pode consultar a documentação do WooCommerce sobre o uso do plug-in do Checkout Field Editor.

É claro, este é apenas um dos muitos plugins que você pode usar para mudar seus campos de checkout do WooCommerce. Outras opções que vale a pena considerar incluem os Flexible Checkout Fields e WooCommerce Checkout Manager, que discutiremos mais adiante neste post.

Editando os campos de checkout usando código

Outra opção para editar os campos em sua página de checkout do WooCommerce é usar uma codificação personalizada. Naturalmente, isto requer um certo nível de conhecimento técnico e conforto ao trabalhar com os arquivos do seu site. A vantagem é que você tem mais flexibilidade em termos de personalização do que você teria com um plugin de terceiros.

Você pode editar seus campos de checkout usando as funções.php do seu site e filtros como, por exemplo:

• woocommerce_checkout_fields
• woocommerce_billing_fields
• Woocommerce_shipping_fields

As ações e filtros do WooCommerce permitem manipular os campos de checkout quase da maneira que você desejar. Por exemplo, você pode removê-los completamente, adicionar novos campos ou alterar o texto exibido. Usando o filtro woocommerce_checkout_fields permitirá que você sobreponha qualquer campo.

Digamos que você queira alterar o texto do espaço reservado para o campo order_comments. Por padrão, ele é definido como o seguinte:

_x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')

Para mudá-lo, você pode adicionar este trecho de código ao seu arquivo functions.php:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function custom_override_checkout_fields( $fields ) {

$fields['order']['order_comments']['placeholder'] = 'My new placeholder';

return $fields;

}

Para remover um campo, você pode usar o seguinte:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

unset($fields['order']['order_comments']);

return $fields;

Há muitas mudanças que você pode fazer nos campos em sua página de checkout, portanto não vamos explorar todas elas aqui. Você pode encontrar uma lista útil de códigos de campo de anulação de checkout no GitHub

Como mudar o modelo da página de checkout do WooCommerce

Por padrão, seu modelo de página de checkout do WooCommerce será baseado no tema do seu site. Mas talvez você queira alterar o design para melhor se adequar à sua marca ou talvez queira apenas fazer pequenas alterações no conteúdo da página modelo.

Os dois principais métodos que você pode usar para mudar isso são o uso de um modelo pré-construído ou a adição de código. Vamos começar com o primeiro.

Começando com um modelo pré-construído para personalizar sua página de checkout

A maneira mais fácil de mudar o design de sua página de checkout do WooCommerce é instalando um tema pré-construído, como os da Loja de Temas do WooCommerce. Há uma variedade de opções gratuitas disponíveis, bem como temas premium.

Você pode pesquisar por temas de checkout de uma página, por exemplo, ou qualquer outro tipo de modelo específico que esteja interessado em utilizar. Você também pode encontrar muitos temas de WooCommerce no Envato Market.

Usando código para personalizar o modelo de página de checkout do WooCommerce

Se você estiver confortável para editar o código, você também pode alterar manualmente o modelo da página de checkout. Dependendo do seu provedor de hospedagem, você poderá fazer isso através do Gerenciador de Arquivos no cPanel ou de um cliente SFTP (Secure File Transfer Protocol).

Você pode usar hooks de ação para adicionar, editar ou remover elementos de sua página de checkout. Há nove ganchos de ação principais que o WooCommerce usa para a página de checkout:

• woocommerce_before_checkout_form
• woocommerce_checkout_before_customer_details
• woocommerce_checkout_billing
• woocommerce_checkout_shipping
• woocommerce_checkout_after_customer_details
• woocommerce_checkout_before_order_review
• woocommerce_checkout_order_review
• woocommerce_checkout_after_order_review
• Woocommerce_after_checkout_form

Estes ganchos de ação acrescentam marcas à página, que você pode usar para personalizar tanto seu estilo quanto sua funcionalidade. Se você quiser usar estes ganchos de ação para modificar seu modelo de página de checkout, você pode fazê-lo editando o arquivo PHP do formulário de checkout.

Você pode localizar os arquivos de modelos do WooCommerce em /woocommerce/templates. A partir do diretório raiz do seu site, você precisará navegar para wp-content/plugins/woocommerce:

Dentro destes arquivos, há ganchos que você pode usar para adicionar e reorganizar o conteúdo na página de modelo, sem realmente editar os arquivos de modelo. Para criar um modelo de tema personalizado para sua página de checkout, você precisará primeiro criar uma pasta “woocommerce/checkout” dentro da pasta do seu tema.

A seguir, copie o modelo da página de checkout do WooCommerce, que você pode encontrar em woocommerce/templates/checkout/form-checkout.php:

Em seguida, adicione-a à nova pasta que você acabou de criar. Depois disso, você pode editar o arquivo para fazer as alterações desejadas. Quando você salvar o arquivo, o plugin do WooCommerce carregará este modelo e substituirá o modelo de página padrão.

Como criar um checkout de uma página do WooCommerce

Uma das maneiras de melhorar a experiência de checkout para seus clientes, e no processo reduzir as taxas de abandono, é torná-la o mais rápida e simples possível. Se você quiser encurtar o processo de checkout, pode fazê-lo criando um checkout de uma página no WooCommerce.

Há várias maneiras de fazer isso. Como mencionamos anteriormente, você pode procurar por um tema de uma página ou modelo que fornecerá uma única página de checkout. Entretanto, se você gostar do seu tema atual, talvez não queira mudá-lo.

Se for esse o caso, não se preocupe. Existem outras opções, como a extensão premium WooCommerce One Page Checkout:

Como esta solução foi desenvolvida pelo WooCommerce, você sabe que ela é segura, confiável e oferece muito apoio. Além de permitir que você transforme qualquer página em uma página de checkout, ela vem com uma infinidade de recursos para otimizar o processo de checkout de uma página.

Você pode:

• Mostrar tanto a seleção do produto quanto os formulários de checkout em uma página.
• Permitir que os clientes adicionem ou removam itens do seus carrinhos.
• Deixe que os clientes completem os pagamentos sem sair da página.
• Adicionar campos personalizados às páginas.

Após adquirir a extensão através de sua conta WooCommerce, você pode baixar o plugin, e depois instalá-lo e ativá-lo em seu site WooCommerce.

Para utilizá-lo, navegue até Páginas > Adicionar novo e selecione o ícone de One Page Checkout na barra de ferramentas do editor:

No painel que se abre, você pode clicar dentro do campo Produtos, e começar a digitar o nome do(s) produto(s) que você deseja adicionar.

Em seguida, escolha o modelo que você deseja usar (Lista de Produtos, Tabela de Produtos, Tabela de Preços, ou Produto Único) e clique em Criar código de atalho.

Você também pode inserir manualmente o atalho de uma página em qualquer postagem ou página. Para saber mais sobre este plugin e como utilizá-lo, você pode consultar a documentação do WooCommerce One Page Checkout.

Como acionar o envio gratuito durante o processo de checkout do WooCommerce

Como empresário de comércio eletrônico, há muitas estratégias diferentes que você pode utilizar para incentivar seus clientes a gastar mais. Uma delas é oferecer frete grátis.

É claro, você pode não querer oferecer frete gratuito em cada pedido. Entretanto, adicioná-lo como um incentivo em totais de pedidos que atinjam um determinado valor pode ajudá-lo a incentivar os compradores a gastar mais do que eles gastariam de outra forma.

Portanto, você pode querer configurar sua página de checkout do WooCommerce para acionar automaticamente o envio gratuito em pedidos acima de um certo número, tais como $100.

A primeira coisa que você precisará fazer é oferecer o método de envio gratuito para a(s) zona(s) marítima(s) relevante(s).

Para isso, navegue para WooCommerce > Configurações > Expedição:

Passe o mouse sobre a zona de embarque que você deseja modificar, e depois clique no link Editar. Se você ainda não tiver adicionado nenhuma zona, selecione primeiro o botão Adicionar zona de embarque e siga as instruções antes de prosseguir.

A seguir, clique em Add Shipping Method. No modal que se abre, selecione Free Shipping no menu suspenso, seguido por Add shipping method novamente:

Em seguida, a partir da lista de métodos de envio na página de configurações, passe o mouse sobre o envio gratuito e clique no link Editar.

Será aberto um painel de ajustes de envio gratuito. No menu suspenso Free shipping requires…., selecione Um valor mínimo de encomenda:

Você pode então definir o valor mínimo do pedido. Quando terminar, clique no botão Salvar mudanças.

Como vincular diretamente os produtos à página de checkout do WooCommerce

Outra maneira de melhorar a experiência de checkout para seus clientes é criar links diretos de checkout. Isto é útil para enviar os clientes diretamente para o checkout a partir das páginas de produtos e vendas.

Criação manual de um link direto de checkout

Para criar e adicionar um link direto de checkout no WooCommerce, você pode usar a seguinte URL: exampledomain.com//checkout/?add-to-cart=ID.

Nota: você vai querer substituir “exampledomain” e “ID” por seu nome de domínio e o ID do produto específico que você está vinculando à página de checkout.

Para encontrar um ID de produto, navegue até Produtos > Todos os produtos em seu painel de administração. Navegue até o produto para o qual você deseja criar o link direto, e depois passe o mouse sobre o nome do produto para revelar o número de identificação do produto:

Uma vez que você cole o ID do produto na URL acima mencionada, você pode então colocar o link em qualquer lugar em seu site WooCommerce. Você pode repetir este processo para cada um do seus produtos, mesmo itens variáveis e agrupados.

Criando um link direto de checkout usando um plugin

Compreendemos que a estratégia acima pode não ser o método mais eficiente para todos os usuários. Dependendo de quantos produtos você tenha em sua loja WooCommerce, isso pode ser muito demorado.

Felizmente, se você estiver procurando um método mais rápido, você também pode usar o plugin Direct Checkout para WooCommerce:

Esta ferramenta freemium permite simplificar o processo de checkout de várias maneiras, inclusive adicionando um link direto de uma página de produto para a tela de checkout. Uma vez instalado e ativado o plugin em seu site WooCommerce, navegue até WooCommerce > Direct Checkout:

Na guia Geral, selecione Sim para a opção de redirecionamento Adicionar ao carrinho e, em seguida, selecione Checkout no menu suspenso Adicionar ao carrinho redirecionar para o menu suspenso. Clique em Salvar mudanças quando terminar.

A seguir, navegue até a guia Produtos:

Habilite o Redirecionamento para a página do carrinho após a opção de adição bem sucedida. Novamente, clique no botão Salvar mudanças. É isso aí!

Como testar sua página de checkout do WooCommerce

Neste ponto, esperamos que você tenha implementado uma variedade de maneiras para melhorar sua página de checkout do WooCommerce. Agora, é essencial ter certeza de que seu processo de checkout está funcionando corretamente, a fim de reduzir o abandono e confirmar que nenhum erro interromperá a viagem do cliente.

Felizmente, há uma maneira fácil de enviar uma ordem de teste e pagamento através de sua loja WooCommerce, para ter certeza de que tudo está funcionando como deveria. Para fazer isso, você precisará primeiro instalar o plugin WooCommerce Payments em seu site (se ainda não o fez):

Uma vez instalado e ativado o plugin, você pode ativar o ‘modo teste’. Para isso, navegue para WooCommerce > Pagamentos > Configurações:

Lembre-se de salvar suas mudanças.

Uma vez ativado o Modo de Teste, você pode navegar em sua loja WooCommerce e selecionar qualquer produto. Adicione-o ao seu carrinho de compras e depois passe para a página de checkout.

Preencha os campos da página de checkout do formulário, conforme necessário. Para as informações de pagamento, você pode usar qualquer um dos números de cartão de crédito fictício fornecidos pelo WooCommerce. Você também pode usar quaisquer três dígitos para o código CVC, e selecionar qualquer data futura.

Quando terminar, clique em Place Order. A seguir, navegue para a tela Pagamentos > Transações:

Aqui, você deve ver a carga aparecer. Se ela estiver lá, você sabe que sua página de checkout está funcionando como deveria. Lembre-se de desligar o Modo de Teste quando terminar!

Os Melhores Plugins e Extensões de WooCommerce Checkout

Ao longo deste post, cobrimos uma grande variedade de maneiras de mudar sua página de checkout do WooCommerce, incluindo blocos, atalhos e códigos personalizados. Também mencionamos alguns plugins chave que podem ajudá-lo a adicionar recursos e funcionalidades que de outra forma não estariam disponíveis.

No entanto, existem alguns complementos, plugins e extensões adicionais que ainda não mencionamos, mas que lhe oferecem mais opções de personalização para sua página de checkout do WooCommerce. Algumas das melhores opções que vale a pena considerar incluem:

• WooCommerce Cart Notices Add-On. Este WooCommerce add-on permite que você exiba mensagens e notificações acionáveis aos seus clientes durante o processo de checkout. Por exemplo, você pode usá-lo para notificá-los sobre vendas e promoções relevantes.
• WooCommerce Checkout Manager. Feito pela mesma equipe que desenvolveu o Direct Checkout para WooCommerce, este plugin é uma poderosa extensão que você pode usar para otimizar sua página de checkout. Você pode usá-lo para editar, remover e adicionar campos personalizados, assim como para criar campos de condições.
• WooCommerce Checkout Add-ons. Este plug-in premium permite adicionar add-ons gratuitos e pagos na fase de checkout. É uma ferramenta útil para aumentar as conversões e impulsionar a receita.

Dependendo do tipo de site de comércio eletrônico que você possui, você pode estar procurando ainda mais opções. Se for o caso, recomendamos verificar a Biblioteca de Extensões do WooCommerce, que oferece uma tonelada de complementos para ampliar as características e funcionalidades do plug-in WooCommerce, incluindo soluções tanto gratuitas como pagas.

Resumo

Há diferentes maneiras de implementar para melhorar e otimizar sua página de checkout do WooCommerce.

Dependendo da mudança que você deseja fazer e do seu nível de experiência, você pode aproveitar os plugins e extensões do WooCommerce, modelos de página e temas, e até mesmo código personalizado.

Você tem alguma pergunta sobre o uso ou edição da página de checkout do WooCommerce? Informe-nos na seção de comentários abaixo!