El bloque Cuadrícula de Productos proporciona una forma eficiente de mostrar tus productos de WooCommerce en un diseño de cuadrícula visualmente organizado. Puedes mostrar todos los productos o filtrar por tipo — destacados, en oferta, más vendidos, añadidos recientemente o mejor valorados — y dar a los clientes la capacidad de añadir varios artículos a su carrito directamente desde la cuadrícula.
Con controles de consulta flexibles, alineación por dispositivo, estilo de botones e imágenes, y paginación opcional, este bloque es ideal para páginas de tienda, páginas de destino de categorías o cualquier página donde quieras mostrar una selección curada de productos en un formato limpio y navegable.
Añadir el bloque Cuadrícula de Productos a tus páginas
Sigue estos pasos para añadir un bloque Cuadrícula de Productos a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > WooCommerce, arrastra y suelta el bloque Cuadrícula de Productos en la sección deseada de tu página.
Paso 2: Configurar Ajustes
Una vez añadido, haz clic en el bloque Cuadrícula de Productos para abrir sus ajustes. En la pestaña Ajustes, los ajustes se organizan en dos secciones.
Contenido:
- Columnas: Establece el número de columnas de productos a mostrar en la cuadrícula.
- Paginación: Activa para habilitar la paginación, dividiendo la cuadrícula de productos en varias páginas.
- Mostrar número de artículos: Activa para mostrar el número total de productos mostrados.
- Mostrar ordenación por: Activa para mostrar un menú desplegable de ordenación para que los visitantes puedan reordenar los productos por criterios como precio, popularidad o valoración.
- Límite: Establece el número máximo de productos a mostrar. Usa
-1para mostrar todos los productos coincidentes (por defecto).
Consulta:
- Tipo: Elige qué productos mostrar — Todos los productos, Productos destacados, Productos en oferta, Productos más vendidos, Productos recientes o Productos mejor valorados.
- Incluir: Reduce la selección de productos filtrando para incluir solo productos que coincidan con criterios específicos como IDs, SKUs, categorías, etiquetas, atributos, grupos o visibilidad.
- Excluir: Reduce la selección de productos filtrando para excluir productos que coincidan con criterios específicos como IDs, SKUs, categorías, etiquetas, atributos, grupos o visibilidad.
- Ordenar por: Establece cómo se ordenan los productos — por Fecha, Título, Precio, Popularidad, Valoración, Aleatorio u Orden de menú.
- Orden: Establece la dirección de ordenación: ASC (ascendente) o DESC (descendente).
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque Cuadrícula de Productos. Los ajustes se organizan en tres secciones.
Estilos:
- Alineación: Establece la alineación horizontal de la cuadrícula de productos — Izquierda, Centro o Derecha — con controles por dispositivo para escritorio, tableta y móvil.
- Tipografía de la descripción: Establece la familia de fuentes, tamaño, altura de línea, espaciado entre letras, grosor, estilo y mayúsculas para el texto de la descripción del producto.
- Tipografía de precios: Establece la familia de fuentes, el tamaño, la altura de línea, el espaciado entre letras, el grosor, el estilo y las mayúsculas para el texto del precio del producto.
- Color del precio: Establece el color del precio normal del producto.
- Color de oferta: Establece el color del precio de oferta cuando un producto tiene descuento.
Botón:
- Estilo del botón: Elige un estilo visual para el botón Añadir a la cesta: Plano, 2D, Vintage, Fantasma o Enlace.
- Color del botón: Establece el color de fondo del botón Añadir a la cesta.
- Tipografía del botón: Establece la familia de fuentes, el tamaño, la altura de línea, el espaciado entre letras, el grosor, el estilo y las mayúsculas para el texto del botón.
- Tamaño del botón: Elige un tamaño de botón preestablecido: Pequeño, Mediano, Grande, Muy Grande o Extra Grande.
- Radio del borde: Ajusta la redondez de las esquinas del botón Añadir a la cesta con un control deslizante.
Imagen:
- Sombra: Aplica una sombra a las imágenes de los productos usando tamaños preestablecidos: Ninguna, Cabello, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o Sombra Inferior.
- Estilo del borde: Establece el estilo del borde de las imágenes de los productos: Sólido, Punteado o Discontinuo.
- Color del borde de la imagen: Establece el color del borde de la imagen del producto.
- Ancho del borde de la imagen: Establece el grosor del borde en cada lado (Superior, Derecho, Inferior, Izquierdo) de la imagen del producto.
- Espaciado en blanco de la imagen: Añade relleno interior alrededor de las imágenes de los productos dentro de su borde.
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Atributos:
- Clase personalizada: Añade una o más clases CSS personalizadas al contenedor del bloque para una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque Cuadrícula de productos y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Cuadrícula de productos a tu página! Ya sea que estés creando una página de tienda completa o una sección promocional específica, los controles de consulta flexibles y las ricas opciones de estilo facilitan la visualización de los productos adecuados de la manera adecuada. Experimenta con diferentes tipos de productos, recuentos de columnas y estilos de botones para crear una cuadrícula que fomente la navegación y genere compras.