O bloco Checkout permite incorporar um formulário de checkout WooCommerce totalmente personalizado em qualquer página SeedProd. Ele oferece controle total sobre o layout e o estilo visual do checkout — desde as cores dos campos, a tipografia dos rótulos e o espaçamento entre linhas até o design dos botões, o estilo do carrinho e a aparência da seção de pagamento — para que você possa criar uma experiência de checkout que corresponda à sua marca sem precisar mexer em nenhum código.
Use este bloco para criar uma página de checkout simplificada e alinhada com a marca, que reduz o atrito e mantém os clientes focados em concluir a compra. Depois que sua página for publicada, basta atribuí-la como sua página de checkout nas configurações do WooCommerce para que os clientes sejam direcionados para ela automaticamente.
Adicionando o bloco de checkout às suas páginas
Siga estas etapas para adicionar um bloco Checkout à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > WooCommerce, arraste e solte o bloco Checkout na seção desejada da sua página.
Etapa 2: Configurar as definições de estilo
Depois de adicionado, clique no bloco Checkout para abrir suas configurações. Na guia Estilos, as configurações estão organizadas em sete seções.
Layout:
- Colunas do layout: escolha entre um layout de uma coluna (campos de faturamento e resumo do pedido empilhados verticalmente) ou um layout de duas colunas (campos de faturamento à esquerda, resumo do pedido à direita).
Cabeçalhos:
- Cor do cabeçalho: defina a cor do texto dos cabeçalhos das seções no formulário de checkout.
- Tipografia: defina a família de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas/minúsculas para o texto do cabeçalho do checkout.
Campos:
- Cor de fundo do campo: defina a cor de fundo dos campos de entrada do checkout.
- Cor do texto do campo: defina a cor do texto dentro dos campos de entrada.
- Cor da borda do campo: defina a cor da borda dos campos de entrada.
- Largura da borda do campo: defina a espessura da borda em cada lado dos campos de entrada.
- Cor da etiqueta: defina a cor do texto para as etiquetas dos campos.
- Tipografia do rótulo: defina a família de fontes, tamanho, altura da linha, espaçamento entre letras, peso, estilo e maiúsculas e minúsculas para o texto do rótulo do campo.
- Espaçamento entre linhas: ajuste o espaçamento vertical entre as linhas do campo do formulário usando um controle deslizante (padrão: 6 px).
Botões:
- Estilo do botão: escolha um estilo visual para os botões de checkout — Plano, 2D, Vintage, Fantasma ou Link.
- Cor do botão: defina a cor de fundo dos botões de ação do checkout.
- Raio da borda: ajuste a curvatura dos cantos dos botões de checkout usando um controle deslizante.
Alertas:
- Cor de destaque das informações: defina a cor usada para mensagens de alerta informativas.
- Cor de destaque de erro: defina a cor usada para mensagens de alerta de erro.
- Cor de destaque de sucesso: defina a cor usada para mensagens de alerta de sucesso.
Carrinho:
- Cor da borda do carrinho: defina a cor da borda da tabela do carrinho com o resumo do pedido.
- Largura da borda do carrinho: defina a espessura da borda em cada lado da tabela do carrinho.
- Raio da borda: ajuste a curvatura dos cantos da tabela do carrinho usando um controle deslizante.
- Cor de fundo: defina a cor de fundo da tabela do carrinho.
- Cor do texto: defina a cor geral do texto na tabela do carrinho.
- Família de fontes: escolha a fonte usada para o texto do corpo do carrinho.
- Cor de fundo do cabeçalho: defina a cor de fundo da linha do cabeçalho da tabela do carrinho.
- Fonte do cabeçalho: escolha a fonte utilizada para o texto do cabeçalho do carrinho.
- Cor do cabeçalho: defina a cor do texto da linha do cabeçalho da tabela do carrinho.
Seção de Pagamentos:
- Cor de fundo: defina a cor de fundo da seção de métodos de pagamento.
- Cor do texto: defina a cor do texto na seção de métodos de pagamento.
- Família de fontes: escolha a fonte usada para o texto da seção de pagamento.
Etapa 3: Escolha um modelo
Na guia Modelos, você pode escolher entre uma coleção de estilos de checkout pré-concebidos. Cada modelo aplica um conjunto coordenado de estilos de campo, botão e layout ao seu formulário de checkout com um único clique. Os estilos de campo de entrada disponíveis incluem Claro, Sem borda, Borda larga, Sombra interna, Cinza, Escuro, Borda inferior e Transparente.
Etapa 4: Personalizar o design
Na guia Avançado, você pode refinar ainda mais o layout e o comportamento do seu bloco Checkout.
Espaçamento:
- Margem: defina o espaçamento externo ao redor do bloco nos quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: defina o espaçamento interno dentro do bloco wrapper nos quatro lados, com controles por dispositivo.
Atributos:
- Classe personalizada: adicione uma ou mais classes CSS personalizadas ao invólucro do bloco para obter um estilo específico.
- ID CSS: O SeedProd gera automaticamente um ID CSS exclusivo para este bloco. Você pode usá-lo para referenciar o bloco em CSS ou JavaScript personalizados.
- Atributos personalizados: adicione atributos HTML personalizados ao elemento wrapper do bloco. Insira cada atributo em uma nova linha usando o formato chave|valor.
Visibilidade do dispositivo:
- Ocultar na área de trabalho: alterne para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no tablet: alterne para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no celular: Alterne para ocultar o bloco quando visualizado em telas de celular.
Efeitos de animação:
- Efeito de rolagem: aplique uma animação acionada pela rolagem ao bloco, incluindo opções de rolagem vertical e horizontal com controles de direção, velocidade e deslocamento da janela de visualização.
- Efeito do mouse: aplique um efeito de paralaxe acionado pelo movimento do mouse ao bloco.
Etapa 5: Defina como sua página de checkout do WooCommerce
Após publicar sua página, navegue até WooCommerce > Configurações > Avançado e defina sua nova página SeedProd como a página de checkout designada. Isso garante que os clientes sejam direcionados para sua página de checkout personalizada quando prosseguirem para concluir uma compra.
Etapa 6: Salve suas alterações
Depois de concluir a configuração do bloco Checkout e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de checkout à sua página! Com opções de layout, modelos pré-concebidos e controle granular sobre cada detalhe visual — desde rótulos de campos e estilos de botões até cabeçalhos de tabelas de carrinho e tipografia da seção de pagamento — você pode criar uma experiência de checkout que parece perfeita e profissional. Não se esqueça de atribuir a página como sua página de checkout nas configurações do WooCommerce para que seus clientes sempre cheguem ao lugar certo.