Gostaria que sua página de checkout se parecesse com o resto da sua loja em vez de um formulário padrão? Easy Digital Downloads funciona com o construtor de páginas Elementor, para que você possa estilizar cada parte do seu checkout sem tocar em código.
Este guia mostra o bloco de Checkout do EDD, o widget de Checkout do EDD no Elementor e os widgets individuais de checkout que você usa para estilizar e reorganizar a página.
Requisitos: Os widgets do Elementor abaixo exigem o plugin Elementor instalado e ativado, e o recurso Contain definido como Ativo em Elementor » Configurações » Tela de Recursos.
Começando a partir de um Modelo de Checkout
Se preferir não criar um checkout do zero, você pode importar um modelo de checkout pronto e, em seguida, editá-lo com tudo o que está acima. Cada modelo importado coloca os quatro widgets de checkout para você, então as etapas de estilo e reordenação nesta guia se aplicam diretamente a ele.
Os modelos vêm com títulos de espaço reservado e texto de exemplo em torno dos campos de pagamento ativos, portanto, substituir esse texto pelo seu é geralmente a primeira edição que você fará.
Configurando o Bloco de Checkout do EDD
A página Checkout é criada para você quando você ativa o Easy Digital Downloads. Ela fica na sua lista de Páginas do WordPress como Checkout, e usa o bloco EDD Checkout.
Observação: O Bloco EDD Checkout e suas configurações estão disponíveis para todos os usuários, quer você use o Elementor ou não.
Abra a página Checkout e as configurações do bloco aparecerão à direita.
Comece com a configuração Visualizar como Convidado, que permite verificar a experiência de visitantes de primeira viagem e clientes recorrentes. Você também obtém uma visualização em tempo real da página de checkout e do formulário de cartão de crédito diretamente no editor.
Escolha um de seus produtos no menu Selecionar um Download para ver como o formulário fica com algo no carrinho.
As próprias configurações do bloco permitem alterar o layout, ajustar o tamanho da miniatura do carrinho e mostrar ou ocultar o formulário de desconto.
Editando seu Checkout com Elementor
O Elementor cria seu próprio widget EDD Checkout, que oferece um controle de design muito mais profundo do que apenas o bloco.
Acessando o Editor do Elementor
Com o plugin Elementor instalado e ativado, sua página Checkout oferece a opção Editar com Elementor.
Selecioná-la abre o editor do Elementor.
Adicionando o Widget de Checkout do EDD
No painel de elementos à esquerda, procure por EDD Checkout e arraste-o para sua página.
Um widget recém-adicionado permanece vazio até que você escolha um layout, que é o próximo passo. Assim que o fizer, ele renderiza uma visualização ao vivo do seu formulário de checkout, para que você possa ver suas alterações enquanto as faz, em vez de publicar e verificar o front-end.
Este widget é o contêiner para todo o seu checkout. Suas próprias configurações ficam em três abas: Layout, Estilo e Avançado.
Escolhendo um Layout de Checkout
Na aba Layout, abra Layout do Checkout. Você tem cinco arranjos prontos para escolher, cobrindo designs de coluna única e duas colunas, e opções para mostrar ou ocultar o carrinho e o formulário de desconto.
Observação: O Elementor avisa que a troca de layout substitui todo o conteúdo do widget. Escolha seu layout antes de investir tempo em estilização, para que seu trabalho seja aproveitado.
Estilizando o Contêiner do Checkout
A aba Estilo lida com o checkout como um todo, com seções para Fundo, Sobreposição de Fundo, Borda, Divisor de Forma e Elementos do Formulário.
Shape Divider é o que vale a pena conhecer, pois adiciona uma forma decorativa à borda superior ou inferior do seu checkout em vez de um limite plano. Escolha uma borda e, em seguida, escolha uma forma.
Personalizando os Widgets Individuais do Checkout
Seu checkout é construído a partir de quatro widgets separados: o carrinho, informações pessoais, informações de pagamento e o formulário de desconto. Cada um carrega suas próprias configurações, o que permite estilizar uma parte do checkout sem perturbar o resto.
Você não encontrará esses quatro no painel de elementos, porque você não os adiciona manualmente. Eles chegam como parte do widget EDD Checkout. Para acessar suas configurações, selecione a peça que você deseja diretamente na página.
O Widget de Carrinho
Na aba Conteúdo, o carrinho oferece uma opção Cabeçalho do Carrinho, uma opção Miniatura do Carrinho e um controle deslizante de Tamanho para essas miniaturas.
Sua aba Estilo é a mais profunda das quatro. Os controles são agrupados em Cabeçalho do Carrinho, Itens do Carrinho e Linhas de Rodapé, para que você possa estilizar os totais de forma diferente dos itens acima deles.
O Widget de Informações Pessoais
Este widget cobre os campos de nome e e-mail, além dos links de login e registro. Sua aba Conteúdo inclui Visualizar como Convidado, Alinhamento da Conta e uma opção Nome em Linha Única que coloca o primeiro e o último nome em uma linha.
O Widget de Informações de Pagamento
Este é o responsável pela área de pagamento. Sua aba Estilo agrupa os controles em Botão de Compra, Seletor de Gateway, Método de Pagamento e Detalhes do Cartão, para que o botão que seus clientes clicam possa ser estilizado por conta própria.
O Widget de Formulário de Desconto
O formulário de desconto tem uma única configuração de conteúdo, Mostrar Campo de Desconto, e uma aba de Estilo profunda cobrindo o link de alternância, o próprio campo e o botão de aplicar.
Reorganizando seu Checkout
Como cada parte do checkout é um widget próprio, você pode alterar a ordem em que as coisas aparecem. Selecione um widget, abra a aba Avançado e, em seguida, abra Layout. O controle Ordem move esse elemento para o início ou para o fim de seu contêiner, e uma opção personalizada permite definir uma posição exata.
A maneira mais rápida de selecionar a peça que você deseja é o painel Estrutura do Elementor, que lista todos os elementos na página. Selecionar um lá o destaca na tela e carrega suas configurações.
Quando estiver satisfeito com o resultado, selecione a seta ao lado de Publicar, em seguida, escolha Salvar Rascunho, Salvar como Modelo ou Ver Página. Selecione Publicar em si para tornar suas alterações ao vivo.
Solução de Problemas
Se você não vir o bloco EDD Checkout ou as configurações do widget descritas acima, há algumas opções para tentar.
O primeiro é verificar se o experimento do Contêiner Flexbox do Elementor está ativado. Vá em Elementor » Editor » Configurações » Recursos e certifique-se de que a opção Contêiner esteja definida como Ativo.
Além disso, certifique-se de que seu plugin Easy Digital Downloads esteja atualizado. Verifique se há atualizações em Painel » Atualizações.
Os widgets individuais de checkout e o seletor de layout precisam do Easy Digital Downloads 3.7.0 ou superior. Os próprios widgets do Elementor precisam do Elementor 3.35.0 ou superior. Caso contrário, você poderá ver um widget chamado EDD Checkout (Legado). Ele continua funcionando, e suas configurações ficam juntas em um único widget em vez de serem divididas entre os quatro descritos acima. Adicione o widget atual EDD Checkout a uma página para migrar para as configurações mais recentes.
Para qualquer coisa específica aos controles do próprio Elementor, a base de conhecimento de widgets do Elementor os cobre em detalhes.
Perguntas Frequentes: Personalizando o Checkout do EDD com Elementor
Aqui estão as respostas para algumas perguntas comuns sobre a personalização do checkout EDD no Elementor.
Preciso da versão paga do Elementor?
Não. O plugin gratuito Elementor é suficiente para o widget de Checkout do EDD e todas as configurações abordadas aqui.
Por que não consigo encontrar o formulário do carrinho ou de desconto no painel de elementos?
Esses quatro widgets não são adicionados manualmente. Eles vêm como parte do widget de Checkout do EDD, então você acessa suas configurações selecionando-os na página em vez de arrastá-los.
Mudar o layout do checkout vai desfazer minha estilização?
Pode sim. O Elementor avisa que mudar o layout substitui todo o conteúdo do widget, então escolha seu layout primeiro e estilize-o depois.
Posso alterar a ordem das seções do checkout?
Sim. Selecione o widget que deseja mover, então use o controle de Ordem na aba Avançado, em Layout.
O checkout ainda funciona sem o Elementor?
Sim. O bloco de Checkout do EDD cuida do seu checkout por conta própria, e suas configurações estão disponíveis para todos os usuários. O Elementor adiciona controle de design sobre ele.
