El bloque de Productos Recientes muestra tus productos de WooCommerce publicados más recientemente en una cuadrícula limpia y navegable. Es una forma sencilla de mantener al día a los visitantes recurrentes con tus últimas incorporaciones y dar a las novedades una ubicación destacada en cualquier página de tu tienda.
Puedes controlar cuántos productos aparecen, cómo se ordenan y aplicar filtros opcionales utilizando los controles de consulta. La pestaña Avanzado te da control total sobre la tipografía de la cuadrícula, los estilos de los botones y la presentación de las imágenes del producto para que coincidan con la marca de tu tienda.
Añadir el Bloque de Productos Recientes a tus Páginas
Sigue estos pasos para añadir un bloque de Productos Recientes a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > WooCommerce, arrastra y suelta el bloque Productos Recientes en la sección deseada de tu página.
Paso 2: Configurar Ajustes
Una vez añadido, haz clic en el bloque de Productos Recientes para abrir su configuración. En la pestaña Configuración, 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 recientes que coincidan (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. Este bloque, por defecto, muestra Productos Recientes.
- 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 de Productos Recientes. 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 de Productos Recientes y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Productos Recientes a tu página! Destacar tus productos más nuevos es una excelente manera de recompensar a los visitantes recurrentes con contenido fresco y atraer la atención sobre las nuevas llegadas. Experimenta con el número de columnas, los estilos de los botones y las opciones de ordenación para mostrar tus últimas novedades de la mejor manera posible.