El bloque de Ventas Adicionales mejora tu plantilla de Producto Único de WooCommerce mostrando automáticamente productos de venta adicional recomendados debajo del producto actual. Estos son productos que has designado manualmente como ventas adicionales en WooCommerce, lo que te permite guiar a los clientes hacia artículos complementarios o de mayor valor de una manera curada.
Antes de añadir este bloque, asegúrate de que tus productos de venta adicional ya están configurados en WooCommerce navegando a la pestaña Productos Vinculados de cada producto y añadiendo artículos al campo Ventas Adicionales. Una vez en su lugar, el bloque se encarga de la visualización, con control total sobre las columnas, el orden, la tipografía, el estilo del botón y la presentación de las imágenes.
Añadir el Bloque de Ventas Adicionales a tu Plantilla de Producto Único
Sigue estos pasos para añadir un bloque de Ventas Adicionales a tu plantilla de Producto Único de SeedProd:
Paso 1: Añadir el Bloque
En Etiquetas de Plantilla de WooCommerce, arrastra y suelta el bloque Ventas Adicionales en la sección deseada de tu plantilla de Producto Único.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Ventas Adicionales para abrir su configuración. En la pestaña Contenido, puedes ajustar las siguientes opciones de visualización:
- Columnas: Establece el número de columnas utilizadas para mostrar los productos de venta adicional en la cuadrícula.
- Productos por Página: Establece el número máximo de productos de venta adicional a mostrar. Usa
-1para mostrar todas las ventas adicionales disponibles. - Ordenar por: Elige el campo utilizado para ordenar los productos de venta adicional: Fecha, ID, Orden de Menú, Popularidad, Aleatorio, Valoración o Título.
- 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 Ventas Adicionales.
Estilos:
- Alineación: Establece la alineación horizontal de la cuadrícula de productos de venta adicional (Izquierda, Centro o Derecha), con controles por dispositivo para escritorio, tableta y móvil.
- Tipografía del Título: Establece la familia de fuentes, tamaño, peso, estilo, altura de línea, espaciado entre letras y mayúsculas/minúsculas para los títulos de los productos.
- Tipografía de la Descripción: Establece las propiedades tipográficas para el texto de la descripción del producto.
- Tipografía del Precio: Establece las propiedades tipográficas para el texto del precio del producto.
- Color del Precio: Establece el color para los precios normales de los productos.
- Color de la Etiqueta de Oferta: Establece el color para el precio de oferta o la etiqueta de oferta.
Botón:
- Tipografía del Botón: Establece la familia de fuentes, tamaño, peso, estilo y otras propiedades tipográficas para el texto del botón Añadir al Carrito.
- Estilo del Botón: Elige el estilo visual del botón Añadir al Carrito: Plano, 2D, Vintage, Fantasma o Enlace.
- Color del Botón: Establece el color de fondo del botón.
- Tamaño del Botón: Elige el tamaño del botón: Pequeño, Mediano, Grande, Extra Grande o Doble Extra Grande.
- Radio del Borde: Redondea las esquinas del botón usando un deslizador.
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: Elija un estilo de borde para las imágenes de producto: 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: Establezca anchos de borde individuales para cada lado de la imagen del producto: Superior, Derecho, Inferior e Izquierdo.
- Espaciado interior del borde de la imagen: Añada espaciado interior entre la imagen del producto y 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 haya terminado de configurar el bloque de ventas adicionales y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Ha añadido con éxito un bloque de ventas adicionales a su plantilla de producto único! Las recomendaciones de ventas adicionales colocadas estratégicamente son una de las formas más efectivas de aumentar el valor promedio del pedido en WooCommerce. Experimente con el diseño de columnas, los estilos de los botones y la presentación de las imágenes para crear una sección de recomendaciones de productos que se sienta nativa del diseño de su tienda.