O bloco Carrinho permite integrar perfeitamente um carrinho de compras WooCommerce em qualquer página SeedProd. Ele exibe os itens que um cliente adicionou, fornece atualizações em tempo real do carrinho e oferece controle total sobre o estilo visual do carrinho — desde as cores dos campos e o design dos botões até a tipografia e as configurações das bordas.
Use este bloco para criar uma página de carrinho WooCommerce totalmente personalizada que corresponda à sua marca, sem precisar mexer em nenhum código. Depois que sua página for publicada, basta designá-la como sua página de carrinho nas configurações do WooCommerce para que os clientes sejam direcionados para ela automaticamente.
Adicionando o bloco Carrinho às suas páginas
Siga estas etapas para adicionar um bloco Carrinho à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > WooCommerce, arraste e solte o bloco Carrinho na seção desejada da sua página.
Etapa 2: Configurar as definições de estilo
Depois de adicionado, clique no bloco Carrinho para abrir suas configurações. Na guia Estilos, as configurações estão organizadas em cinco seções.
Cabeçalhos:
- Cor do cabeçalho: defina a cor do texto para os cabeçalhos das seções dentro do carrinho.
Botões:
- Estilo do botão: escolha um estilo visual para os botões do carrinho — Plano, 2D, Vintage, Fantasma ou Link.
- Cor do botão: defina a cor de fundo dos botões de ação do carrinho.
- Raio da borda: ajuste a curvatura dos cantos dos botões do carrinho usando um controle deslizante.
Campos:
- Cor de fundo do campo: defina a cor de fundo dos campos de entrada no carrinho (como os campos de código de cupom e quantidade).
- 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.
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 do contêiner do carrinho.
- Largura da borda do carrinho: defina a espessura da borda em cada lado do contêiner do carrinho.
- Raio da borda: ajuste a curvatura dos cantos do contêiner do carrinho usando um controle deslizante.
- Cor de fundo: defina a cor de fundo do contêiner do carrinho.
- Cor do texto: defina a cor geral do texto dentro 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 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 do carrinho.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar ainda mais o layout e o comportamento do seu bloco Carrinho.
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.
Passo 4: Defina como sua página de carrinho 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 do carrinho designada. Isso garante que os clientes sejam direcionados para sua página de carrinho personalizada quando clicarem no ícone do carrinho ou prosseguirem a partir de uma página de produto.
Etapa 5: Salve suas alterações
Depois de terminar de configurar o bloco Carrinho e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Carrinho à sua página! Com controle total sobre os estilos dos botões, cores dos campos, tipografia e estilo do contêiner do carrinho, você pode criar uma experiência de carrinho WooCommerce que pareça totalmente nativa da sua marca. Não se esqueça de atribuir a página como sua página de carrinho nas configurações do WooCommerce para que seus clientes sempre cheguem ao lugar certo.