WooCommerce es uno de los plugins de comercio electrónico más populares para WordPress, y Elementor es un potente constructor de páginas. Combinando estosambos lados combinadosup, puede crear fácilmente una página de tienda de comercio electrónico visualmente impactante y potente. En este artículo se detalla cómo utilizar Complementos Premium ha dado en el clavo Elementor WooCommerce Widgets de listado de productos para construir y optimizar las páginas de tu tienda WooCommerce.

I. Preparativos preliminares

Antes de empezar, asegúrate de haber realizado los siguientes preparativos:

1. Instale y active el plugin WooCommerce.WooCommerce es el plugin de comercio electrónico más utilizado en WordPress. Asegúrate de que está instalado y activado para poder a?adir productos y configurar tu tienda.
2. Instale y active el plugin Elementor Page Builder: Elementor facilita la creación de dise?os de página con operaciones de arrastrar y soltar y es uno de los creadores de páginas más populares del mercado.
3. Instale y active el complemento Premium Addons: Premium Addons proporciona a Elementor una serie de extensiones, incluido el widget WooCommerce Product Listing, esencial para crear páginas de tienda de aspecto profesional.
4. empezar a utilizar Complementos Premium Pro(Opcional)Si desea utilizarMáscaras y funciones avanzadasPor favor, instale y active el plugin Premium Addons Pro. Esto desbloqueará más opciones de personalización para hacer su página de la tienda más único y profesional.

Creación de listas de productos de WooCommerce con Elementor

El widget WooCommerce Product Listing de Elementor ofrece a los usuarios diversas formas de mostrar los productos, que pueden seleccionarse según sea necesarioDisposición en cuadrícula, rotación o cuadrícula multimedia.

1. Disposición de la cuadrícula

Los dise?os de cuadrícula son una forma clásica de mostrar productos y son especialmente útiles para páginas de tiendas y páginas de categorías. Para utilizar un dise?o de cuadrícula en Elementor, puedes seguir estos pasos:

• Seleccionar un dise?o de cuadrículaEn la configuración del widget, seleccione el dise?o "Rejilla". Puede establecer el número de productos mostrados por fila y el número total de productos por página.

• Ajuste del tama?o de la imagenCambiar el tama?o de las imágenes de los productos para que se muestren de forma clara y atractiva en la cuadrícula.

• A?adir botón Cargar másSi tiene un gran número de productos, puede activar el botón "Cargar más" para que los usuarios puedan examinar los productos página por página sin tener que recargar la página.

2. Disposición rotacional

El dise?o rotacional es adecuado para mostrar productos seleccionados en la página de inicio o en páginas de productos específicos. Este dise?o puede ahorrar espacio en la página y atraer la atención de los usuarios al mismo tiempo. El método de configuración es el siguiente:

• Activar la opción de rotaciónConfiguración del widget: Seleccione la disposición "Rotación" en la configuración del widget. Puede ajustar laNúmero de productos, velocidad de desplazamiento y opciones de reproducción automática.

• Flechas y puntos personalizados: en "Navegación"Pueden a?adirse flechas y puntos de navegación a la rotación, y su color y posición pueden ajustarse para garantizar su coherencia con el estilo general de la página.

• Reproducción automática y en bucle: Puede elegir si activar o no la reproducción automática y si dejar o no que la rotación se repita indefinidamente, lo que puede mejorar la experiencia de navegación del usuario.

3. Media Grid layout

a través de (un hueco)convencionales (armas)establecido en los ajustes.Rejilla de mediosEl dise?o es perfecto paraMostrar imágenes de productos de distintas alturasque organiza los productos de forma dinámica. Este dise?o es especialmente adecuado para páginas de tiendas de moda y arte.

• Elegir un trazado de mamposteríaEn los ajustes del widget, seleccione "Rejilla de medios"Layout", el sistema ajusta automáticamente la posición y el tama?o de las imágenes de los productos para crear un efecto visual fluido.
• Ajuste del método de adaptación de la imagen: Puede elegir cómo se adapta la imagen a la maquetación, por ejemplo, si se recorta, se amplía, etc., para que la imagen se muestre de forma óptima.

