The Product Meta block displays the metadata associated with each WooCommerce product on your Single Product Templates. This includes information such as product categories, tags, and SKU — the details that help customers understand more about a product and find related items.
This block is designed exclusively for use on Single Product Templates and dynamically pulls the correct metadata for each product. You can choose how the metadata is laid out, control the spacing and alignment, customize the text and link colors, and add a divider character between inline items — giving you full control over how product details are presented.
Adding the Product Meta Block to Your Pages
Follow these steps to add a Product Meta block to your SeedProd Single Product Template:
Step 1: Add the Block
Under Design > Blocks > WooCommerce Template Tags, drag and drop the Product Meta block into the desired section of your Single Product Template.
Step 2: Configure Content Settings
Once added, click on the Product Meta block to open its settings. The Content tab is organized into two sections — Layout for controlling how metadata is displayed, and Layout Settings for fine-tuning typography and colors.
Layout:
- View: Choose how the metadata items are arranged. Table displays each item in a two-column label/value layout. Stacked places the label above the value in a vertical stack. Inline displays all items side by side on a single line, separated by the divider character.
- Space Between: Set the vertical spacing (1–100px) between each metadata row when using the Table or Stacked view.
- Alignment: Set the horizontal alignment of the metadata content — Left, Center, or Right.
- Divider: Enter a character or symbol that separates metadata items when displayed in Inline view (default is a comma). You can use any character, such as a pipe (|), dash (–), or bullet (•).
Layout Settings:
- Text Typography: Set the font family, size, weight, line height, and letter spacing for the plain text portions of the metadata (such as labels like “Category:” or “SKU:”).
- Text Color: Set the color of the plain metadata text.
- Link Typography: Set the typography for metadata values that are displayed as clickable links (such as category and tag names).
- Link Color: Set the color of metadata link text, allowing it to visually stand out from surrounding label text.
- Divider Typography: Set the font size and style of the divider character used between inline metadata items.
- Divider Color: Set the color of the divider character between inline metadata items.
Step 3: Customize the Design
In the Advanced tab, you can further style the block with background options, borders, spacing, and visibility controls.
Background:
- Background: Set a background color, gradient, or image behind the entire Product Meta block. This is useful for visually separating the metadata area from surrounding content on the product page.
Spacing:
- Margin: Control the outer spacing around your Product Meta block (Top, Right, Bottom, Left). This determines how much space appears between the metadata and surrounding elements on the page.
- Padding: Adjust the inner spacing within your Product Meta block (Top, Right, Bottom, Left). This creates breathing room between the metadata content and the block edges.
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your Product Meta block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting.
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS.
- Custom Attributes: Add any HTML attributes to the block wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-meta|product).
Border:
- Border Radius: Set the corner rounding for the Product Meta block.
- Border Style: Choose a border style — Solid, Dotted, or Dashed.
- Border Color: Set the border color for the block.
- Border Width: Set the border thickness per side (Top, Right, Bottom, Left).
Device Visibility:
- Hide on Desktop: Hide the Product Meta block on desktop screens.
- Hide on Tablet: Hide the Product Meta block on tablet devices.
- Hide on Mobile: Hide the Product Meta block on mobile devices.
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the Product Meta block scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more.
Step 4: Save Your Changes
Once you have finished configuring the Product Meta block and customizing its appearance, make sure to save your work.
You’ve successfully added a Product Meta block to your Single Product Template! The block automatically pulls categories, tags, SKU, and other product metadata directly from WooCommerce for each product. Experiment with the view layout, link colors, and divider settings to present product metadata in a way that complements your store design and helps shoppers find related products quickly.