El bloque de Productos de Archivo te permite mostrar una cuadrícula de productos de WooCommerce en tus Plantillas de Archivo de Producto. Este bloque muestra automáticamente listados de productos en páginas de tienda, archivos de categorías, archivos de etiquetas y otras páginas de colecciones de productos con diseños personalizables y opciones de filtrado.
Este bloque es esencial para crear Plantillas de Archivo de Producto personalizadas donde deseas un control total sobre cómo se muestran tus productos. Puedes personalizar el número de columnas, habilitar la paginación, agregar opciones de ordenación y filtrar qué productos aparecen según categorías, etiquetas, atributos u otros criterios, creando una experiencia de compra que coincida perfectamente con tu marca.
Añadir el Bloque de Productos de Archivo a tus Páginas
Sigue estos pasos para añadir un bloque de Productos de Archivo a tu Plantilla de Archivo de Producto de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > Etiquetas de Plantilla de WooCommerce, arrastra y suelta el bloque Productos de Archivo en la sección deseada de tu Plantilla de Archivo de Producto.
El bloque de Productos de Archivo se encuentra en Etiquetas de Plantilla de WooCommerce y se puede añadir a tu Plantilla de Archivo de Producto.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Productos de Archivo para abrir su configuración. En la pestaña Contenido, puedes configurar cómo se muestran y filtran los productos.
Ajustes de Diseño:
- Columnas: Establece el número de columnas en tu cuadrícula de productos. Más columnas permiten más productos por fila, mientras que menos columnas dan más protagonismo a cada producto. Los diseños comunes incluyen 3 o 4 columnas.
- Paginación: Activa o desactiva los controles de paginación. Cuando está habilitada, los productos se dividen en varias páginas con botones de navegación.
- Mostrar recuento de artículos: Activa para mostrar el número total de productos encontrados (por ejemplo, "Mostrando 1-12 de 48 resultados").
- Mostrar ordenación: Activa para mostrar un menú desplegable que permite a los visitantes ordenar los productos por criterios como popularidad, calificación, precio o novedad.
- Límite: Establece el número máximo de productos a mostrar por página. Esto funciona con la paginación para determinar cuántos productos aparecen antes de que los visitantes tengan que hacer clic en "Siguiente".
Consulta:
- Tipo: Establece en "Productos de Archivo" para mostrar los productos según el archivo actual que se esté viendo (categoría, etiqueta, etc.).
- Consultar por: Elige cómo filtrar qué productos aparecen. Las opciones incluyen Atributo (filtrar por atributos del producto), Etiquetas (mostrar productos con etiquetas específicas), Categoría (mostrar productos de ciertas categorías), SKU (filtrar por SKU del producto), Grupo (filtrar por agrupaciones de productos) o Visibilidad (controlar qué productos se muestran según la configuración de visibilidad del catálogo).
- Seleccionar por etiquetas: Al consultar por etiquetas, elige qué etiquetas de producto incluir o excluir.
- Seleccionar por categoría: Al consultar por categoría, selecciona qué categorías de producto mostrar.
- Seleccionar por SKU: Al consultar por SKU, introduzca SKUs de producto específicos para mostrar
- Seleccionar por grupo: Al consultar por grupo, elija agrupaciones de productos para filtrar
- Seleccionar por visibilidad: Controle si se muestran productos marcados como visibles en el catálogo, visibles en la búsqueda, ocultos o destacados
La pestaña Contenido le permite configurar columnas, paginación, límites de productos y opciones de filtrado para su archivo de productos.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puede personalizar la apariencia visual de su bloque de productos de archivo:
Estilos:
- Alineación: Establezca la alineación horizontal de los elementos del producto dentro de la cuadrícula (izquierda, centro o derecha)
- Tipografía de la descripción: Controle las propiedades de la fuente para las descripciones de los productos, incluyendo familia de fuentes, tamaño, grosor y estilo
- Tipografía del precio: Personalice las propiedades de la fuente para los precios de los productos
- Color del precio: Establezca el color de los precios de los productos para que destaquen
- Color de la etiqueta de oferta: Elija el color de las etiquetas de oferta que aparecen en los productos con descuento
Botón:
- Estilo del botón: Elija el estilo visual de los botones "Añadir al carrito". Las opciones incluyen Plano (diseño plano moderno), 2D (profundidad sutil), Vintage (aspecto clásico), Fantasma (transparente con borde) o Enlace (enlace de texto simple)
- Color del botón: Establezca el color de fondo de los botones de producto
- Tipografía del botón: Personalice las propiedades de la fuente para el texto del botón
- Tamaño del botón: Elija el tamaño del botón entre Pequeño, Mediano, Grande, Muy Grande o Extra Grande
- Radio del borde: Controle la redondez de las esquinas de los botones. Valores más altos crean botones más redondeados
Imagen:
- Sombra: Añada efectos de sombra a las imágenes de los productos para darles profundidad. Elija entre Ninguna, Fina, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o Sombra inferior
- Borde de la imagen: Habilite bordes alrededor de las imágenes de los productos
- Radio del borde: Controle la redondez de las esquinas de la imagen
- Estilo del borde: Elige la apariencia del borde: Sólido (línea continua), Punteado (puntos pequeños) o Discontinuo (líneas cortas)
- Color del borde: Seleccione el color de los bordes de la imagen
- Ancho del borde: Establezca el grosor individual del borde para cada lado (Superior, Derecho, Inferior, Izquierdo)
- Espaciado en blanco de la imagen: Añada espaciado interno alrededor de las imágenes de los productos para crear espacio
Espaciado:
- Margen: Controle el espaciado exterior alrededor de su bloque de productos de archivo (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre la cuadrícula de productos y los elementos circundantes
- Relleno: Ajuste el espaciado interior dentro de su bloque de productos de archivo (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio entre la cuadrícula de productos y los bordes del bloque
Atributos:
- ID CSS: Muestra el identificador único generado automáticamente para su bloque de productos de archivo. Esta ID es creada automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript
- Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: Añada cualquier atributo HTML al elemento contenedor del bloque. Introduzca cada atributo en una línea nueva usando el formato: nombre-atributo|valor (por ejemplo, data-products|archive)
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de Productos de archivo en las pantallas de escritorio
- Ocultar en tableta: Oculta el bloque de Productos de archivo en los dispositivos tableta
- Ocultar en móvil: Oculta el bloque de Productos de archivo en los dispositivos móviles
Efectos de Animación:
- Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando la cuadrícula de productos aparece en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Rotación de entrada y muchas más. Esto atrae la atención a tus listados de productos
La pestaña Avanzado proporciona amplias opciones de estilo para el diseño de productos, tipografía, botones, imágenes, espaciado y animaciones.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Productos de archivo y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Productos de archivo a tu Plantilla de archivo de productos! Este potente bloque muestra automáticamente tus productos de WooCommerce en un diseño de cuadrícula personalizable con opciones de filtrado, ordenación y paginación. Experimenta con diferentes diseños de columnas, estilos de botones y configuraciones de consulta para crear un archivo de productos que coincida perfectamente con tu marca y ayude a los clientes a encontrar exactamente lo que buscan.