Esta documentação irá guiá-lo através da integração do Easy Digital Downloads e do plugin de page builder Elementor para criar uma página de checkout EDD envolvente e personalizável para sua loja online.
A integração permite opções aprimoradas de estilo e flexibilidade de layout usando tanto o Bloco de Checkout EDD quanto as configurações disponíveis através do editor de arrastar e soltar do Elementor e do widget dedicado de Checkout EDD.
Bloco de Checkout EDD
A página de Checkout é criada automaticamente para você ao ativar o plugin EDD. Encontre-a em Páginas » Página de Checkout. Ela usa o bloco de Checkout EDD.
Nota: O Bloco de Checkout EDD e suas configurações estão disponíveis para todos os usuários, independentemente de o Elementor ser usado.
Quando você acessa a página de Checkout, as configurações do bloco ficam à direita.
Pré-visualização
Primeiro, você tem a opção de ativar a configuração Pré-visualizar como Convidado. Isso ajuda você a garantir que a experiência seja ideal tanto para visitantes de primeira viagem quanto para clientes recorrentes.
Isso mostra uma pré-visualização em tempo real da página de checkout e do formulário de cartão de crédito diretamente no editor. Você pode escolher um de seus produtos no menu suspenso Selecionar um Download e ver uma pré-visualização em tempo real de como o formulário de checkout fica com um item no carrinho.
Configurações
- Alterar o Layout
- Ajustar o Tamanho da Miniatura do Carrinho
- Mostrar/Ocultar Formulário de Desconto
Editar Checkout com Elementor
O Elementor criou seu próprio widget de Checkout EDD, que oferece aos usuários um controle de design mais profundo diretamente no Elementor.
Acessar o Editor do Elementor
Com o plugin de page builder Elementor instalado e ativado em seu site WordPress, sua página de Checkout EDD oferece a opção de Editar com Elementor.
Clicar nele o leva à interface do editor do Elementor.
Adicionar e Configurar Widget de Checkout
No painel de elementos no lado esquerdo da tela, procure por Checkout EDD. Arraste e solte-o em sua página.
O widget fornece uma pré-visualização em tempo real do seu formulário de checkout. Você configura as configurações do elemento no painel do lado esquerdo para personalizar cada aspecto da sua página de checkout.
O Checkout EDD tem três abas principais de configurações.
Conteúdo
Essas configurações são semelhantes às configurações de bloco no bloco nativo de Checkout EDD.
Geral
- Item do Carrinho
- Alinhamento da Conta
- Layout
Carrinho
- Cabeçalho
- Miniatura e Tamanho da Miniatura
- Formulário de Desconto
Títulos de Seção
Você pode mostrar/ocultar:
- Informações Pessoais
- Detalhes de Faturamento
- Método de Pagamento
- Informações do Cartão
Estilo
A aba Estilo é onde você pode personalizar a aparência do seu widget de Checkout. Isso inclui coisas como a tipografia e as cores de texto/fundo, raio e preenchimento, etc.
- Geral
- Botão de Compra
- Carrinho
- Seções do Formulário
- Elementos do Formulário
- Informações Pessoais
- Detalhes de Faturamento
- Método de Pagamento
- Detalhes do Cartão
Avançado
Esta aba é onde você pode encontrar opções mais avançadas para personalizar a aparência da sua página de checkout. Existem vários acordeões, cada um com seu próprio conjunto de configurações que você pode configurar. As seções incluem:
- Layout
- Efeitos de Movimento
- Transformar
- Fundo
- Borda
- Máscara
- Responsivo
- Atributos
- CSS Personalizado
Quando terminar, você pode clicar na seta para baixo no canto superior direito da tela. Em seguida, escolha Salvar Rascunho, Salvar Modelo ou Visualizar Página. Você também pode selecionar Publicar para tornar suas alterações visíveis.
Se você tiver alguma dúvida sobre as configurações específicas do widget, sinta-se à vontade para explorar a base de conhecimento de widgets do Elementor.
Solução de Problemas
Se você não estiver vendo o Bloco de Checkout EDD ou as opções de widget discutidas acima, talvez seja necessário atualizar seu plugin Easy Digital Downloads.
Verifique se há atualizações acessando Painel » Atualizações em sua área administrativa do WordPress. Certifique-se de que está usando a versão 3.5.3 ou superior.
