Easy Digital Downloads (EDD) acaba de lançar mais de dez modelos de checkout Elementor, cada um projetado para levar seu comprador do carrinho à confirmação sem hesitação.
Esses designs modernos e sem distrações apresentam toques focados em conversão, como selos de confiança e garantias já implementados. Importe um para sua página de checkout existente, substitua o texto de espaço reservado e você estará no ar em minutos, sem contratar um designer ou tocar em uma linha de código.
Os layouts também não são travados. Cada elemento de checkout é agora seu próprio widget Elementor, com mais de 100 controles nativos do Elementor entre eles, então a aparência de cada seção é sua para definir, de cores e tipografia a ícones e formas de fundo. Reorganize-os como quiser: coloque o carrinho acima do formulário de pagamento, remova um que você não precisa ou insira seu próprio conteúdo entre eles.
Esta é uma das maiores atualizações que lançamos, e está disponível agora. 🎉 Abaixo, cobrirei a biblioteca de modelos, como a importação funciona, como desfazê-la e tudo o que os novos controles do Elementor permitem que você altere.
- 10+ Modelos de Checkout Elementor Pré-construídos para EDD
- Como Importar um Modelo de Checkout Elementor
- Mudou de Ideia? Restaure Seu Checkout Original
- Sua Página de Checkout Agora é Feita de Partes Móveis
- Perguntas Frequentes Sobre Modelos de Checkout no WordPress
- Posso mover as seções do checkout para qualquer ordem que eu quiser?
- Preciso do Elementor Pro para usar os modelos de checkout?
- Posso usar modelos de checkout na versão gratuita do Easy Digital Downloads?
- Importar um modelo excluirá minha página de checkout atual?
- Reorganizar meu checkout quebrará meu gateway de pagamento?
- Posso remover partes que não quero, como o campo de desconto?
- E se eu não usar o Elementor?
- Crie a Página de Checkout Que Você Realmente Queria
10+ Modelos de Checkout Elementor Pré-construídos para EDD
A biblioteca de Modelos de Checkout EDD oferece mais de dez designs completos de página de checkout, cada um pronto para ser importado na página de checkout que você já possui.
Cada modelo organiza o checkout completo para você, com cópias de suporte, elementos de confiança e peças de checkout móveis já posicionadas ao redor do formulário de pagamento.
Os estilos variam de coluna única e minimalista a layouts de duas colunas que mantêm o resumo do carrinho ao lado do formulário de pagamento, para que você possa escolher o visual que se adapta à sua loja.
Projetado para Lojas Digitais, Não Adaptado
Estes não são modelos de e-commerce genéricos com os campos de envio ocultos. Cada um foi construído para uma loja que vende produtos digitais, então nada na página pergunta sobre um endereço de entrega ou inventário físico.
Cada design lidera com construção de confiança sem distrações: um layout limpo e moderno que mantém seu comprador focado em finalizar a compra.
Encontre o Certo Rapidamente
Dois controles estreitam a grade. O campo de pesquisa examina as descrições dos modelos. Por exemplo, pesquisar por "garantia" retorna todos os modelos que incluem cópias de garantia.
O menu Categoria filtra pelo que um modelo lidera, como Confiança, Etapas de Progresso, Duas Colunas, etc.
Pré-visualize a Página Inteira Primeiro
Cada cartão tem um botão Visualizar que abre o design completo em uma nova aba. Você vê a página inteira de ponta a ponta, não uma miniatura.
Uma vez aberto, alterne entre Desktop, Tablet e Mobile na parte superior para verificar como o layout se comporta em um telefone. As visualizações usam produtos de exemplo e texto de espaço reservado, portanto, mostram o arranjo em vez do conteúdo da sua própria loja.
Cada Modelo de Checkout Elementor é um Ponto de Partida
Importe um modelo, substitua o texto de espaço reservado e você terá uma página de checkout finalizada. Muitas lojas pararão por aí.
Mas como tudo naquela página é um widget móvel, um modelo também é apenas um ponto de partida. Importe o que mais se aproxima do que você deseja, depois reorganize-o até que seja seu. Cada seção dele se move, e eu explico exatamente como mais adiante.
Como Importar um Modelo de Checkout Elementor
A importação leva alguns cliques e alguns segundos. Existem duas maneiras de acessar a biblioteca de Modelos de Checkout.
Modelos de Checkout é um recurso do Easy Digital Downloads Pro.
Antes de começar, observe que todo usuário do EDD pode abrir a biblioteca de modelos e visualizar qualquer modelo.
No entanto, importar um requer um Passe Pro Easy Digital Downloads com uma licença ativa, o plugin gratuito Elementor na versão 3.35.0 ou superior, e o recurso experimental Flexbox Container do Elementor ativado.
Passo 1: Abra a Biblioteca de Modelos de Checkout
Na barra lateral de administração do WordPress, vá para Downloads » Configurações » Geral » Páginas.
Encontre a linha Página Principal de Checkout e clique em Procurar Modelos abaixo dela.
Se você já está editando sua página de checkout no Elementor, não precisa sair. Clique em Modelos de Checkout EDD no canto superior esquerdo do editor Elementor em vez disso.
Qualquer um dos métodos acima abre a biblioteca de Modelos de Checkout EDD onde você pode navegar, visualizar e importar um modelo de página de checkout.
Passo 2: Escolha e Pré-visualize um Modelo
Navegue pela grade e use o campo de pesquisa ou o menu Categoria para refinar sua busca.
Clique em Visualizar em qualquer modelo que você esteja considerando e verifique-o em Desktop, Tablet e Mobile antes de decidir.
Passo 3: Importe Seu Modelo
No card que você escolheu, selecione Importar.
O EDD pede para você confirmar primeiro, pois a importação substitui o que está atualmente em sua página de checkout. Seu conteúdo existente é salvo como uma revisão do WordPress antes que qualquer coisa mude, então ele não é perdido. Clique em Importar Modelo para continuar.
Passo 4: Edite ou Desfaça
A importação termina em alguns segundos, e você verá uma confirmação com três opções.
- Editar Página abre seu novo design no Elementor para que você possa começar a editar imediatamente.
- Restaurar Checkout Original devolve sua página de checkout anterior exatamente como estava.
- Fechar mantém o modelo e retorna você às suas configurações.
Passo 5: Faça Seu
Os modelos chegam com títulos de exemplo e textos de espaço reservado nas seções ao redor do formulário de pagamento. Abra a página de checkout no Elementor (selecione Editar com Elementor no editor da Página de Checkout do WordPress), clique em qualquer elemento de texto e digite o seu.
Enquanto você estiver lá, coloque as seções na ordem que desejar. Sua garantia, seu horário de suporte, o nome do seu produto, sua organização.
Mudou de Ideia? Restaure Seu Checkout Original
Redesenhar uma página de checkout ativa pode parecer arriscado. Esta versão oferece uma maneira de voltar com um clique.
Easy Digital Downloads salva seu conteúdo de checkout anterior como uma revisão do WordPress antes de importar qualquer coisa. O painel de confirmação também inclui um botão Restaurar Checkout Original.
Clique nele e, em seguida, clique em Sim, restaurar para confirmar. Sua página de checkout voltará a ser exatamente como estava imediatamente antes da importação.
Isso é um desfazer, não uma redefinição de fábrica. Ele reverte sua importação mais recente em vez de apagar a página para um padrão em branco, para que você possa experimentar um modelo em uma loja real e desfazê-lo em segundos.
Se você já fechou a biblioteca, ainda pode restaurar sua versão anterior na lista de revisões no editor de páginas do WordPress.
Sua Página de Checkout Agora é Feita de Partes Móveis
Modelos fornecem uma página pronta. Se você quiser ir mais longe, é isso que está por baixo de um.
No Elementor, o checkout do Easy Digital Downloads é construído a partir de quatro widgets separados. Cada peça é seu próprio elemento na tela, então onde ele fica na página é você quem decide:
- Informações Pessoais: os campos de nome e e-mail do cliente
- Informações de Pagamento: o formulário de pagamento do gateway
- Carrinho: os itens que estão sendo comprados e os totais
- Formulário de Desconto: o campo de código de desconto
Você seleciona cada um na página e o estiliza individualmente, e cada um carrega sua própria configuração de posição.
O Que Isso Realmente Permite Fazer
Coloque o carrinho acima do formulário de pagamento para que os compradores confirmem o que estão comprando antes de pegar o cartão.
Mova o campo de desconto para baixo, ou remova-o completamente se os códigos estiverem ensinando seus clientes a procurar um antes de comprar. Insira uma garantia, um aviso de suporte, avaliações de clientes ou qualquer outro widget do Elementor entre quaisquer duas seções, porque os widgets padrão do Elementor também ficam nesta tela.
Para alterar a posição de uma seção, selecione-a na página, abra a aba Avançado e use o controle Ordem em Layout. Sem código personalizado e sem arquivos de modelo para editar.
Mais de 100 Controles nos Quatro Widgets
Cada widget carrega seu próprio conjunto de controles, e entre os quatro, isso soma mais de 100 controles nativos do Elementor. Alguns dos mais úteis:
- Conteúdo do carrinho: mostrar ou ocultar a miniatura do produto, mostrar ou ocultar o cabeçalho da seção
- Campo de desconto: mostrar, ocultar ou reestilizar
- Listas de ícones: usar conjuntos e bibliotecas de ícones completos em vez de um ícone fixo
- Formas de fundo: adicionar ou remover as formas decorativas atrás das seções
Cores, espaçamento, tipografia e dimensionamento se comportam da maneira que você já espera do Elementor.
Perguntas Frequentes Sobre Modelos de Checkout no WordPress
Posso mover as seções do checkout para qualquer ordem que eu quiser?
Sim. Informações pessoais, informações de pagamento, carrinho e formulário de desconto são cada um um widget do Elementor, então a posição de cada um é sua para definir. Selecione a seção que deseja mover e, em seguida, use o controle Ordem na aba Avançado em Layout. Você também pode adicionar títulos, ícones, texto ou qualquer outro widget do Elementor entre eles.
Preciso do Elementor Pro para usar os modelos de checkout?
Não. O plugin gratuito Elementor é suficiente, desde que seja a versão 3.35.0 ou superior. Você não precisa de uma assinatura do Elementor para importar ou editar um modelo de checkout. No entanto, você precisa garantir que o recurso experimental Flexbox Container esteja ativado nas configurações do plugin.
Posso usar modelos de checkout na versão gratuita do Easy Digital Downloads?
Todo usuário do EDD pode abrir a biblioteca, navegar por todos os modelos e visualizá-los integralmente. Importar um modelo requer um passe EDD Pro com licença ativa. Qualquer passe pago funciona, então você não precisa de um nível específico.
Importar um modelo excluirá minha página de checkout atual?
Não. A importação substitui o conteúdo da sua página de checkout, mas sua versão anterior é salva como uma revisão do WordPress primeiro. O painel de confirmação também oferece um botão Restaurar Checkout Original se você mudar de ideia imediatamente. Além disso, se as revisões estiverem desativadas para a página de checkout, a importação não é executada, em vez de prosseguir sem backup.
Reorganizar meu checkout quebrará meu gateway de pagamento?
Não. O formulário de pagamento permanece totalmente funcional onde quer que você o coloque na página. Mova-o ou coloque conteúdo ao redor dele, e ele continuará funcionando da mesma maneira.
Posso remover partes que não quero, como o campo de desconto?
Sim. Além do que seu gateway de pagamento precisa coletar, qualquer elemento na página pode ser alterado ou removido. Isso inclui o campo de código de desconto, miniaturas do carrinho, cabeçalhos de seção, selos de confiança e formas de fundo.
E se eu não usar o Elementor?
Você ainda pode navegar e visualizar todos os modelos da biblioteca no seu painel do WordPress. Importar um para sua página de checkout requer o Elementor instalado, e a versão gratuita é suficiente. Se você construir com blocos, o bloco EDD Checkout tem suas próprias opções de Layout no editor do WordPress, então seu checkout continua funcionando exatamente como hoje de qualquer maneira.
Crie a Página de Checkout Que Você Realmente Queria
A versão curta: cada parte da sua página de checkout é sua para posicionar.
Se você quiser projetar você mesmo, as peças estão todas lá e todas se movem. Se você preferir não começar com uma tela em branco, importe um dos modelos prontos e mude o texto. De qualquer forma, a estrutura do seu checkout é uma decisão que você toma.
Pronto para começar? Nossa documentação Usando Modelos de Checkout guia você pela importação do seu primeiro modelo passo a passo, e nosso Changelog cobre todo o resto desta versão.
Ainda não tem um passe Easy Digital Downloads Pro? Adquira um hoje para desbloquear a biblioteca de modelos e começar a construir uma página de checkout que converte.
📣 P.S. Certifique-se de assinar nossa newsletter e nos seguir no Facebook, Twitter/X ou LinkedIn para mais recursos do WordPress!
