No hay ningún widget de carrusel de productos Master Addons WooCommerce. Esa es la respuesta honesta desde el principio y le ahorra una instalación.
Lo que funciona son tres rutas. Loop Carousel de Elementor Pro es el único que ejecuta una consulta de producto en vivo, así que elígalo si la tira debe seguir su catálogo. El diseño gratuito del catálogo paginado por cuadrante le ofrece una exhibición de nueve elementos seleccionada a mano sin consulta detrás. Y el widget de producto destacado de Master Addons destaca un producto, con el carrusel de imágenes gratuito que cubre la fotografía del producto. Los tres se sientan dentro del más amplio Widget de carrusel de Elementor familia; Si estás equipando una tienda entera, el los mejores complementos de Elementor para WooCommerce roundup cubre el resto.
Abajo: cómo se construye cada uno, luego se omite la parte más tutorial, que es donde un carrusel de productos le cuesta activamente ventas.
Qué método elegir
- Tienes Elementor Pro y la tira debe realizar un seguimiento del stock, el precio y las novedades → Carrusel circular. Es la verdadera respuesta.
- Quieres nueve tarjetas escritas a mano que controles hasta la última línea de copia → Catálogo paginado por cuadrantes, gratis.
- Quieres esforzarte mucho en un producto → Producto destacado, Pro.
- Sólo necesitas fotos de productos en una pista → Carrusel de imágenes, gratis.
Método 1: Carrusel Loop de Elementor Pro
Elementor Pro resuelve esto de forma nativa, así que comience aquí. El Carrusel circular toma una plantilla de artículo de bucle, una tarjeta de producto que diseña una vez y la apunta a una consulta de WooCommerce. Agregue un producto, cambie un precio, agote un tamaño y el carrusel lo refleje sin que nadie abra el editor. No hay ningún complemento involucrado.
- Cree la plantilla de elemento de bucle. Plantillas → Creador de temas → Artículo de bucle, fuente establecida en Producto. Diseña la imagen, el título, el precio, la calificación y el botón mediante etiquetas dinámicas.
- Suelte el widget Loop Carousel en la página y seleccione esa plantilla.
- Establezca la consulta. La fuente es donde ocurre el trabajo real: todos los productos, una categoría, una etiqueta, en oferta, destacados o selección manual. Luego ordene por fecha, precio, popularidad o orden de menú.
- Establezca cuántos cargar. Este es el total que tiene el carrusel, no cuántos son visibles. De ocho a doce trajes una tira de productos relacionados. Cargue cuatro con cuatro visibles y no habrá nada a qué desplazarse.
- Excluye lo que no debería estar ahí. Artículos agotados y, en una sola página de producto, el producto actual. Una tira de productos relacionados que incluye el producto que ya estás viendo se lee como rota.
- Establezca diapositivas por vista por punto de interrupción. Cuatro en escritorio, tres en tableta, uno y medio en móvil.
Ese “uno y medio en el móvil” no es un error tipográfico. Una tarjeta completa más la mitad de la siguiente es la señal más fuerte que desplaza una tira. Una tarjeta que llena el ancho parece un bloque estático y la mayoría de la gente nunca la desliza.
El problema es la licencia. Loop Carousel es solo Pro, sin equivalente gratuito en Elementor core. el resumen del complemento carrusel revisa en detalle los controles de consulta y las soluciones gratuitas.
Método 2: curado a mano con catálogo de páginas cuadrante (gratis)
Una consulta en vivo a veces es exactamente incorrecta. Una colección de páginas de inicio en la que desea escribir cada línea usted mismo, o una exhibición de productos en un sitio que no ejecuta WooCommerce en absoluto, quiere tarjetas seleccionadas cuidadosamente.
El catálogo paginado por cuadrante es uno de los ocho importables gratuitos Creador de widgets diseños: una cuadrícula de nueve cuadros de elementos escritos de tres en tres, con un riel de segmento que muestra dónde se encuentra y salta entre páginas. Cada cuadro contiene una imagen, una etiqueta de categoría, un título, una línea de copia y una estadística, todo escrito a mano, que es el punto.
Demostración en vivo Descargar Widget JSON
Importa el complemento gratuito a través de Master Addons → Widget Builder → Import Widget, luego aparece en Elementor en Favoritos. El resto del conjunto, veinte diseños ocho de ellos gratuitos, está en el plantillas deslizantes Elementor gratuitas resumen.
La advertencia honesta: nueve artículos, arreglados. No es una consulta de producto. Nada rastrea las existencias, nada actualiza un precio y un artículo agotado permanece allí hasta que editas la caja. Úselo para un conjunto seleccionado que rara vez cambia. Para cualquier cosa que tenga que seguir el catálogo, regrese al Método 1.
Método 3: Producto destacado y carrusel de imágenes para fotografías
Master Addons tiene exactamente un widget de WooCommerce y no es un carrusel. El Widget de producto destacado es Pro y hace un trabajo diferente: un producto, en una habitación, con imagen, título, precio, descripción y un botón de compra dispuesto como un bloque en lugar de una tarjeta en una tira.
De todos modos, esa suele ser la mejor forma. Un solo producto con espacio a su alrededor se convierte más duro que el mismo producto que una de las cuatro cartas por las que alguien tiene que pasar. Úselo para un lanzamiento, un éxito de ventas o el único elemento alrededor del cual se construye una página de destino.
Para fotografía de producto en una pista (seis ángulos de la misma chaqueta, un lookbook, una tira de materiales), el gratis Carrusel de imágenes lo maneja. Caja de luz, subtítulos, diapositivas por dispositivo por vista. Si algunos de esos ángulos son clips en lugar de imágenes fijas, el guía deslizante de video carrusel y galería cubre los widgets que manejan la reproducción.
Tenga claro lo que no es: usted mismo agrega las imágenes y no se vinculan a los productos a menos que los establezca a mano. Es un carrusel de fotos, no un feed de tienda.
Donde pertenece un carrusel de productos
Cualquiera que sea el método que utilice, cuatro posiciones funcionan de forma fiable:
- Productos relacionados en una sola página de producto. El visitante ya está interesado en esta categoría. Una franja deslizante de cuatro alternativas es un servicio.
- Ventas cruzadas y “completar el look” Accesorios bajo un producto principal. Nadie necesita ver los doce; necesitan saber que existen doce.
- Una colección destacada o de temporada en la página de inicio. Curado, no exhaustivo.
- Visto recientemente. Pequeño, personal y un carrusel es la forma natural.
Lo que comparten: los productos son opcional. La página sigue funcionando si nadie toca la tira.
Donde te cuesta ventas
Nunca pongas un carrusel en una tienda o página de categoría.
Este es el que va a hacer bien. Existe una página de categorías para que las personas puedan comparar: escanear una cuadrícula, detectar la que quieren, hacer clic. Un carrusel muestra cuatro productos y esconde el resto detrás de una flecha, lo que convierte la comparación en un ejercicio de memoria. El visitante debe sostener el producto dos en la cabeza mientras mira el producto seis.
También hay un costo de presentación. Un carrusel y una cuadrícula pueden generar el mismo marcado, pero una página de categoría que muestra visiblemente seis lecturas de elementos como una categoría delgada, tanto para los compradores como para cualquiera que juzgue la profundidad de la página. La página de su tienda debería parecerse a una tienda.
Segunda mala posición: encima del pliegue en el móvil. Un carrusel de productos es una consulta, un renderizado de plantilla y una inicialización de control deslizante antes de que algo pinte. En la parte superior de una página de teléfono, esa es la pintura más contenta que gastas en una ruleta. Pon un héroe estático allí y enciende el carrusel debajo.
Añadir al carrito: ¿en el carrusel o no?
Muestra el botón de productos simples. Ocultarlo para los variables.
Un producto simple con el complemento AJAX al carrito en la tira es un verdadero atajo: un toque, sin carga de página, actualizaciones del carrito. Vale la pena tenerlo.
No se puede agregar un producto variable sin elegir un tamaño o color, por lo que el botón no hace nada o hace rebotar al comprador en la página del producto. Ambos se sienten rotos. Para productos variables, haga de toda la tarjeta un enlace y omita el botón.
Si su catálogo combina ambos, ejecute dos carruseles con consultas diferentes en lugar de un diseño de compromiso.
Insignias de venta y visualización de precios
Muestra la insignia de venta. Es lo de mayor contraste en una tarjeta de producto y es la razón por la que la gente deja de desplazarse.
Muestre el precio, incluidos los artículos originales en oferta, porque la comparación es la persuasión.
Los productos variables muestran una gama (“£20 a £45”). Las gamas largas envuelven y rompen la alineación de las cartas, y las cartas desalineadas en una franja horizontal son mucho más visibles que en una cuadrícula. Establezca una altura fija en la fila de precios o muestre “Desde £20”
Diseño de tarjeta que no parece amateur
Tres cosas importan más que el resto.
Alturas iguales de las cartas. Los títulos de los productos varían enormemente en longitud, y un título de dos líneas al lado de un título de una línea lleva la fila de precios a diferentes alturas. Establezca una altura de título fija con truncamiento o active la altura automática para que la fila se nivele.
Relación de aspecto de una imagen. Retratos y fotografías cuadradas de productos en la misma tira es la razón más común por la que un carrusel de productos parece barato. Establece una proporción y déjala recortar.
Espacio entre cartas. 16 a 24px. El espacio cero hace que los productos se combinen; demasiado y cuatro cartas dejan de leerse como un juego.
¿reproducción automática de productos?
No, y éste no es una preferencia. El regla de reproducción automática es diferente para un control deslizante de héroe, donde no se puede hacer clic en nada y la rotación no cuesta nada.
Se puede hacer clic en las tarjetas de producto. La reproducción automática significa que una tarjeta puede moverse cuando alguien la alcanza, y un comprador que toca el producto equivocado generalmente no regresa y lo intenta de nuevo. Se van. El escritorio cubre la pausa al flotar; al tocar no hay ningún flotador y el móvil es donde están la mayoría de sus compradores.
Apágalo.
Rendimiento: lo que realmente cuesta un carrusel de productos
Cada producto en la consulta es una lectura de base de datos más una representación de plantilla, y el script deslizante no puede inicializarse hasta que exista ese marcado. Tres límites prácticos:
- Tapa la consulta a las doce. Más allá de eso, estás renderizando cartas que nadie alcanza.
- Cargue todo con pereza excepto la primera fila de imágenes visibles. La carga entusiasta de diapositivas fuera de la pantalla es la causa habitual de una página de producto lenta.
- Sirva la imagen de la tarjeta al tamaño de la tarjeta. Una foto de producto de 2000px escalada en una tarjeta de 300px es la descarga desperdiciada más común en un sitio de WooCommerce.
Un carrusel por sección de página es un techo razonable. Tres carruseles apilados en una página de inicio son tres controles deslizantes que compiten por el hilo principal de un teléfono.
Esquema: no lo hagas a mano
WooCommerce ya genera datos estructurados del producto en páginas de un solo producto, y ahí es donde Google lo quiere. Un carrusel de tarjetas de productos en una página de inicio o de destino no necesita su propio marcado de producto, y agregarlo a mano es una buena manera de terminar con datos de precio o disponibilidad que contradigan la página real del producto.
Si las tarjetas del carrusel enlazan con las páginas del producto, y deberían hacerlo, la ruta de rastreo está intacta y los datos estructurados viven donde pertenecen. Déjalo en paz.
Preguntas frecuentes
¿los complementos maestros tienen un widget de carrusel de productos WooCommerce?
No. Master Addons tiene un widget WooCommerce, un producto destacado, y destaca un solo producto en lugar de deslizarse por varios. Para un carrusel de productos real, utilice el carrusel de bucles de Elementor Pro con una plantilla de artículo de bucle de producto. Para una exhibición seleccionada a mano en el complemento gratuito, importe el diseño del catálogo paginado por cuadrante y complete las nueve casillas usted mismo.
¿woocommerce tiene carrusel de productos?
No de forma nativa. WooCommerce genera productos en cuadrículas: página de tienda, archivos de categorías, productos relacionados. Un carrusel deslizante necesita el carrusel circular de Elementor Pro con una plantilla de producto o un widget de terceros que agregue una.
¿cómo hago un carrusel de productos en Elementor gratis?
Free Elementor no tiene un carrusel de productos dinámico, por lo que la ruta gratuita honesta es seleccionada a mano: importe el diseño del catálogo de páginas de cuadrante a través de complementos maestros → Creador de widgets → Importe el widget y escriba los nueve elementos, o use el carrusel de imágenes gratuito para la fotografía de productos. con enlaces manuales. Todo lo que consulta el catálogo necesita automáticamente Elementor Pro.
¿debo utilizar un carrusel de productos en la página de mi tienda?
No. Existen páginas de categorías y tiendas para que la gente pueda comparar productos de un vistazo, y un carrusel esconde la mayoría de ellos detrás de una flecha. Utilice una cuadrícula en las páginas de listado y guarde carruseles para productos relacionados, ventas cruzadas y colecciones seleccionadas.
¿puede un carrusel de productos mostrar botones complementarios al carrito?
Sí, si construye la tarjeta usted mismo en una plantilla de elemento de bucle. Coloque el complemento en el carrito en la plantilla y cada diapositiva obtendrá uno. Muéstrelo para productos simples con el complemento AJAX al carrito; ocultelo para productos variables, que primero necesitan seleccionar una variación, por lo que el botón falla o redirige.
¿cuántos productos debe haber en un carrusel?
De ocho a doce cargados, cuatro visibles en el escritorio. Menos de ocho y apenas hay nada a qué desplazarse; más de doce y nunca se ve la cola. Si necesitas más que eso, el contenido quiere una cuadrícula.
¿Por qué mis tarjetas de producto tienen diferentes alturas?
Los títulos de productos de diferentes longitudes empujan las filas de precios y botones a diferentes posiciones. Establezca una altura de título fija con truncamiento o active la altura automática para que la fila coincida con la carta más alta. Establezca también una relación de aspecto de imagen fija, porque las fotografías mixtas de retratos y cuadrados causan el mismo problema.
Siguiente
¿Disparar un producto desde seis ángulos en lugar de enumerar seis productos? Ese es el tutorial del carrusel de imágenes, que cubre la caja de luz y el lado del título.
Todo con forma de carrusel, libre y Pro, está en el centro de widgets del carrusel, y el desglose gratuito versus profesional muestra exactamente lo que añade una licencia.
El catálogo paginado por cuadrantes importa gratis. Los otros doce diseños necesitan una licencia y el página de precios muestra en qué nivel se encuentra cada uno.
