Gostaria de reorganizar sua página de checkout sem escrever nenhum código? Easy Digital Downloads constrói a página de checkout a partir de blocos internos individuais: o carrinho, as informações pessoais do cliente, os detalhes de pagamento e um campo de código de desconto. Cada bloco tem suas próprias configurações, e todo o layout pode ser reconstruído diretamente do editor de blocos do WordPress.
Este guia o orienta pelas etapas para escolher um layout de checkout, reorganizar seus blocos e configurar as definições de cada bloco.
Abrindo o Painel de Layout do Bloco de Checkout
Na barra lateral de administração do WordPress, vá para Páginas e abra sua página de checkout. Não tem certeza de qual página é? Na barra lateral de administração do WordPress, vá para Downloads » Configurações » Pagamentos para encontrar a página definida no campo Página de Checkout.
Uma vez que a página esteja aberta no editor de blocos, selecione o bloco Checkout do EDD para ver as opções de configuração de Layout.
Confira a lista completa de Blocos do EDD.
Escolhendo um Layout
Cinco layouts estão disponíveis no painel de Layout:
- Coluna Única: organiza o carrinho, informações pessoais, informações de pagamento e o formulário de desconto em uma única coluna. Escolha esta opção para um checkout simples e linear.
- Duas Colunas: 50/50: divide o checkout igualmente. Escolha esta opção quando o carrinho e o formulário precisam ter o mesmo peso visual.
- Duas Colunas: 70/30: dá mais espaço para o lado do formulário. Escolha esta opção quando os campos de informações pessoais e de pagamento precisam de mais espaço.
- Duas Colunas: 80/20: dá ainda mais espaço para o lado do formulário, com o carrinho como uma coluna de resumo estreita.
- Carrinho no Topo, Formulário em Duas Colunas: coloca o carrinho na parte superior, com as informações pessoais e de pagamento em duas colunas abaixo dele.
Observação: Mudar para um layout diferente substitui todos os blocos já existentes dentro do bloco de checkout. Escolha um layout antes de personalizar blocos individuais, pois a mudança posterior desfaz essa personalização.
Reorganizando Blocos de Checkout
Uma vez escolhido um layout, cada seção do checkout — carrinho, informações pessoais, informações de pagamento e formulário de desconto — é seu próprio bloco. Selecionar qualquer bloco revela sua própria barra de ferramentas com opções para movê-lo, duplicá-lo ou excluí-lo.
Para mover um bloco, selecione-o e use os controles de movimento da barra de ferramentas para arrastá-lo para uma nova posição ou para cima, para baixo, para a esquerda ou para a direita, dependendo do layout atual.
Um bloco também pode ser removido completamente, selecionando-o e escolhendo excluir em sua barra de ferramentas. Isso é diferente de desativar o formulário de desconto, que usa uma configuração em vez de remover um bloco. Veja Solução de Problemas abaixo.
Configurando as Opções do Bloco do Carrinho
Selecionar o bloco do carrinho abre suas próprias configurações na barra lateral:
- Mostrar Linha de Cabeçalho mostra os cabeçalhos das colunas “Nome do Item” e “Preço do Item” acima do conteúdo do carrinho. Isso está ativado por padrão.
- Mostrar Miniaturas mostra uma miniatura do produto ao lado de cada item do carrinho. Isso está ativado por padrão, com um campo Largura da Miniatura (25px por padrão) para ajustar o tamanho.
- Mostrar Controles de Quantidade permite que os clientes alterem quantos itens estão comprando diretamente do checkout. Isso está ativado por padrão.
- Mostrar Formulário de Desconto mostra o campo de código de desconto como parte do carrinho. Isso está ativado por padrão. Desativá-lo oculta o campo de desconto sem remover o bloco do carrinho em si.
Configurando as Opções do Bloco de Informações Pessoais
Selecionar o bloco de informações pessoais abre uma configuração: Combinar Primeiro e Último Nome. Ativar isso mescla os dois campos de nome em um único campo, o que pode fazer o formulário de checkout parecer mais curto. Isso está desativado por padrão.
Estilizando uma Coluna
Escolher um layout de duas colunas transforma cada coluna em seu próprio bloco com uma aba Estilos, separada das próprias configurações dos blocos de checkout. Na aba Estilos, uma coluna pode receber uma predefinição de estilo integrada ou ter uma cor de fundo personalizada, gradiente, preenchimento e arredondamento de cantos.
Testando a Página de Checkout
Antes de publicar quaisquer alterações de layout, o alternador Visualizar como Convidado do bloco de checkout, encontrado na barra lateral do próprio bloco EDD Checkout pai (não na do bloco do carrinho), mostra exatamente o que um cliente vê. A pesquisa Selecionar um Download na barra lateral também pode visualizar o checkout com um produto específico já no carrinho.
Testar dessa forma, ou concluir uma compra de teste real, confirma que o layout está correto antes de ir ao ar.
Solução de Problemas
O campo do código de desconto foi removido e não voltará do inseridor de blocos.
O campo do código de desconto não é um bloco separado que pode ser reinserido. É uma configuração no bloco do carrinho. Para reativá-lo, selecione o bloco do carrinho, abra suas configurações e ative novamente Mostrar Formulário de Desconto.
É isso! A página de checkout agora pode ser reorganizada, personalizada e estilizada inteiramente do editor de blocos do WordPress. Para uma abordagem de design mais avançada e de arrastar e soltar, consulte Personalizando seu Checkout EDD com Elementor.
Perguntas Frequentes
Abaixo estão as respostas para algumas das perguntas mais comuns sobre como personalizar o layout da página de checkout usando os blocos internos do EDD.
Preciso refazer minha página de checkout após atualizar o Easy Digital Downloads?
Não, não até que a página seja aberta e salva. Uma vez salva, a página de checkout é atualizada para a nova estrutura de blocos automaticamente, e quaisquer configurações já escolhidas, como o layout ou se o formulário de desconto é exibido, são mantidas.
Preciso de um plano específico para personalizar o layout da minha página de checkout?
Não. Os blocos de checkout EDD e suas opções de layout estão disponíveis para todos os usuários. Se você quisesse importar um design da biblioteca de Modelos de Checkout EDD, você precisaria de uma licença Pro ativa.
O que posso personalizar na minha página de checkout?
O carrinho, os campos de informações pessoais, os detalhes de pagamento e o campo de código de desconto podem ser reorganizados, removidos ou ajustados. Cada um é um bloco próprio. Blocos padrão do WordPress, como um parágrafo, título ou citação de depoimento, também podem ser incluídos.
Mudar o layout do meu checkout quebrará alguma coisa?
Não. Todos os layouts de checkout disponíveis são designs funcionais, e reorganizar os blocos internos usa as mesmas ferramentas usadas para editar qualquer outra página no WordPress.
Posso ainda usar o Elementor para projetar minha página de checkout?
Sim. Para controle de design mais avançado, personalizar seu checkout EDD com Elementor funciona. Esses blocos são para quem deseja uma maneira mais simples e integrada de personalizar o layout sem um plugin de construtor de páginas.
Os blocos de checkout do EDD funcionarão com o meu tema do WordPress?
Na maioria dos casos, sim. Como estes são blocos padrão do WordPress, eles funcionam com a maioria dos temas. Se um tema tiver uma estilização personalizada incomum, verifique como a página de checkout fica antes de publicar as alterações.
