El bloque Meta 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 productos, etiquetas y SKU, es decir, los detalles que ayudan a los clientes a comprender mejor un producto y encontrar artículos relacionados.
Este bloque está diseñado exclusivamente para su uso en plantillas de producto único y extrae dinámicamente los metadatos correctos para cada producto. Puede elegir cómo se distribuyen los metadatos, controlar el espaciado y la alineación, personalizar los colores del texto y los enlaces, y añadir un carácter divisorio entre los elementos en línea, lo que le permite controlar totalmente cómo se presentan los detalles del producto.
Añadir el bloque meta del producto a tus páginas
Siga estos pasos para añadir un bloque Meta del 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 Meta 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 Meta 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 ajustar la tipografía y los colores.
Disposición:
- Ver: Elija cómo se organizan los elementos de metadatos. La tabla muestra cada elemento en un diseño de dos columnas con etiqueta/valor. Apilado coloca la etiqueta sobre el 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 divisor.
- Espacio entre: Establece el espaciado vertical (1-100 píxeles) entre cada fila de metadatos cuando se utiliza la vista Tabla o Apilada.
- Alineación: Establezca la alineación horizontal del contenido de los metadatos: izquierda, centro o derecha.
- Separador: Introduzca un carácter o símbolo que separe los elementos de metadatos cuando se muestren en la vista en línea (el valor predeterminado es una coma). Puede utilizar cualquier carácter, como una barra vertical (|), un guión (–) o una viñeta (•).
Configuración del diseño:
- Tipografía del texto: Establezca la familia de fuentes, el tamaño, el grosor, la altura de línea y el espaciado entre letras para las partes de texto sin formato de los metadatos (como las etiquetas «Categoría:» o «SKU:»).
- Color del texto: Establece el color del texto sin formato de los metadatos.
- Tipografía de enlaces: Establece la tipografía para los valores de metadatos que se muestran como enlaces en los que se puede hacer clic (como nombres de categorías y etiquetas).
- Color del enlace: Establece el color del texto del enlace de metadatos, lo que permite que destaque visualmente del texto de la etiqueta que lo rodea.
- Tipografía del separador: Establezca el tamaño y el estilo de la fuente del carácter separador utilizado entre los elementos de metadatos en línea.
- Color del separador: Establece el color del carácter separador entre los elementos de metadatos en línea.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar aún más el estilo del bloque con opciones de fondo, bordes, espaciado y controles de visibilidad.
Antecedentes:
- Fondo: Establece un color, degradado o imagen de fondo detrás de todo el bloque Meta del producto. Esto resulta útil para separar visualmente el área de metadatos del contenido circundante en la página del producto.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque Meta 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 espacio interior dentro del bloque Meta del producto (arriba, derecha, abajo, izquierda). Esto crea un espacio entre el contenido de los metadatos y los bordes del bloque.
Atributos:
- ID CSS: muestra el identificador único generado automáticamente para el bloque Meta de tu 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-meta|producto).
Frontera:
- Radio del borde: Establece el redondeo de las esquinas del bloque Meta del producto.
- Estilo del borde: Elija 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 cada lado (superior, derecho, inferior, izquierdo).
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque Meta del producto en las pantallas de escritorio.
- Ocultar en tableta: Ocultar el bloque Meta del producto en dispositivos tablet.
- Ocultar en dispositivos móviles: Ocultar el bloque Meta 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 Meta del producto aparece en pantalla. Las opciones incluyen Rebotar, Fundido de entrada, Acercar, Girar y muchas más.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Meta del producto y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque Meta 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 el diseño de la vista, los colores de los enlaces y la configuración de los divisores para presentar los metadatos del producto de una manera que complemente el diseño de tu tienda y ayude a los compradores a encontrar rápidamente productos relacionados.