El bloque de Metadatos del Producto muestra los metadatos asociados a cada producto de WooCommerce en tus Plantillas de Producto Único. Esto incluye información como categorías de producto, etiquetas y SKU — detalles que ayudan a los clientes a comprender mejor un producto y a encontrar artículos relacionados.
Este bloque está diseñado exclusivamente para usarse en Plantillas de Producto Único y extrae dinámicamente los metadatos correctos para cada producto. Puedes elegir cómo se presentan los metadatos, controlar el espaciado y la alineación, personalizar los colores del texto y los enlaces, y añadir un carácter separador entre los elementos en línea — dándote control total sobre cómo se presentan los detalles del producto.
Añadir el Bloque de Metadatos del Producto a tus Páginas
Sigue estos pasos para añadir un bloque de Metadatos del Producto a tu 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 Metadatos del Producto en la sección deseada de tu Plantilla de Producto Único.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Metadatos del Producto para abrir su configuración. La pestaña Contenido está organizada en dos secciones — Diseño para controlar cómo se muestran los metadatos, y Ajustes de Diseño para afinar la tipografía y los colores.
Diseño:
- Vista: Elige cómo se organizan los elementos de metadatos. Tabla muestra cada elemento en un diseño de dos columnas de etiqueta/valor. Apilado coloca la etiqueta encima del valor en una pila vertical. En línea muestra todos los elementos uno al lado del otro en una sola línea, separados por el carácter separador.
- Espacio entre: Establece el espaciado vertical (1–100px) entre cada fila de metadatos al usar la vista Tabla o Apilado.
- Alineación: Establece la alineación horizontal del contenido de los metadatos — Izquierda, Centro o Derecha.
- Separador: Introduce un carácter o símbolo que separe los elementos de metadatos cuando se muestren en vista En línea (el valor predeterminado es una coma). Puedes usar cualquier carácter, como una barra vertical (|), un guion (–) o un punto (•).
Ajustes de Diseño:
- Tipografía del Texto: Establece la familia de fuentes, tamaño, peso, altura de línea y espaciado entre letras para las partes de texto plano de los metadatos (como etiquetas como “Categoría:” o “SKU:”).
- Color del Texto: Establece el color del texto plano de los metadatos.
- Tipografía del Enlace: Establece la tipografía para los valores de metadatos que se muestran como enlaces clicables (como nombres de categorías y etiquetas).
- Color del Enlace: Establece el color del texto del enlace de metadatos, permitiendo que destaque visualmente del texto de la etiqueta circundante.
- Tipografía del Separador: Establece el tamaño y estilo de fuente del carácter separador utilizado entre los elementos de metadatos en línea.
- Color del divisor: Establece el color del carácter divisor entre los elementos de metadatos en línea.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes estilizar aún más el bloque con opciones de fondo, bordes, espaciado y controles de visibilidad.
Fondo:
- Fondo: Establece un color de fondo, degradado o imagen detrás de todo el bloque de Metadatos del Producto. Esto es útil para separar visualmente el área de metadatos del contenido circundante en la página del producto.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de Metadatos del Producto (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre los metadatos y los elementos circundantes en la página.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de Metadatos del Producto (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre el contenido de los metadatos y los bordes del bloque.
Atributos:
- ID de CSS: Muestra el identificador único generado automáticamente para tu bloque de Metadatos del Producto. Esta ID es creada automáticamente por SeedProd para estilismo personalizado o para apuntar con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea usando el formato: nombre-del-atributo|valor (por ejemplo, data-meta|producto).
Borde:
- Radio del borde: Establece el redondeo de las esquinas para el bloque de Metadatos del Producto.
- Estilo del borde: Elige un estilo de borde: Sólido, Punteado o Discontinuo.
- Color del borde: Establece el color del borde del bloque.
- Ancho del borde: Establece el grosor del borde por lado (Superior, Derecho, Inferior, Izquierdo).
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Metadatos del Producto en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de Metadatos del Producto en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de Metadatos del Producto en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el bloque de Metadatos del Producto entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Metadatos del Producto y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Metadatos del Producto a tu Plantilla de Producto Único! El bloque extrae automáticamente categorías, etiquetas, SKU y otros metadatos del producto directamente de WooCommerce para cada producto. Experimenta con la vista de diseño, los colores de los enlaces y la configuración del divisor para presentar los metadatos del producto de una manera que complemente el diseño de tu tienda y ayude a los compradores a encontrar productos relacionados rápidamente.