III. Opciones de personalización detalladas

Con Elementor y Premium Addons, es posible una personalización en profundidad. Productos WooCommerceLa apariencia y funcionalidad de la lista.

1. Opciones de presentación de los productos

Elementor puede personalizar todos los aspectos de la visualización de los productos, incluidas las imágenes, los títulos, los precios, las valoraciones y los botones de a?adir al carrito:

• Imágenes de productos personalizadasElija el estilo hover, el tipo de borde y el efecto de sombra para las imágenes de producto para aumentar la interactividad de la página.

• Título y precio del productoEl título y el precio: puede ajustar el tipo de letra, el color y la posición del título y el precio para que destaquen más en la página.

• Botón A?adir a la cestaPersonaliza el estilo y la posición de los botones para hacerlos más acordes con el estilo general del dise?o.

• Alineación:Alinee los detalles del producto a la izquierda, al centro o a la derecha.

2. Función de búsqueda rápida

La función de vista rápida mejora la experiencia del usuario al permitirle ver los detalles del producto sin salir de la página actual:

• Activar la búsqueda rápidaEn la configuración del widget, active la función de vista rápida y elija el método de activación (por ejemplo, haga clic en una imagen o en un botón).
• Personalizar la ventana de vista rápidaAjuste la anchura, el color de fondo, el borde y los efectos de sombra de la ventana de vista rápida para que sea coherente con el resto de la página.
• Ocultar elementos innecesariosPermite ocultar determinados elementos de la ventana de vista rápida, como valoraciones, precios o descripciones, según sea necesario para una interfaz más limpia.

3. Ofertas especiales y cintas agotadas

Las cintas son una forma eficaz de llamar la atención del usuario sobre un producto específico, como una oferta especial o un artículo agotado:

• Activar cintas de ofertas especialesCintas especiales: Puede a?adir cintas especiales a los productos en venta y personalizar su texto, color y posición.
• Activación de cintas agotadasCuando determinados productos están agotados, se pueden mostrar cintas de agotado para que los usuarios puedan verlo de un vistazo.

IV. Consultas avanzadas y opciones de paginación

El widget de listado de productos de WooCommerce de Elementor también admite funciones avanzadas de consulta y paginación para una visualización más flexible de los productos.

ventana de pesta?as (en un navegador web, etc.)

La función de paginación permite mostrar un gran número de productos en varias páginas para evitar que la página se cargue lentamente:

• Activar la paginación: Seleccione el tipo de paginación (navegación numérica o por flechas) y ajuste la alineación de los botones de paginación.

V. Personalización avanzada con Elementor Pro

desea personalizar aún más la lista de productos de WooCommerce.Elementor Pro responder cantando Complementos Premium Pro Se ofrecen opciones más avanzadas:

• Uso de pieles avanzadas: Premium Addons Pro ofrece una amplia gama de skins premium, su lista de productos estará más personalizada.
• CSS personalizadoSi las opciones predeterminadas no satisfacen sus necesidades, también puede utilizar CSS personalizado para dar estilo a los elementos de la página.
• Condiciones globales de visualizaciónEn combinación con las condiciones de visualización de WooCommerce, el contenido puede mostrarse u ocultarse dinámicamente en función del comportamiento de compra del usuario (por ejemplo, el número de productos en el carrito).

VI. Resumen

Con Elementor y Premium Addons, es fácil crear una página de tienda WooCommerce potente y atractiva. Los dise?os de cuadrícula, rotación o mampostería se pueden personalizar para adaptarlos a tus necesidades. La experiencia del usuario y las tasas de conversión se pueden mejorar significativamente mediante el uso de consultas avanzadas, paginación y funciones de vista rápida.

Al crear páginas de tienda WooCommerce, no olvides aprovechar las funciones avanzadas que ofrece Elementor Pro, como CSS personalizado y condiciones de visualización globales, para optimizar aún más los resultados de la página.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres