Easy Digital Downloads se dedica a fornecer um sistema de comércio eletrônico fácil de usar para usuários do WordPress. Trabalhamos duro para atingir esse objetivo diariamente. No entanto, devido à sua extensibilidade e à variação inevitável das necessidades dos clientes, muita funcionalidade é deixada para a tarefa assustadora do desenvolvimento personalizado.
Uma das necessidades mais comuns que vemos em nosso canal de suporte é uma maneira fácil de criar formulários de checkout personalizados. Para não desenvolvedores, a criação de formulários personalizados já é difícil o suficiente. Traga a funcionalidade de comércio eletrônico para a imagem e até mesmo a multidão "faça você mesmo" luta.
O objetivo deste artigo é ajudar todos os usuários do Easy Digital Downloads, independentemente do nível de habilidade, a aprender como criar formulários de checkout personalizados sem escrever *nenhum* código.
Plugins mínimos necessários
Existem pelo menos quatro plugins que devem funcionar juntos para que isso aconteça. Explicarei cada um deles abaixo.
Easy Digital Downloads
Embora o Easy Digital Downloads tenha sua própria funcionalidade de checkout principal, o sistema básico suporta apenas um formulário de checkout "universal". Mesmo que você personalize o formulário, ele ainda será o mesmo formulário para todas as transações, independentemente do que estiver no carrinho.
Gravity Forms
Gravity Forms é um construtor de formulários avançado para WordPress. Você pode usá-lo para criar qualquer coisa, desde o formulário de contato mais básico até formulários complexos que servem a qualquer finalidade. Com recursos como lógica condicional de campos, organização e apresentação de entradas, e suporte a add-ons, não há dúvida de que é um dos plugins premium mais populares do WordPress no mercado.
extensão Gravity Forms Checkout
Gravity Forms Checkout é a ponte entre Easy Digital Downloads e Gravity Forms. Para criar vários formulários de checkout personalizados para seus produtos, esta extensão do Easy Digital Downloads é uma peça necessária do quebra-cabeça.
Gravity Forms Payment Add-On
Por último, os formulários de checkout personalizados criados através do Gravity Forms exigem que você use os add-ons do Gravity Forms para adicionar funcionalidade adicional aos próprios formulários. Isso significa que os gateways de pagamento do Easy Digital Downloads não funcionarão com o Gravity Forms Checkout.
Para processar pagamentos, você deve usar gateways de pagamento criados para o Gravity Forms. Neste artigo, faremos referência ao add-on Gravity Forms PayPal Payments Standard. Existem opções adicionais disponíveis como Stripe e Authorize.net.
Criação de formulários de checkout personalizados
Agora que você tem todos os plugins necessários, vamos começar. Vamos percorrer a criação de um formulário de checkout básico para um único produto. Siga os passos se você estiver preparado para isso.
Neste ponto, você já deve ter produtos em sua loja que deseja vender. Por favor, note que mesmo que você tenha as ferramentas mencionadas ativadas ou em uso, sua loja Easy Digital Downloads ainda funcionará da maneira original.
Formulários de checkout personalizados com Gravity Forms Checkout simplesmente adicionam outra opção. Seus produtos ainda podem ser comprados da maneira tradicional.
Crie novos formulários com Gravity Forms
Para o processo de criação de formulários, pense nisso como Easy Digital Downloads integrando-se ao Gravity Forms, em vez do contrário. Com essa abordagem, faz sentido que, para criar um novo formulário de checkout personalizado, você primeiro precise criar um novo formulário no Gravity Forms.
Com o Gravity Forms ativado, vá para Forms -> New Form no seu painel do WordPress. Você será solicitado a dar um título e uma descrição opcional ao formulário. Faça isso e crie o formulário.
Adicionando campos básicos
Nesta fase, você tem uma entrada de formulário criada, mas ela não tem nenhum campo. Tudo o que ela tem é um título e uma descrição que serão exibidos automaticamente por padrão, embora você possa ocultá-los se desejar.
Você precisará coletar pelo menos um endereço de e-mail de seus clientes. Portanto, adicionaremos um campo de endereço de e-mail ao nosso formulário para começar.
No lado direito da tela, você verá várias seções expansíveis de agrupamentos de campos. O campo de E-mail pode ser encontrado na seção Advanced Fields. Para adicionar o campo de E-mail ao seu formulário, basta clicar no botão rotulado Email.
Clicar no botão adicionará o campo ao seu formulário (lado esquerdo da tela) com conteúdo mínimo padrão. Mova seu cursor sobre o novo campo e, quando vir o indicador visual de que está pairando, clique uma vez no campo para ver suas opções.
O campo de E-mail é muito simples e precisa apenas de um ajuste. Na seção Regras, marque o campo como Obrigatório. Com essa configuração implementada, o formulário de checkout não será enviado sem um endereço de e-mail.
Muitos de vocês também vão querer adicionar campos como primeiro e último nome. Não discutiremos esses neste artigo, mas o processo é muito semelhante a adicionar o campo de E-mail.
Agora que temos um campo de endereço de e-mail obrigatório, vamos adicionar mais um campo antes de passar para os campos relacionados ao produto.
Apenas para estrutura e para se familiarizar mais com o Gravity Forms, adicionaremos um campo ao formulário chamado Section. Seções são uma maneira fácil de dividir seu formulário em seções visuais que ajudam no fluxo de preenchimento do formulário.
O campo de Seção pode ser encontrado na seção Standard Fields. Adicione-o ao seu formulário e expanda-o para ver suas opções.
Com base no tipo de campo e no fato de que adicionaremos um campo de Produto em seguida, vamos considerar este campo de Seção como um cabeçalho para a exibição do campo de produto.
Ajuste os campos Field Label e Description ao seu gosto. Algo como “Informações do Produto” como Rótulo do Campo e quaisquer pequenos detalhes que você queira divulgar sobre o produto em si como Descrição.
A qualquer momento durante o processo de criação, você pode visualizar a estrutura do seu formulário clicando no link Visualizar localizado no menu de navegação logo acima do construtor de formulários. Observe que alguns campos exigem que você atualize o formulário para visualizá-lo.
A visualização do seu formulário não é uma representação de como ele será projetado no front-end. Em vez disso, use a visualização para verificar a estrutura e a funcionalidade. No momento, não temos nada além de um campo de e-mail, um título de seção (rótulo) e uma descrição.
Se você ainda não está familiarizado com Gravity Forms, o que você fez até agora é como você usaria o construtor de formulários para qualquer tipo de formulário que você criar, não apenas com Easy Digital Downloads. Se você não tem clareza sobre como o construtor de formulários básico funciona, por favor, visite a documentação do Gravity Forms.
Nesta fase do processo, a visualização do seu formulário deve ser semelhante a esta:
Com o título do formulário, a descrição do formulário, o campo de e-mail e a seção de informações do produto definidos, podemos adicionar um produto ao formulário.
Adicionando campos de produto
Lembre-se, este é um formulário extremamente básico e seu propósito é servir como checkout para um produto específico. Para aqueles que prefeririam ter um formulário de checkout personalizado para um produto específico em vez de usar seu botão Adicionar ao Carrinho e checkout tradicional, este formulário seria um substituto ideal.
Dito isso, adicionaremos e exibiremos o campo Produto ao formulário para fins informativos. O cliente está sendo informado sobre qual produto o formulário lhe dará acesso, juntamente com seu preço.
No lado direito da tela, encontre a seção Campos de Preço. Nessa seção, selecione para adicionar um novo campo de Produto clicando no botão rotulado como Produto. Após adicionar, expanda o campo.
Eu venderei um produto chamado “Exemplo de Produto”, que já foi criado como uma entrada de Download. Após preencher as seções Rótulo do Campo e Descrição, conectarei meu campo de Produto ao Easy Digital Downloads selecionando “Exemplo de Produto” no menu suspenso Conectar ao Download EDD.
Continuando com as configurações, definirei meu Tipo de Campo como “Produto Único” com um Preço de $10. Observe que, como estou no controle total do formulário, devo definir o preço eu mesmo. Ele não é extraído da entrada do Download.
Por último, marcarei a caixa Desabilitar campo de quantidade e definirei as únicas Regras como Obrigatório.
Vamos dar uma olhada em uma visualização atualizada do meu formulário de checkout personalizado.
Com apenas esses campos definidos, você criou um formulário que está preparado para vender o “Exemplo de Produto” aos seus clientes. Tudo o que você precisa fazer agora é adicionar campos para aceitar o pagamento.
Por favor, observe que exibir o campo Produto é opcional. Embora o campo deva estar presente para conectar o formulário ao produto, você pode selecionar “Oculto” como o Tipo de Campo, o que incluirá o campo na submissão, mas o cliente nunca verá o campo em si.
O motivo pelo qual você pode querer fazer isso é porque este formulário de checkout pode ser incorporado (via shortcode) em uma página que já fornece informações importantes sobre o produto, incluindo o preço. Se este for o caso, exibir o campo Produto no formulário pode ser redundante e até confuso para o cliente.
Apenas lembre-se que o campo deve estar presente.
Neste ponto, você deve salvar seu formulário. O próximo passo exigirá que você visite outras páginas para configurar as opções de pagamento. Uma vez concluído, revisitaremos o formulário.
Adicionando campos de pagamento
Agora estamos livres para aceitar pagamentos de clientes. Para fazer isso, precisamos configurar o formulário para aceitar pelo menos um método de pagamento. Como mencionado anteriormente, usaremos o add-on PayPal Payments Standard para Gravity Forms para processar nossos pagamentos.
Dependendo do gateway de pagamento que você escolher, você pode ou não precisar adicionar um campo direto ao seu formulário. Por exemplo, se você estiver usando o add-on Stripe, ele adicionará um campo de Cartão de Crédito ao construtor de formulários que você pode selecionar como fez anteriormente.
No entanto, o add-on PayPal Payments Standard não. Em vez disso, você precisaria seguir as instruções diretamente do Gravity Forms para configurar seus formulários para usar o PayPal para transações de clientes.
Neste artigo, não cobriremos esses detalhes. Eles se aplicam ao Gravity Forms, quer seja integrado ou não ao Easy Digital Downloads. Portanto, você vai querer usar a documentação do Gravity Forms para encontrar os documentos relevantes às suas necessidades.
Complete todas as etapas necessárias para configurar seus gateways de pagamento. Se um novo campo precisar ser adicionado ao formulário, faça-o seguindo os mesmos métodos descritos acima.
Adicionando o valor final do pagamento (total)
Ao configurar sua(s) opção(ões) de pagamento, você teria sido instruído a criar um Feed para cada tipo de pagamento que aceitaria. Usuários do PayPal Payments Standard teriam visitado esta documentação.
Na criação desse Feed, você teria que definir o Valor do Pagamento para o Feed. O que isso significa é que toda vez que seu formulário de checkout for enviado, o cliente deverá pagar um determinado valor e o Feed precisa saber de onde você está puxando esse valor.
A configuração do Valor do Pagamento deve ser definida para puxar dados de um dos seus campos do formulário que contém o valor total do formulário. No entanto, ainda não configuramos esse campo. Salve o progresso do seu Feed e volte ao seu formulário salvo para que possamos adicionar o campo.
No lado direito da tela do construtor de formulários, selecione para adicionar um campo de Total ao seu formulário na seção Campos de Preço. Uma vez adicionado, expanda o novo campo.
Você verá que não há muitas configurações. O campo é projetado para calcular automaticamente o total do formulário com base nas informações que ele obtém de outros campos do formulário e possível interação do cliente.
Com este campo adicionado ao seu formulário e seu formulário atualizado, você pode agora definir este campo como o Valor do Pagamento em seu Feed.
Continue seguindo o restante da documentação do Gravity Forms para finalizar as configurações do seu Feed e salvar o novo Feed.
Usando seu formulário de checkout personalizado
Agora que você criou um formulário de checkout personalizado preparado para aceitar pagamentos, você precisa exibir seu formulário. O Gravity Forms torna isso extremamente fácil com o shortcode [[gravityform]]. Em qualquer página, postagem ou tipo de postagem personalizada que você desejar, clique no botão Adicionar Formulário para adicionar um formulário ao seu conteúdo.
Uma vez que sua página for salva, o formulário será exibido no front-end e estará pronto para aceitar pagamentos para qualquer produto que você tenha configurado.
Observe que, se o PayPal Payments Standard for o único gateway que você configurou, nenhum texto relacionado ao PayPal será exibido no formulário (a menos que você tenha adicionado texto personalizado). Simplesmente preencher o formulário e enviá-lo redirecionará o cliente para o PayPal para concluir o pagamento.
Exemplos de lógica condicional
Seria impossível cobrir todas as configurações possíveis de formulário neste único artigo. No entanto, podemos compartilhar alguns exemplos para ajudá-lo a começar a tornar seu formulário mais inteligente e amigável.
Vamos dar uma olhada em um formulário de exemplo que usamos aqui no site Easy Digital Downloads. Para ajudar novos usuários a escolher as extensões que eles precisam para colocar suas lojas em funcionamento, criamos o Pacote Inicial. (Atualização: nosso Pacote Inicial não está mais ativo, pois fizemos alterações em nossas opções gerais de compra. Você pode continuar lendo como se ele existisse.)
Este formulário independente não depende da funcionalidade do carrinho de compras.
Dividido em seções lógicas que incluem seleções de extensão, tudo o que um cliente precisa fazer é selecionar as extensões que se encaixam nas necessidades de seu negócio, inserir informações pessoais e de pagamento, concordar com os termos e concluir a compra.
Não apenas o formulário é totalmente personalizado, mas ele pode facilmente ser um de muitos formulários de checkout personalizados no site. Com as informações acima, você pode estar a caminho de ter exatamente isso.
Pacotes de produtos personalizados
Em nosso formulário do Pacote Inicial, você pode ter notado o uso de seções de extensão focadas que permitem ao cliente escolher certos produtos. Vamos olhar especificamente para a seção de Marketing.
Sempre que um usuário marca uma caixa para uma de nossas extensões de marketing, a extensão é adicionada ao seu pacote inicial personalizado, alterando assim o total do formulário.
Para conseguir isso, você deve:
- Adicione um novo campo de Checkboxes ao seu formulário. Uma vez expandido, três opções de caixa de seleção padrão aparecerão na seção Choices. Se você pretende usar este campo de caixa de seleção para permitir a seleção de cinco produtos, por exemplo, você deve criar cinco escolhas que representem os nomes de seus cinco produtos. Torne este um campo obrigatório.
- Adicione um novo campo de Produto ao seu formulário. Configure o campo de Produto para se conectar a um dos produtos Easy Digital Downloads que você referenciou a partir de suas escolhas de caixa de seleção. Na aba Configurações Gerais do Produto, defina seu Tipo de Campo para “Produto Único” (não pode ser oculto) e dê um preço. Na aba Avançado, marque a configuração Habilitar Lógica Condicional e configure o campo para aparecer somente se a “Escolha” correta do seu campo de caixa de seleção na etapa 1 for selecionada.
- Repita a etapa 2 para todas as Escolhas criadas na etapa 1.
O que isso faz é adicionar campos de Produto ao formulário apenas quando suas condições são atendidas. Essas condições são Escolhas verificadas do campo de caixa de seleção. Desde que essas Escolhas representem seus produtos e estejam vinculadas a eles através da lógica condicional de campo, os clientes podem criar seus próprios pacotes personalizados.
Seletor de método de pagamento
Perto do final do nosso formulário Pacote Inicial, instruímos o cliente a selecionar um método de pagamento. Aceitamos pagamentos através do Stripe e PayPal.
Como mencionado acima, diferentes métodos são usados para adicionar campos ao formulário para informações de pagamento. PayPal Payments Standard não requer um campo, mas Stripe requer vários. O campo Cartão de Crédito da Stripe e um campo de Endereço adicional devem ser adicionados ao formulário para processar pagamentos com cartão de crédito.
Para criar isso, você deve:
- Adicione um novo campo de Botões de Rádio ao seu formulário. Uma vez expandido, três opções de rádio padrão aparecerão na seção Choices. Como estamos permitindo que os clientes escolham entre dois métodos de pagamento, você deve ter duas escolhas que representem os nomes dos métodos de pagamento. Em nosso caso, escolhemos Cartão de Crédito / Débito e PayPal como escolhas. Torne este um campo obrigatório.
- Adicione todos os campos necessários para aceitar pagamentos com cartão de crédito com base nas instruções do Gravity Forms. Configure os campos para coletar todas as informações necessárias. Na aba Avançado de todos os campos relacionados a cartão de crédito, marque a configuração Habilitar Lógica Condicional e configure os campos para aparecer somente se a “Escolha” correta do seu campo de botões de rádio na etapa 1 for selecionada.
- Como o PayPal não requer nenhum campo no formulário, tudo o que você precisa fazer é ir ao seu Feed do PayPal para o formulário e, em suas configurações, marcar a configuração Habilitar Lógica Condicional e configurar o Feed para ser usado apenas se a “Escolha” correta do seu campo de botões de rádio na etapa 1 for selecionada (PayPal).
A escolha é sua
Esta é uma coisa difícil de escrever, porque uma vez que você entende o conceito de lógica de campo condicional, você realmente tem uma tela em branco para trabalhar toda vez que cria um formulário de checkout personalizado.
Podemos fornecer exemplos, mas as possibilidades são infinitas. A chave para tudo isso é a lógica condicional e o uso estratégico de campos de Produto.
Cabe a você decidir se seus produtos precisam de um formulário de checkout mais especializado. Da mesma forma, criar algo semelhante ao nosso Pacote Inicial é uma decisão de negócios que só você pode tomar.
Brinque com os recursos para ver se isso desperta algumas ideias lucrativas.
Perguntas Frequentes
Posso usar o Gravity Forms Checkout com a extensão Recurring Payments?
Não. Recurring Payments não se integra com a configuração acima.
E os recibos por e-mail e confirmação de compra?
O redirecionamento padrão de confirmação de compra do Easy Digital Downloads não se aplica mais. No entanto, o Gravity Forms permitirá que você configure um comportamento de confirmação personalizado, se assim desejar. Uma página padrão com links estáticos é recomendada.
O recibo por e-mail ainda será enviado ao usuário contendo qualquer informação relacionada ao produto que você tenha em seu modelo de recibo. Esse comportamento não muda.
Dica: a partir de uma confirmação personalizada que você cria no Gravity Forms, direcione seus clientes para verificar seus e-mails após a compra e os vincule a informações importantes que podem minimizar a confusão.
Se eu permitir que os clientes criem pacotes personalizados, eles serão processados como Pacotes (Bundles)?
A funcionalidade de pacote (bundle) principal do Easy Digital Downloads não se aplica. Se um cliente comprar 10 produtos através de um de seus formulários de checkout personalizados, cada produto é considerado uma compra separada.
Como uso descontos?
Para oferecer descontos aos clientes usando o formulário de checkout personalizado, você deve simplesmente definir os campos de Produto com um preço com desconto. Os clientes não poderão inserir um código de desconto como no formulário de checkout padrão.
Como estilizo meus formulários de checkout personalizados?
É importante notar que tudo o que discutimos aqui é a construção do formulário e sua funcionalidade. Estes são elementos genéricos de formulário e devem ser estilizados pelo seu tema ou pelo seu próprio CSS personalizado, como qualquer outro elemento HTML.
Ao testar seu formulário, certifique-se de testar a funcionalidade adequada. Se ele parece agradável aos olhos ou não, não é uma indicação de como ele funciona. Como você pode imaginar, a criação da exibição do Pacote Inicial levou várias horas de trabalho de design personalizado.
Se você tiver alguma dúvida sobre o que foi mencionado neste artigo, sinta-se à vontade para deixar uma pergunta abaixo nos comentários.
Para suporte, por favor, use nosso formulário de suporte.
