Como personalizar a seção de endereço de envio e cobrança no WooCommerce

Atualizado em 13 de noviembre de 2023

A seção de endereço de envio e cobrança do WooCommerce é a seção mais importante no processo de checkout. Funciona bem por padrão. Às vezes você precisa de algo mais. Você não pode mudar a maneira como funciona e parece ou… ou pode? Vou te ensinar neste artigo como personalizar essas seções da maneira que você quiser!

Seus clientes devem fornecer suas informações de faturamento ao fazer um pedido. Existe a opção de definir um endereço de entrega diferente. O cliente deve marcar uma caixa de seleção na página de checkout.

Endereço de entrega e seções de cobrança do WooCommerce

Funciona muito bem por padrão. Na maioria dos casos, você não precisa alterar essa página. Acho que você está aqui porque precisa de mais alguma coisa 🙂

Você pode personalizar a página de checkout como quiser:

  • definir alguns campos como não obrigatórios
  • desativar qualquer campo (por exemplo, para produtos digitais)
  • alterar a ordem dos campos
  • e adicione seus próprios campos personalizados.

Você precisa de um plugin simples: Campos de checkout flexíveis (PRO)

Assista a este vídeo e veja você mesmo o que este plugin pode oferecer na versão gratuita:

Campos de checkout flexíveis do WooCommerce

Edite, adicione novos ou oculte campos desnecessários do formulário de pagamento. É tudo uma questão de conversões e uma melhor experiência do usuário.

Depois de instalá-lo, você pode configurar as seções de endereço de entrega e cobrança do WooCommerce. Vá para WooCommerce → Campos de pagamento . Você pode alternar entre eles usando as guias na parte superior da tela ( Cobrança e Envio ):
Adicionar novo campo em Campos de Pagamento Flexíveis

Campos de checkout flexíveis – Adicione um novo campo e edite seu endereço de entrega e cobrança
Como você pode ver, você pode adicione facilmente um novo campo qualquer editar uma seção . Você tem opções como:

  • Habilitar campo
  • Campo obrigatório
  • Rótulo
  • Validação

Existem muito mais funções nas guias Aparência, tela ligada e Avançado. Você pode verificá-los você mesmo. Se você quiser ler mais sobre eles, continue com este artigo.

Configuração do campo de pagamento

Vejamos as opções de configuração.

Os campos obrigatórios

Alguns campos nas seções Endereço de envio e cobrança são obrigatórios. Você pode facilmente mudar isso. Olhar:

endereço de cobrança do woocommerce

Como você pode ver, esses campos são opcional . Você também pode criar novos campos personalizados e configurá-los conforme necessário:

Campo customizado

Como? Basta marcar ou desmarcar a opção O campo obrigatório :

campos obrigatórios campos de pagamento flexíveis

Saiba mais sobre os campos obrigatórios do WooCommerce Checkout

Validação

Você pode usar a validação padrão do WooCommerce ou a personalizada.

A validação é muito útil:

Erro: endereço de e-mail inválido

Se você deseja adicionar validação às seções de endereço de entrega e cobrança, use nosso Guia de validação de checkout WooCommerce →

Mostrar em

Você pode configurar onde exibir um campo. Por padrão, o plugin exibe o campo em todos os locais:

  • Obrigado página
  • Página da minha conta – seção de endereço
  • Página Minha conta – seção de pedidos
  • em e-mails

Você pode mudar isso. Confira nosso guia sobre campos personalizados em minha conta WooCommerce →

Aparência

Altere a aparência dos campos das seções de envio e cobrança do WooCommerce.

Defina sua própria classe personalizada para um campo:

classe CSS personalizada

Desta forma você pode alterar qualquer campo neste:

Campo de rádio: aparência padrão

Neste (ou o que você quiser):

Exemplo de estilo de botão de opção

Leia mais em nosso guia sobre como estilizar campos personalizados com CSS →

Lógica Condicional

Você pode implementar lógica condicional nas seções de endereço de entrega e cobrança. Você quer um exemplo? Olhar:

Quero uma fatura de caixa de seleção

Um cliente deve marcar a caixa de seleção quero uma fatura . Após esta ação, novos campos aparecem.

Existem muitos cenários em que você pode usar lógica condicional. Você pode configurar lógica condicional para campos…

exemplo de lógica condicional

…os produtos/categoria…

lógica condicional para produto ou categoria

…ou método de envio selecionado.

lógica condicional para métodos de envio woocommerce

Como você pode ver, você precisa ir para a guia Avançado. Lá você encontrará todas as opções.

Saiba mais sobre os campos condicionais de checkout do WooCommerce →

Outros ajustes

O plugin Flexible Checkout Fields permite adicionar campos personalizados a outras seções, como:

  • pedidos
  • Detalhes do cliente
  • ou formulário de inscrição

Aproveite! Leia nosso artigo sobre como personalizar a página de checkout →

Editor de campo de checkout WooCommerce

Como você pode ver, o plugin Campos de checkout flexíveis é muito poderoso. Para nós (os desenvolvedores) este plugin é o melhor do mercado 🙂

Mas não acredite apenas na nossa palavra, mais de 70.000 lojas WooCommerce em todo mundo usa diariamente.
repositório fcf

Plug-in de campos de pagamento flexíveis no repositório
Freqüentemente adicionamos novos recursos ou corrigimos bugs neste plugin. As pessoas realmente apreciam isso!

Este plugin também usa a aparência do WordPress e é muito fácil de usar devido à interface limpa.

As pessoas apreciam o que criamos:

Revisão flexível dos campos de checkout

Você pode encontrar muito mais comentários positivos como o acima! No entanto, você não precisa acreditar apenas na minha palavra. Você pode baixar este plugin gratuitamente e conferir você mesmo!

Baixe campos de pagamento flexíveis →

Personalize a seção de endereço de envio e cobrança em e-mails WooCommerce

Para personalizar a seção de envio e cobrança nos modelos de e-mail Woo, você precisará de um plugin de terceiros chamado YayMail. Você pode baixá-lo gratuitamente e criar os e-mails em um construtor de e-mail de arrastar e soltar.

A versão premium deste personalizador de e-mail WooCommerce oferece suporte a campos de checkout flexíveis. Ajuda exibir os campos personalizados adicionados aos modelos de e-mail de pedido e localizar a seção como desejar.

Opções de layout integradas para ajudá-lo a embelezar o e-mail, incluindo:

  • título de cobrança
  • Título de envio
  • Família de fontes
  • Fundo/borda da caixa/cor do texto
Scroll al inicio