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:

A página de checkout padrão do WooCommerce.

A página de checkout padrão do WooCommerce.

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

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:

A página de Checkout no WooCommerce.

A página de Checkout no WooCommerce.

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]:

O atalho da página de checkout do WooCommerce no WordPress.

O atalho da página de checkout do WooCommerce no WordPress.

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

A aba 'Avançado' em configurações do WooCommerce

A aba ‘Avançado’ em configurações do WooCommerce

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:

A página de configurações gerais no WooCommerce.

A página de configurações gerais no WooCommerce.

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

A guia 'Contas e Privacidade' das configurações do WooCommerce

A guia ‘Contas e Privacidade’ das configurações do WooCommerce

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:

Configurações da política de privacidade no WooCommerce

Configurações da política de privacidade no WooCommerce

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

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.

Desejar... ✅ reduzir o abandono do carrinho de compras, ✅ dirigir conversões, e ✅ aumentar a receita? Então este artigo é para você. 👇 Saiba como construir uma página de checkout personalizada do WooCommerce em minutos ⏱Click to Tweet

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:

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:

O Plugin do Editor de Campo de Checkout WooCommerce

O Plugin do Editor de Campo de Checkout WooCommerce

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:

O plug-in do Editor de Formulário de Checkout no WooCommerce

O plug-in do Editor de Formulário de Checkout no WooCommerce

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:

O painel de campo editar checkout no plugin WooCommerce do Checkout Editor de Campo

O painel de campo editar checkout no plugin WooCommerce do Checkout Editor de Campo

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:

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:

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:

A pasta de modelos do WooCommerce

A pasta de modelos do 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:

O arquivo de modelo da página de checkout do WooCommerce

O arquivo de modelo da página de checkout do WooCommerce

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:

A extensão do WooCommerce One Page Checkout

A extensão do 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:

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:

O ícone de extensão do Checkout de uma página no editor WordPress

O ícone de extensão do Checkout de uma página no editor WordPress

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.

Precisa de uma hospedagem rápida, confiável e totalmente segura para o seu site de comércio eletrônico? Kinsta fornece tudo isso e suporte de 24/7, de especialistas em WooCommerce. Confira nossos planos

É 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:

As configurações do WooCommerce Shipping

As configurações do WooCommerce Shipping

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:

Adicionando um método de envio gratuito no WooCommerce

Adicionando um método de envio gratuito no WooCommerce

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:

Configurações de envio gratuito no WooCommerce

Configurações de envio gratuito no WooCommerce

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:

Um ID de produto WooCommerce

Um ID de produto WooCommerce

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:

O Plugin de Checkout Direto para WooCommerce

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:

O Checkout direto para configurações de plugins do WooCommerce

O Direct Checkout para configurações de plugins do WooCommerce

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:

A opção de redirecionar para o carrinho no Checkout direto para WooCommerce

A opção de redirecionar para o carrinho no Direct Checkout para WooCommerce

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):

O plugin de pagamentos do WooCommerce

O plugin de pagamentos do WooCommerce

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

O modo de teste de pagamentos do WooCommerce

O modo de teste de pagamentos do WooCommerce

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:

Teste de transações no WooCommerce

Teste de transações no WooCommerce

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!

Aprenda a estilizar, mudar e alavancar sua página de checkout do WooCommerce ⚡️ para otimizar conversões e 💰 aumente sua receita aqui ⬇️Click to Tweet

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:

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!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 28 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.