O bloco Estoque do produto exibe a disponibilidade em tempo real de cada produto WooCommerce em seus modelos de produto único. Mostrar aos clientes exatamente quantas unidades estão em estoque cria urgência e ajuda os compradores a tomarem decisões de compra mais rápidas.
Este bloco foi projetado exclusivamente para uso em modelos de produto único. Ele usa um código dinâmico para extrair automaticamente a contagem de estoque do WooCommerce para cada produto, de modo que as informações permaneçam precisas sem atualizações manuais. Você também pode combinar o código com texto personalizado, ajustar o tamanho e o alinhamento da fonte e estilizar a saída com tipografia, cores e efeitos de sombra.
Adicionando o bloco de estoque de produtos às suas páginas
Siga estas etapas para adicionar um bloco de estoque de produtos ao seu modelo de produto único do SeedProd:
Passo 1: Adicione o bloco
Em Design > Blocos > Tags de modelo do WooCommerce, arraste e solte o bloco Estoque do produto na seção desejada do seu modelo de produto único.
Etapa 2: Configurar as definições de conteúdo
Depois de adicioná-lo, clique no bloco Estoque do produto para abrir suas configurações. Na guia Conteúdo, você pode editar o texto de exibição do estoque, ajustar o alinhamento e definir o tamanho da fonte.
- Texto: O campo de conteúdo é pré-preenchido com o
shortcode, que busca dinamicamente a contagem de estoque do WooCommerce para cada produto. Você pode adicionar um texto personalizado antes ou depois do shortcode — por exemplo, “Apenas em estoque!” — para criar uma mensagem mais atraente. Alterne entre o Editor visual (texto rico) e Editar HTML (código) usando o botão abaixo do campo. - Alinhamento: defina o alinhamento horizontal do texto padrão — Esquerda, Centro ou Direita. Suporta alinhamento por dispositivo para desktop, tablet e celular.
- Tamanho da fonte: defina o tamanho da fonte do texto padrão usando o controle deslizante (10–72 px).
Etapa 3: Personalizar o design
Na guia Avançado, você pode definir o estilo da aparência do bloco e controlar sua visibilidade em todos os dispositivos.
Estilos:
- Tipografia: Defina a família de fontes, a espessura, a altura da linha, o espaçamento entre letras e a transformação do texto para o texto padrão.
- Cor: Defina a cor do texto da exibição do estoque.
- Sombra do texto: Adicione um efeito de sombra diretamente ao texto padrão. Escolha entre tamanhos predefinidos (Nenhum, Fino, Pequeno, Médio, Grande, Extragrande, 2X Grande) para adicionar profundidade sutil ou dramática ao texto.
- Sombra: Adicione uma sombra ao elemento de bloco geral para destacá-lo visualmente do fundo da página.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco Estoque do produto (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre a exibição do estoque e os elementos ao redor na página.
- Preenchimento: ajuste o espaçamento interno do seu bloco Estoque de produtos (superior, direito, inferior, esquerdo). Isso cria um espaço entre o texto do estoque e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de estoque de produtos. Esse ID é 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 (por exemplo, data-stock|disponível).
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculte o bloco Estoque do produto nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco Estoque do produto em dispositivos tablet.
- Ocultar no celular: Oculte o bloco Estoque do produto em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha entre vários efeitos de animação que são reproduzidos quando o bloco Estoque do produto é exibido. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muito mais.
Etapa 4: Salve suas alterações
Depois de terminar de configurar o bloco Estoque de produtos e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de estoque de produtos ao seu modelo de produto único! O bloco exibe automaticamente a contagem de estoque em tempo real do WooCommerce para cada produto, mantendo os compradores informados sem qualquer esforço manual de sua parte. Experimente personalizar o texto, o tamanho da fonte e a cor para criar uma mensagem de disponibilidade de estoque que crie urgência e incentive os clientes a comprar antes que o estoque se esgote.