O bloco Checkout permite incorporar um formulário de checkout WooCommerce totalmente personalizado em qualquer página do SeedProd. Ele oferece controle total sobre o layout e o estilo visual do checkout — desde as cores dos campos, tipografia dos rótulos e espaçamento entre linhas até o design dos botões, estilo do carrinho e aparência da seção de pagamento — para que você possa criar uma experiência de checkout que corresponda à sua marca sem tocar em nenhum código.
Use este bloco para criar uma página de checkout simplificada e alinhada à sua marca, que reduz o atrito e mantém os clientes focados em concluir a compra. Após publicar sua página, basta atribuí-la como sua página de checkout nas configurações do WooCommerce para que os clientes sejam direcionados automaticamente a ela.
Adicionando o Bloco Checkout às Suas Páginas
Siga estas etapas para adicionar um bloco Checkout à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > WooCommerce, arraste e solte o bloco Checkout na seção desejada da sua página.
Etapa 2: Configurar Configurações de Estilo
Após adicionar, clique no bloco Checkout para abrir suas configurações. Na aba Estilos, as configurações sã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 para os cabeçalhos das seções dentro do formulário de checkout.
- Tipografia: Defina a família da fonte, tamanho, altura da linha, espaçamento entre letras, peso, estilo e caixa 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 do Rótulo: Defina a cor do texto para os rótulos dos campos.
- Tipografia do Rótulo: Defina a família da fonte, tamanho, altura da linha, espaçamento entre letras, peso, estilo e caixa para o texto do rótulo do campo.
- Espaçamento entre Linhas: Ajuste o espaçamento vertical entre as linhas de campos do formulário usando um controle deslizante (padrão: 6px).
Botões:
- Estilo do Botão: Escolha um estilo visual para os botões de checkout — Flat, 2D, Vintage, Ghost ou Link.
- Cor do Botão: Defina a cor de fundo dos botões de ação de checkout.
- Raio da Borda: Ajuste o arredondamento dos cantos dos botões de checkout usando um controle deslizante.
Alertas:
- Cor de Destaque de Informação: 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 de resumo do pedido.
- Largura da Borda do Carrinho: Defina a espessura da borda em cada lado da tabela do carrinho.
- Raio da Borda: Ajuste o arredondamento 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 dentro da tabela do carrinho.
- Família da Fonte: 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.
- Família da Fonte do Cabeçalho: Escolha a fonte usada 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 Pagamento:
- Cor de Fundo: Defina a cor de fundo da seção de métodos de pagamento.
- Cor do Texto: Defina a cor do texto dentro da seção de métodos de pagamento.
- Família da Fonte: Escolha a fonte usada para o texto da seção de pagamento.
Etapa 3: Escolha um Modelo
Na aba Modelos, você pode escolher entre uma coleção de estilos de checkout pré-projetados. Cada modelo aplica um conjunto coordenado de estilos de campo, botão e layout ao seu formulário de checkout com um 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: Personalize o Design
Na aba Avançado, você pode refinar ainda mais o layout e o comportamento do seu bloco de Checkout.
Espaçamento:
- Margem: Defina o espaçamento externo ao redor do bloco em todos os quatro lados, com controles independentes para desktop, tablet e celular.
- Preenchimento: Defina o espaçamento interno dentro do wrapper do bloco em todos os quatro lados, com controles por dispositivo.
Atributos:
- Classe Personalizada: Adicione uma ou mais classes CSS personalizadas ao wrapper do bloco para estilização direcionada.
- 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 personalizado.
- 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 no Desktop: Ative para ocultar o bloco quando visualizado em telas de desktop.
- Ocultar no Tablet: Ative para ocultar o bloco quando visualizado em telas de tablet.
- Ocultar no Celular: Ative para ocultar o bloco ao ser visualizado em telas de celular.
Efeitos de Animação:
- Efeito de Rolagem: Aplique uma animação acionada por rolagem ao bloco, incluindo opções de Rolagem Vertical e Rolagem Horizontal com controles de direção, velocidade e deslocamento de visualização.
- Efeito do Mouse: Aplique um efeito de paralaxe ao bloco, acionado pelo movimento do mouse.
Etapa 5: Definir 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 ao prosseguir para concluir uma compra.
Etapa 6: Salvar suas alterações
Depois de terminar de configurar o bloco de 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é-projetados e controle granular sobre cada detalhe visual — de rótulos de campo e estilos de botão a cabeçalhos da tabela de carrinho e tipografia da seção de pagamento — você pode criar uma experiência de checkout que pareça 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.