O bloco Meta do 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 entender mais sobre um produto e encontrar itens relacionados.
Este bloco foi projetado exclusivamente para uso em modelos de produto único e extrai dinamicamente os metadados corretos para cada produto. Você pode escolher como os metadados são dispostos, 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 Meta do produto às suas páginas
Siga estas etapas para adicionar um bloco Meta do produto 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 Meta do produto na seção desejada do seu modelo de produto único.
Etapa 2: Configurar as definições de conteúdo
Depois de adicionado, clique no bloco Meta do produto para abrir suas configurações. A guia Conteúdo está 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:
- Exibir: escolha como os itens de metadados são organizados. A tabela exibe cada item em um layout de rótulo/valor em duas colunas. 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–100 px) entre cada linha de metadados ao usar a visualização Tabela ou Empilhada.
- Alinhamento: defina o alinhamento horizontal do conteúdo dos metadados — Esquerda, Centro ou Direita.
- Divisor: insira um caractere ou símbolo que separe os itens de metadados quando exibidos na visualização em linha (o padrão é uma vírgula). Você pode usar qualquer caractere, como uma barra vertical (|), traço (–) ou marcador (•).
Configurações de layout:
- Tipografia do texto: defina a família, o tamanho, a espessura, a altura da linha e o espaçamento entre letras da fonte 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 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 ao redor.
- Tipografia do divisor: defina o tamanho e o estilo da fonte do caractere divisor usado entre 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 guia Avançado, você pode personalizar ainda mais o bloco com opções de plano de fundo, bordas, espaçamento e controles de visibilidade.
Contexto:
- Plano de fundo: defina uma cor, gradiente ou imagem de fundo para todo o bloco Meta do produto. Isso é útil para separar visualmente a área de metadados do conteúdo ao redor na página do produto.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do bloco Meta do produto (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre os metadados e os elementos ao redor na página.
- Preenchimento: ajuste o espaçamento interno no bloco Meta do produto (superior, direito, inferior, esquerdo). Isso cria um espaço entre o conteúdo dos metadados e as bordas do bloco.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco Meta do produto. 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-meta|produto).
Fronteira:
- Raio da borda: defina o arredondamento dos cantos do bloco Meta do produto.
- Estilo da borda: escolha um estilo de borda — Sólida, Pontilhada ou Tracejada.
- Cor da borda: defina a cor da borda do bloco.
- Largura da borda: defina a espessura da borda por lado (superior, direito, inferior, esquerdo).
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculte o bloco Meta do produto nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco Meta do produto em dispositivos tablet.
- Ocultar no celular: oculte o bloco Meta 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 Meta 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 Meta do produto e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Meta do produto ao seu modelo de produto único! O bloco extrai 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.