El bloque de Productos Destacados muestra tus productos destacados de WooCommerce en una cuadrícula limpia y fácil de navegar. Está diseñado para resaltar los artículos que has marcado como destacados en WooCommerce, facilitando la visualización de tus mejores productos o los más promocionados en cualquier página sin necesidad de curación manual a nivel de página.
Antes de usar este bloque, asegúrate de haber designado los productos relevantes como artículos destacados en la configuración de tus productos de WooCommerce. Una vez hecho esto, puedes usar los controles de consulta del bloque para filtrar, ordenar y limitar aún más qué productos destacados aparecen, y personalizar la tipografía, los estilos de los botones y la presentación de las imágenes de los productos de la cuadrícula desde la pestaña Avanzado.
Añadir el bloque de Productos Destacados a tus páginas
Sigue estos pasos para añadir un bloque de Productos Destacados a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > WooCommerce, arrastra y suelta el bloque Productos Destacados en la sección deseada de tu página.
Paso 2: Configurar Ajustes
Una vez añadido, haz clic en el bloque de Productos Destacados 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 destacados 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 Puntuados. Este bloque muestra por defecto Productos Destacados.
- 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 Destacados. 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 Destacados y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Productos Destacados a tu página! Al mostrar tus artículos destacados seleccionados a mano en una cuadrícula configurable y con estilo, puedes atraer la atención a tus productos más importantes sin trabajo manual adicional en cada página. Experimenta con el número de columnas, los estilos de los botones y la configuración de las imágenes para crear una exhibición de productos que se vea genial y genere conversiones.