O bloco Carrinho permite integrar perfeitamente um carrinho de compras WooCommerce em qualquer página do 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 de borda.
Use este bloco para criar uma página de carrinho WooCommerce totalmente personalizada que combine com sua marca, sem tocar em nenhum código. Assim 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 a ela automaticamente.
Adicionando o Bloco Carrinho às Suas Páginas
Siga estas etapas para adicionar um bloco Carrinho à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > WooCommerce, arraste e solte o bloco Carrinho na seção desejada da sua página.
Etapa 2: Configurar Configurações de Estilo
Após adicionar, clique no bloco Carrinho para abrir suas configurações. Na aba Estilos, as configurações sã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 — Flat, 2D, Vintage, Ghost ou Link.
- Cor do Botão: Defina a cor de fundo para os botões de ação do carrinho.
- Raio da Borda: Ajuste o arredondamento 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 dentro do carrinho (como 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 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 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 o arredondamento 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 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 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 de cabeçalho do carrinho.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar ainda mais o layout e o comportamento do seu bloco de Carrinho.
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 4: Definir 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 de carrinho designada. Isso garante que os clientes sejam enviados para sua página de carrinho personalizada quando clicarem no ícone do carrinho ou prosseguirem de uma página de produto.
Etapa 5: Salvar 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 de Carrinho à sua página! Com controle total sobre estilos de botões, cores de campos, tipografia e estilo do contêiner do carrinho, você pode criar uma experiência de carrinho WooCommerce que pareça completamente 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.