O bloco Carrinho do Menu permite adicionar um ícone de carrinho de compras do WooCommerce a qualquer página do SeedProd. Este bloco exibe um ícone de carrinho com um selo de contagem de itens, facilitando para os compradores verem o que está em seus carrinhos e navegarem para o checkout a partir de qualquer página que você criar.
Você pode, opcionalmente, mostrar o subtotal do carrinho ao lado do ícone, controlar seu alinhamento e personalizar totalmente a cor do ícone, a cor do selo e a cor do texto do selo para combinar com a marca da sua loja.
Adicionando o Bloco Carrinho do Menu às Suas Páginas
Siga estas etapas para adicionar um bloco Carrinho do Menu à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Carrinho do Menu na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco Carrinho do Menu para abrir suas configurações. Na aba Conteúdo, configure como o ícone do carrinho é exibido.
- Ocultar quando Vazio: Ative esta opção para ocultar completamente o ícone do carrinho quando o carrinho do comprador não contiver itens.
- Mostrar Subtotal: Ative esta opção para exibir o valor do subtotal do carrinho ao lado do ícone do carrinho.
- Alinhamento: Defina o alinhamento horizontal do ícone do carrinho — Esquerda, Centro ou Direita.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência e o espaçamento do seu bloco Carrinho do Menu.
Estilos:
- Tipografia: Ajuste a família da fonte, peso da fonte, tamanho, altura da linha, espaçamento entre letras e transformação de texto para o subtotal e qualquer texto exibido com o ícone do carrinho. Suporta valores por dispositivo para desktop, tablet e celular.
- Cor: Defina a cor do ícone do carrinho e do texto do subtotal.
- Cor do Selo: Defina a cor de fundo do selo de contagem de itens que aparece no ícone do carrinho.
- Cor do Texto do Selo: Defina a cor do texto do número de contagem de itens exibido dentro do selo.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco Carrinho do Menu (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco Carrinho do Menu (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Carrinho do Menu, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por 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 bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco Menu Cart em telas de desktop.
- Ocultar no Tablet: Oculte o bloco Menu Cart em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco Menu Cart em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha um efeito de animação que é reproduzido quando o bloco Menu Cart rola para a visualização, como Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco Menu Cart e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Menu Cart à sua página! Colocar um ícone de carrinho em sua área de cabeçalho ou navegação ajuda os compradores a acompanhar suas seleções e os direciona para o checkout. Use as configurações de cor do selo para destacar a contagem de itens e a opção Mostrar Subtotal para dar aos compradores uma visão geral do total do pedido.