O Bloco de Meta de Produto exibe os metadados associados a cada produto WooCommerce em seus Modelos de Produto Único. Isso inclui informações como categorias de produtos, tags e SKU — os detalhes que ajudam os clientes a entenderem mais sobre um produto e a encontrarem itens relacionados.
Este bloco foi projetado exclusivamente para uso em Modelos de Produto Único e busca dinamicamente os metadados corretos para cada produto. Você pode escolher como os metadados são organizados, controlar o espaçamento e o alinhamento, personalizar as cores do texto e dos links, e adicionar um caractere divisor entre os itens em linha — dando a você controle total sobre como os detalhes do produto são apresentados.
Adicionando o Bloco de Meta de Produto às Suas Páginas
Siga estas etapas para adicionar um bloco de Meta de Produto ao seu Modelo de Produto Único do SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos > Tags de Modelo do WooCommerce, arraste e solte o bloco Meta de Produto na seção desejada do seu Modelo de Produto Único.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Meta de Produto para abrir suas configurações. A aba Conteúdo é organizada em duas seções — Layout para controlar como os metadados são exibidos, e Configurações de Layout para ajustar a tipografia e as cores.
Layout:
- Visualização: Escolha como os itens de metadados são organizados. Tabela exibe cada item em um layout de duas colunas de rótulo/valor. Empilhado coloca o rótulo acima do valor em uma pilha vertical. Em linha exibe todos os itens lado a lado em uma única linha, separados pelo caractere divisor.
- Espaço Entre: Defina o espaçamento vertical (1–100px) entre cada linha de metadados ao usar a visualização Tabela ou Empilhado.
- Alinhamento: Defina o alinhamento horizontal do conteúdo dos metadados — Esquerda, Centro ou Direita.
- Divisor: Insira um caractere ou símbolo que separa os itens de metadados quando exibidos na visualização Em linha (o padrão é uma vírgula). Você pode usar qualquer caractere, como um pipe (|), hífen (–) ou marcador (•).
Configurações de Layout:
- Tipografia do Texto: Defina a família da fonte, tamanho, peso, altura da linha e espaçamento entre letras para as partes de texto simples dos metadados (como rótulos como “Categoria:” ou “SKU:”).
- Cor do Texto: Defina a cor do texto simples dos metadados.
- Tipografia do Link: Defina a tipografia para os valores de metadados que são exibidos como links clicáveis (como nomes de categorias e tags).
- Cor do Link: Defina a cor do texto do link de metadados, permitindo que ele se destaque visualmente do texto do rótulo circundante.
- Tipografia do Divisor: Defina o tamanho e o estilo da fonte do caractere divisor usado entre os itens de metadados em linha.
- Cor do divisor: Defina a cor do caractere divisor entre os itens de metadados em linha.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode estilizar ainda mais o bloco com opções de fundo, bordas, espaçamento e controles de visibilidade.
Fundo:
- Fundo: Defina uma cor de fundo, gradiente ou imagem atrás de todo o bloco de Metadados do Produto. Isso é útil para separar visualmente a área de metadados do conteúdo circundante na página do produto.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Metadados do Produto (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre os metadados e os elementos circundantes na página.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Metadados do Produto (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo dos metadados e as bordas do bloco.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Metadados do Produto. Este ID é 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 (por exemplo, data-meta|produto).
Borda:
- Raio da Borda: Defina o arredondamento dos cantos para o bloco de Metadados do Produto.
- Estilo da Borda: Escolha um estilo de borda — Sólido, Pontilhado ou Tracejado.
- Cor da Borda: Defina a cor da borda para o bloco.
- Largura da Borda: Defina a espessura da borda por lado (Superior, Direita, Inferior, Esquerda).
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de Metadados do Produto em telas de desktop.
- Ocultar no Tablet: Oculte o bloco de Metadados do Produto em dispositivos tablet.
- Ocultar no Celular: Oculte o bloco de Metadados 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 de Metadados do Produto entra na tela. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitas outras.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco de Metadados do Produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Metadados do Produto ao seu Modelo de Produto Único! O bloco busca automaticamente categorias, tags, SKU e outros metadados do produto diretamente do WooCommerce para cada produto. Experimente o layout da visualização, as cores dos links e as configurações do divisor para apresentar os metadados do produto de uma forma que complemente o design da sua loja e ajude os compradores a encontrar produtos relacionados rapidamente.