O bloco de Checkout EDD permite criar uma página de checkout totalmente personalizável para sua loja Easy Digital Downloads. Este bloco exibe todos os elementos do checkout, incluindo formulários de informações de faturamento, resumo do carrinho e opções de pagamento, com controle total sobre estilo e layout.
Uma página de checkout bem projetada é o passo final para converter visitantes em compradores. Com este bloco, você pode criar uma experiência de checkout que gera confiança, reduz atritos e combina perfeitamente com sua marca. Personalize campos de formulário, botões, exibições de carrinho e seções de pagamento para criar um caminho contínuo do carrinho à compra concluída.
Adicionando o Bloco de Checkout EDD às Suas Páginas
Siga estas etapas para adicionar um bloco de Checkout EDD à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > Easy Digital Downloads, arraste e solte o bloco Checkout na seção desejada da sua página.
O bloco de Checkout EDD está localizado em Easy Digital Downloads e pode ser adicionado para criar uma página de checkout personalizada.
Etapa 2: Personalize o Design
Após adicionar, clique no bloco de Checkout EDD para abrir suas configurações. Na aba Estilos, você pode personalizar todos os aspectos da aparência da sua página de checkout.
Campos:
- Cor de Fundo do Campo: Defina a cor de fundo para campos de entrada de formulário como nome, e-mail e endereço
- Cor do Texto do Campo: Escolha a cor para o texto inserido nos campos do formulário
- Cor da Borda do Campo: Defina a cor das bordas ao redor dos campos de entrada
- Espessura da Borda do Campo: Ajuste a espessura das bordas dos campos (Superior, Direita, Inferior, Esquerda)
- Espaçamento de Linha: Controle o espaçamento vertical entre as linhas dos campos do formulário
- Raio da Borda: Ajuste o arredondamento dos cantos dos campos. Valores mais altos criam campos mais arredondados
Botões:
- Estilo do Botão: Escolha o tratamento visual para botões de checkout como “Completar Compra”. As opções incluem Flat (design plano moderno), 2D (profundidade sutil), Vintage (visual clássico), Ghost (transparente com borda) ou Link (link de texto simples)
- Cor do Botão: Defina a cor de fundo para o botão de compra
- Raio da Borda: Ajuste o arredondamento dos cantos dos botões
Carrinho:
- Cor da Borda do Carrinho: Defina a cor das bordas ao redor da seção de resumo do carrinho
- Espessura da Borda do Carrinho: Ajuste a espessura das bordas do carrinho (Superior, Direita, Inferior, Esquerda)
- Cor de Fundo: Defina a cor de fundo para a área de resumo do carrinho
- Tipografia do Cabeçalho: Controle as propriedades da fonte para cabeçalhos da seção do carrinho como “Resumo do Pedido”
- Cor do Cabeçalho: Defina a cor para o texto do cabeçalho do carrinho
- Tipografia do Item: Personalize as propriedades da fonte para nomes de produtos no carrinho
- Cor do Item do Carrinho: Escolha a cor para o texto do item do carrinho
- Tipografia do Link: Controle as propriedades da fonte para links do carrinho
- Cor dos Links do Carrinho: Defina a cor para links clicáveis na seção do carrinho
Seção de Pagamento:
- Cor de Fundo: Defina a cor de fundo para a seção de métodos de pagamento
- Cor da Borda dos Pagamentos: Escolha a cor para as bordas ao redor das opções de pagamento
- Largura da Borda dos Pagamentos: Ajuste a espessura das bordas da seção de pagamentos (Superior, Direita, Inferior, Esquerda)
- Raio da Borda dos Pagamentos: Controle o arredondamento dos cantos da seção de pagamentos
- Cor do Rótulo: Defina a cor para os rótulos dos campos de pagamento
- Tipografia do Rótulo: Personalize as propriedades da fonte para os rótulos de pagamento
- Cor do Título: Escolha a cor para os títulos dos métodos de pagamento (como “Cartão de Crédito” ou “PayPal”)
- Tipografia do Título: Controle as propriedades da fonte para os títulos de pagamento
- Cor da Descrição: Defina a cor para as descrições dos métodos de pagamento
- Tipografia da Descrição: Personalize as propriedades da fonte para as descrições de pagamento
- Cor do Total: Escolha a cor para a exibição do total do pedido
- Tipografia do Total: Controle as propriedades da fonte para o valor total
A aba Estilos oferece opções abrangentes de personalização para campos de formulário, botões, exibição do carrinho e seções de pagamento.
Passo 2a: Escolha um Estilo de Modelo
Na aba Modelos, você pode selecionar entre estilos de campo pré-projetados para alterar rapidamente a aparência geral do seu formulário de checkout.
- Campo de Entrada Claro, Campo de Entrada Sem Borda, Campo de Entrada com Borda Larga, Campo de Entrada Cinza, Campo de Entrada Escuro, Campo com Borda Inferior, Campo de Entrada Transparente: Escolha entre sete designs diferentes de modelo para seus campos de formulário, cada um com abordagens de estilo exclusivas. Visualize cada estilo para encontrar aquele que melhor se adapta ao design da sua página.
A aba Modelos oferece sete estilos de campo pré-projetados para personalizar rapidamente a aparência do seu formulário de checkout.
Etapa 3: Configure Opções Avançadas
Na aba Avançado, você pode personalizar ainda mais seu bloco de Checkout EDD:
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de checkout (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre o formulário de checkout e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de checkout (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo do checkout e suas bordas
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de checkout. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de JavaScript
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper do checkout. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-checkout|edd-checkout)
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculta o bloco de checkout em telas de desktop
- Ocultar no Tablet: Oculta o bloco de checkout em dispositivos tablet
- Ocultar no Celular: Oculta o bloco de checkout em dispositivos móveis
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando o formulário de checkout entra em foco. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras
A aba Avançado oferece opções de espaçamento, atributos personalizados, visibilidade do dispositivo e efeitos de animação.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco EDD Checkout e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco EDD Checkout à sua página! Esta solução completa de checkout ajuda você a criar uma experiência de checkout profissional e com marca, que gera confiança no cliente e otimiza o processo de compra. Experimente diferentes estilos de campo, cores e opções de layout para criar uma página de checkout que converte visitantes em compradores e maximiza suas vendas de produtos digitais.