Documentación de SeedProd

Documentación, materiales de referencia y tutoriales para SeedProd

Bloque de contenido de producto (WooCommerce)

El bloque Contenido del producto muestra la descripción completa de los productos WooCommerce en tus plantillas de producto único. Extrae dinámicamente la descripción del producto de WooCommerce para cada producto, por lo que siempre aparece el contenido correcto sin necesidad de actualizaciones manuales.

Este bloque está diseñado exclusivamente para su uso en plantillas de producto único. Puede utilizarlo tal cual para mostrar la descripción del producto tal y como se ha introducido en WooCommerce, o añadir texto y formato adicionales alrededor del código corto para personalizar cómo aparece el contenido en las páginas de sus productos.

Bloque de contenido del producto que muestra la descripción de un producto de WooCommerce.

Requisitos:El bloque Contenido del producto está disponible en nuestroplan de licencia Elite. Antes de empezar, asegúrate de que WooCommerce está instalado y activado en tu sitio de WordPress.


Añadir el bloque de contenido del producto a tus páginas

Siga estos pasos para añadir un bloque de contenido de producto a su plantilla de producto único de SeedProd:

Paso 1: Añadir el bloque

En Diseño > Bloques > Etiquetas de plantilla de WooCommerce, arrastra y suelta el bloque Contenido del producto en la sección deseada de tu página.

Arrastrar el bloque Contenido del producto a una plantilla de producto único de SeedProd.

Paso 2: Configurar los ajustes de contenido

Una vez añadido, haz clic en el bloque Contenido del producto para abrir su configuración. En la pestaña Contenido, encontrarás un área de texto prellenada con el código corto de SeedProd que obtiene dinámicamente la descripción del producto de WooCommerce.

Texto:

  • Campo de contenido: Contiene el código corto por defecto. Este código corto es el que extrae dinámicamente la descripción del producto de WooCommerce para cada producto; no lo elimine a menos que tenga intención de sustituir por completo el contenido del producto. Puede añadir texto, HTML o formato adicionales encima o debajo del código corto para complementar la descripción del producto.
  • Editor visual / Editar HTML: Cambia entre un editor visual de texto enriquecido (para texto formateado con controles de barra de herramientas) y el editor HTML (para la edición directa del código). Ambos modos te permiten trabajar junto con el código corto dinámico.
  • Alineación: Establece la alineación horizontal del contenido del texto: izquierda, centrada o derecha. Admite la alineación por dispositivo para ordenadores de sobremesa, tabletas y móviles.
  • Tamaño de fuente: Establezca el tamaño de fuente base para el área de contenido utilizando el control deslizante (10-72 píxeles).
Bloque de contenido del producto Configuración de la pestaña Contenido que muestra el código corto de WooCommerce

Paso 3: Personalizar el diseño

En la pestaña Avanzado, puedes personalizar la tipografía, el color y el estilo visual de tu bloque Contenido del producto.

Estilos:

  • Tipografía: Establezca la familia tipográfica, el tamaño, el grosor, la altura de línea, el espaciado entre letras y el estilo del texto del contenido del producto.
  • Color: Establezca el color del texto para el contenido de la descripción del producto.
  • Sombra del texto: añade un efecto de sombra al texto; elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extragrande o 2X Grande.
  • Sombra: añade una sombra de cuadro a todo el bloque para conseguir un sutil efecto de profundidad.

Espaciado:

  • Margen: controla el espacio exterior alrededor del bloque Contenido del producto (superior, derecho, inferior, izquierdo). Esto determina cuánto espacio aparece entre la descripción del producto y los elementos circundantes en la página.
  • Relleno: ajusta el espacio interior dentro del bloque Contenido del producto (superior, derecho, inferior, izquierdo). Esto crea un espacio entre el texto de la descripción y los bordes del bloque.

Atributos:

  • ID CSS: muestra el identificador único generado automáticamente para tu bloque de contenido del producto. SeedProd crea este ID automáticamente para personalizar el estilo o la orientación de JavaScript.
  • Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
  • Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor (por ejemplo, data-section|description).

Visibilidad del dispositivo:

  • Ocultar en el escritorio: Ocultar el bloque Contenido del producto en las pantallas de escritorio.
  • Ocultar en tableta: Ocultar el bloque Contenido del producto en dispositivos tablet.
  • Ocultar en dispositivos móviles: Ocultar el bloque Contenido del producto en dispositivos móviles.

Efectos de animación:

  • Animación de entrada: elija entre varios efectos de animación que se reproducen cuando el bloque Contenido del producto aparece en pantalla. Las opciones incluyen Rebotar, Desvanecer, Acercar, Girar y muchas más.
Configuración avanzada de la pestaña Bloque de contenido del producto

Paso 4: Guarde los cambios

Una vez que haya terminado de configurar el bloque Contenido del producto y de personalizar su apariencia, asegúrese de guardar su trabajo.


¡Has añadido correctamente un bloque de contenido de producto a tu plantilla de producto único! El bloque mostrará automáticamente la descripción correcta de cada producto, lo que garantiza que tus páginas de WooCommerce siempre muestren contenido preciso y actualizado. Utiliza los controles de tipografía y espaciado para dar estilo a la descripción, de modo que se adapte perfectamente al diseño de tu página de productos.

Artículos relacionados