Cómo personalizar el módulo de visualización de productos en un tema de WooCommerce con Elementor Pro: un tutorial completo

WooCommerce es uno de los plugins de comercio electrónico más populares para WordPress, y el plugin Elementor Por otro lado, es un popular editor visual de páginas. Cuando se combinan ambos, es posible crear páginas de escaparate de productos completamente personalizadas sin necesidad de escribir código.

Este tutorial le explicará en detalle cómo personalizar el módulo de escaparate de productos en su tema WooCommerce con Elementor (con las características de la versión Pro) para construir páginas de comercio electrónico más atractivas y con mayor conversión.

I. Preparativos

Antes de empezar, asegúrese de que la siguiente configuración está completa:

• Sitio web WordPress instalado y activado WooCommerce plug-in (componente de software)
• Plugin Elementor instalado y habilitado (se recomienda Elementor Pro)
• Utilice un tema compatible con WooCommerce (por ejemplo, Hello Elementor, Astra, Blocksy, Kadence, etc.)
• La información del producto ha sido introducida en el catálogo de productos de WooCommerce.

Si está utilizando la versión gratuita de Elementor, hay algunas limitaciones a los controles de visualización, la versión Pro desbloquea todos los módulos funcionales.

En segundo lugar, las dos formas de crear una plantilla de exposición de productos

Elementor ofrece dos formas principales de personalizar el contenido de la presentación del producto:

Método 1: Crear rápidamente bloques de productos con widgets de WooCommerce

Ideal para crear diseños como un área de recomendaciones en la página de inicio, grupos de productos en páginas de categorías, deslizadores horizontales, etc.

Procedimiento operativo:

• Abra WordPress Backend → Páginas → Nueva página.
• Editar páginas con Elementor

• Escribe "Woo" en el cuadro de búsqueda del widget de la izquierda.

• Arrastre uno de los siguientes componentes:
  • Productos: muestra múltiples productos, puede filtrarse por categoría, etiquetado o selección manual.
  • Categorías de productos: Mostrar categorías de productos en una cuadrícula
  • Carrusel de productos: Cómo crear un deslizador de productos de desplazamiento horizontal
  • Productos en venta / Productos destacados / Productos más vendidos: Muestra los productos promocionales, recomendados y más vendidos, respectivamente.

• Seleccione las condiciones de visualización en la pestaña "Consulta".

• Configuración de opciones de apariencia, como imágenes de productos, estilos de cabecera, estilos de botones, etc.

• Guardar y publicar la página

Método 2: Personalización de plantillas de productos individuales mediante el creador de temas (Elementor Pro)

Adecuado para la reconstrucciónPágina de detalles del productoLa estructura de diseño de cabeceras, imágenes, precios, botones, etc. en el

Procedimiento operativo:

• Open Backend →Templates→ Constructor de temas

• Haga clic en "Producto único" y seleccione "Añadir nuevo".

• Utiliza una plantilla en blanco o importa un preajuste oficial

• Arrastre los siguientes widgets:
  • Título del producto
  • Imagen del producto
  • Precio del producto
  • Añadir a la cesta
  • Clasificación del producto
  • Meta Producto
  • Contenido del producto
  • Fichas de datos del producto

• Haz clic en "Publicar" cuando hayas terminado.
• Seleccione el alcance de la plantilla en la configuración de condiciones (por ejemplo, aplicar a todos los productos o a una categoría en particular)

III. Técnicas avanzadas de personalización

Estos consejos hacen que la página de exposición de productos sea más expresiva y reconocible:

1. Añadir etiquetas dinámicas (requiere Pro)

Elementor Pro "etiqueta dinámica"Esta función permite incrustar campos de producto en texto, botones y títulos.

Ejemplo:

• Promoción por tiempo limitado: {{product_title}}
• Texto del botón: Comprar ahora {{product_price}}

2. Uso de los ajustes de estilo avanzados

• Añada efectos interactivos a las fichas de producto, como sombras flotantes, zoom de imágenes, etc.
• Ajuste de la relación de tamaño de embutición del producto (por ejemplo, 1:1, 4:3)
• Personalice los colores de los botones, los bordes, los tipos de letra y otros estilos de detalle

3. Diseño adaptable y optimizado

Elementor puede personalizarse para escritorio, tableta y móvil:

• Controla el número de columnas, por ejemplo, 4 columnas para escritorio, 2 o 1 columna para móvil automáticamente.
• Ocultar elementos innecesarios en móviles, como valoraciones, perfiles, etc.
• Ajuste los botones y el tamaño de las fuentes para garantizar la legibilidad en todos los dispositivos.

V. Resumen

Elementor junto con WooCommerce La combinación de los widgets de producto y el constructor de temas amplía enormemente el espacio de diseño de las páginas de producto. Tanto si se trata de un bloque de recomendación de productos en la página de inicio como de reconstruir la estructura de una página de detalles de un producto, solo necesitas ser hábil en el uso de los widgets de producto y los creadores de temas para construir un módulo de visualización visualmente sólido y claro.

Para necesidades de mayor funcionalidad, también puede combinar extensiones como Crocoblock, Element Pack, Essential Addons, etc., para crear sitios web de comercio electrónico de nivel comercial.

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