O bloco Menu Cart permite adicionar um ícone do carrinho de compras WooCommerce a qualquer página SeedProd. Este bloco exibe um ícone de carrinho com um emblema indicando o número de itens, facilitando aos compradores ver o que está no seu carrinho e navegar para o checkout a partir de qualquer página que você criar.
Opcionalmente, você pode exibir o subtotal do carrinho ao lado do ícone, controlar seu alinhamento e personalizar totalmente a cor do ícone, a cor do emblema e a cor do texto do emblema para combinar com a identidade visual da sua loja.
Adicionando o bloco Menu Cart às suas páginas
Siga estas etapas para adicionar um bloco Menu Cart à sua página SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos, arraste e solte o bloco Menu Carrinho na seção desejada da sua página.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Menu Carrinho para abrir suas configurações. Na guia Conteúdo, configure como o ícone do carrinho será exibido.
- Ocultar quando vazio: ative esta opção para ocultar completamente o ícone do carrinho quando o carrinho do comprador não contiver nenhum item.
- Mostrar subtotal: ative esta opção para exibir o 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 guia Avançado, você pode personalizar a aparência e o espaçamento do seu bloco Menu Carrinho.
Estilos:
- Tipografia: ajuste a família de fontes, a espessura da fonte, o tamanho, a altura da linha, o espaçamento entre letras e a transformação do 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 emblema: defina a cor de fundo do emblema de contagem de itens que aparece no ícone do carrinho.
- Cor do texto do emblema: defina a cor do texto do número de itens exibido dentro do emblema.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco Menu Carrinho (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: ajuste o espaçamento interno do seu bloco Menu Cart (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Menu Cart, criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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 na área de trabalho: oculte o bloco Menu Cart nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco Menu Carrinho em dispositivos tablet.
- Ocultar no celular: oculte o bloco Menu Carrinho em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha um efeito de animação que seja reproduzido quando o bloco Menu Cart aparecer na tela, 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 Carrinho à sua página! Colocar um ícone de carrinho no cabeçalho ou na área de navegação ajuda os compradores a acompanhar suas seleções e os leva ao checkout. Use as configurações de cor do emblema para destacar a contagem de itens e a opção Mostrar subtotal para dar aos compradores uma visão rápida do total do pedido.