El bloque Productos en Oferta te permite mostrar todos tus productos de WooCommerce actualmente en oferta en una cuadrícula navegable. Muestra automáticamente cualquier producto con un precio de oferta activo, lo que facilita la creación de páginas de ofertas dedicadas, la promoción de ofertas en una barra lateral o la adición de una sección de ofertas en cualquier lugar de tu sitio.
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 Productos en Oferta a tus páginas
Sigue estos pasos para añadir un bloque de Productos en Oferta a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > WooCommerce, arrastra y suelta el bloque Productos en Oferta en la sección deseada de tu página.
Paso 2: Configurar Ajustes
Una vez añadido, haz clic en el bloque Productos en Oferta 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 en oferta 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 muestra por defecto Productos en oferta.
- 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 en Oferta. 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 Productos en Oferta y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Productos en Oferta a tu página! Una cuadrícula de productos en oferta bien ubicada es una de las formas más efectivas de impulsar las conversiones: los compradores que buscan activamente ofertas encontrarán exactamente lo que necesitan en un solo lugar. Usa la opción Color de oferta en la pestaña Avanzado para que los precios con descuento destaquen y refuercen el valor que ofrecen tus promociones.