Documentação do SeedProd

Documentação, Materiais de Referência e Tutoriais para SeedProd

Product Content Block (WooCommerce)

The Product Content block displays the full product description for WooCommerce products on your Single Product Templates. It dynamically pulls the product description from WooCommerce for each product, so the correct content always appears without any manual updates.

This block is designed exclusively for use on Single Product Templates. You can use it as-is to display the product description exactly as entered in WooCommerce, or add supplementary text and formatting around the shortcode to customize how content appears on your product pages.

Product Content block displaying a WooCommerce product description

Requirements: The Product Content block is available in our Elite license plan. Before you get started, ensure WooCommerce is installed and activated on your WordPress site.


Adding the Product Content Block to Your Pages

Follow these steps to add a Product Content block to your SeedProd Single Product Template:

Etapa 1: Adicionar o Bloco

Under Design > Blocks > WooCommerce Template Tags, drag and drop the Product Content block into the desired section of your page.

Dragging the Product Content block onto a SeedProd Single Product Template

Etapa 2: Configurar as Definições de Conteúdo

Once added, click on the Product Content block to open its settings. In the Content tab, you’ll find a text area pre-populated with the SeedProd shortcode that dynamically fetches the WooCommerce product description.

Texto:

  • Content field: Contains the shortcode by default. This shortcode is what pulls the product description from WooCommerce for each product dynamically — do not remove it unless you intend to replace the product content entirely. You can add additional text, HTML, or formatting above or below the shortcode to supplement the product description.
  • Visual Editor / Edit HTML: Toggle between a rich-text Visual Editor (for formatted text with toolbar controls) and the HTML editor (for direct code editing). Both modes allow you to work alongside the dynamic shortcode.
  • Alignment: Set the horizontal alignment of the text content — Left, Center, or Right. Supports per-device alignment for desktop, tablet, and mobile.
  • Font Size: Set the base font size for the content area using the slider (10–72px).
Product Content block Content tab settings showing the WooCommerce shortcode

Etapa 3: Personalizar o Design

In the Advanced tab, you can customize the typography, color, and visual styling of your Product Content block.

Estilos:

  • Typography: Set the font family, size, weight, line height, letter spacing, and style for the product content text.
  • Color: Set the text color for the product description content.
  • Sombra do Texto: Adicione um efeito de sombra ao texto — escolha entre Nenhuma, Fio de Cabelo, Pequena, Média, Grande, X Grande ou 2X Grande.
  • Shadow: Add a box shadow to the entire block for a subtle depth effect.

Espaçamento:

  • Margin: Control the outer spacing around your Product Content block (Top, Right, Bottom, Left). This determines how much space appears between the product description and surrounding elements on the page.
  • Padding: Adjust the inner spacing within your Product Content block (Top, Right, Bottom, Left). This creates breathing room between the description text and the block edges.

Atributos:

  • CSS ID: Displays the auto-generated unique identifier for your Product Content block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting.
  • Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
  • 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-section|description).

Visibilidade do Dispositivo:

  • Hide on Desktop: Hide the Product Content block on desktop screens.
  • Hide on Tablet: Hide the Product Content block on tablet devices.
  • Hide on Mobile: Hide the Product Content block on mobile devices.

Efeitos de Animação:

  • Entrance Animation: Choose from various animation effects that play when the Product Content block scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more.
Product Content block Advanced tab settings

Etapa 4: Salve Suas Alterações

Once you have finished configuring the Product Content block and customizing its appearance, make sure to save your work.


You’ve successfully added a Product Content block to your Single Product Template! The block will automatically display the correct product description for every product, ensuring your WooCommerce pages always show accurate, up-to-date content. Use the typography and spacing controls to style the description so it fits seamlessly into your product page design.

Artigos Relacionados