O bloco EDD Checkout permite criar uma página de checkout totalmente personalizada para a sua loja Easy Digital Downloads. Este bloco exibe todos os elementos de checkout, incluindo formulários de informações de faturamento, resumo do carrinho e opções de pagamento, com controle total sobre o estilo e o layout.
Uma página de checkout bem projetada é a etapa 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 a sua marca. Personalize campos de formulário, botões, exibições do carrinho e seções de pagamento para criar um caminho contínuo do carrinho até a conclusão da compra.
Adicionando o bloco de checkout EDD às suas páginas
Siga estas etapas para adicionar um bloco EDD Checkout à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > Easy Digital Downloads, arraste e solte o bloco Checkout na seção desejada da sua página.
O bloco EDD Checkout está localizado em Easy Digital Downloads e pode ser adicionado para criar uma página de checkout personalizada.
Etapa 2: Personalizar o design
Depois de adicionado, clique no bloco EDD Checkout para abrir suas configurações. Na guia 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 do formulário, como nome, e-mail e endereço.
- Cor do texto do campo: escolha a cor do texto inserido nos campos do formulário
- Cor da borda do campo: defina a cor das bordas ao redor dos campos de entrada.
- Largura da borda do campo: Ajuste a espessura das bordas do campo (superior, direita, inferior, esquerda)
- Espaçamento entre linhas: controle o espaçamento vertical entre as linhas do campo do formulário
- Raio da borda: Ajuste a curvatura dos cantos do campo. Valores mais altos criam campos mais arredondados.
Botões:
- Estilo do botão: escolha o tratamento visual para botões de checkout, como “Concluir compra”. As opções incluem Flat (design plano moderno), 2D (profundidade sutil), Vintage (aparência clássica), Ghost (transparente com borda) ou Link (link de texto simples).
- Cor do botão: defina a cor de fundo do botão de compra.
- Raio da borda: ajuste a curvatura 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.
- Largura 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 do texto do cabeçalho do carrinho
- Tipografia do item: personalize as propriedades da fonte para os nomes dos produtos no carrinho
- Cor do item do carrinho: escolha a cor do 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 dos links clicáveis na seção do carrinho
Seção de Pagamentos:
- 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 das 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 a curvatura dos cantos da seção de pagamentos
- Cor da etiqueta: defina a cor das etiquetas dos campos de pagamento
- Tipografia da etiqueta: personalize as propriedades da fonte para etiquetas de pagamento
- Cor do título: escolha a cor dos 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 títulos de pagamento
- Descrição Cor: Defina a cor para as descrições dos métodos de pagamento
- Descrição Tipografia: Personalize as propriedades da fonte para descrições de pagamento
- Cor total: escolha a cor para a exibição do total do pedido
- Tipografia total: controle as propriedades da fonte para o valor total
A guia Estilos oferece opções abrangentes de personalização para campos de formulário, botões, exibição do carrinho e seções de pagamento.
Etapa 2a: Escolha um estilo de modelo
Na guia Modelos, você pode selecionar estilos de campo pré-concebidos 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 modelos diferentes para os campos do seu formulário, cada um com um estilo único. Visualize cada estilo para encontrar o que melhor se adapta ao design da sua página.
A guia Modelos oferece sete estilos de campo pré-concebidos para personalizar rapidamente a aparência do seu formulário de checkout.
Etapa 3: Configurar opções avançadas
Na guia Avançado, você pode personalizar ainda mais o seu bloco EDD Checkout:
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de checkout (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre o formulário de checkout e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno do seu bloco de checkout (superior, direito, inferior, esquerdo). Isso cria um espaço entre o conteúdo do checkout e suas bordas.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de checkout. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 na área de trabalho: Oculte o bloco de checkout nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco de checkout em dispositivos tablet.
- Ocultar no celular: Oculte 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 é exibido. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais.
A guia Avançado oferece opções para 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 personalizada com a sua marca, que aumenta a confiança do cliente e simplifica o processo de compra. Experimente diferentes estilos de campos, cores e opções de layout para criar uma página de checkout que converta visitantes em compradores e maximize as vendas dos seus produtos digitais.