Cómo Elementor personaliza y edita de forma intuitiva las plantillas de página de producto de WooCommerce

Elementor te permite diseñar páginas de productos individuales con facilidad. Con una simple operación de arrastrar y soltar, puedes ajustar varios elementos de la página a tu gusto y personalizar el diseño. Antes, personalizar el diseño de las páginas de WooCommerce solía requerir escribir mucho código, lo que resultaba difícil para los no expertos.

Pero ahora, todo es más fácil con el Elementor WooCommerce Builder. Se acabaron los líos con código complejo, las operaciones de fusión, la adición de ganchos y los archivos PHP complicados.

Basta con utilizar el Elementor Pro Gracias a las potentes funciones de Elementor, podrás controlar totalmente el diseño y la composición de la página de producto. Toda la personalización se realiza en el front-end, directamente en el constructor de páginas de Elementor. El diseño es fácil e intuitivo.

Plantillas de producto WooCommerce por defecto

A continuación se muestra la página de producto básica de WooCommerce:

Con Elementor, puedes diseñar la plantilla de tu página de producto como quieras. En este tutorial, se le mostrará cómo crear este diseño de página de producto:

Dado que se utilizan las plantillas de producto individuales de Elementor, una vez finalizada la creación de la plantilla, se puede aplicar a todos los productos, categorías específicas u otras condiciones.

Cómo personalizar las páginas de producto de WooCommerce

En este tutorial, nos centraremos en la personalización de las páginas de producto, por lo que nos saltaremos la configuración básica de WooCommerce y cómo añadir nuevos productos. Más adelante, habrá un tutorial especial de WooCommerce; mantente atento a las actualizaciones.

Una vez completada la configuración, sería bueno tener el plugin WooCommerce instalado y algunos productos relacionados añadidos al sitio. También es necesario instalar Elementor y Elementor Pro para obtener las características de diseño visual.

¡Atención!No puedes acceder a las plantillas de producto de Elementor sin activar WooCommerce, así que recuerda hacerlo.

Paso 1: Crear una plantilla de producto único

Paso 2: Elija una plantilla de página de producto prediseñada o cree una desde cero.

La forma más sencilla de empezar es utilizar una plantilla de página de producto prediseñada y luego personalizarla para adaptarla a su propio sitio web. Hay varios estilos diferentes de páginas de producto entre los que elegir. Antes de empezar a añadir widgets, puedes cambiar a la plantilla de ancho completo para asegurarte de que la página de producto es de ancho completo.

Con Elementor, es posible personalizar y controlar completamente el diseño y el estilo de tus páginas de producto. Otra forma es crearla desde cero. En el panel Editar, puedes ver los widgets específicos del producto.

Paso 3: Añadir los widgets de producto que componen la página

¡Atención!Es importante insertar algunos productos de muestra, incluidos sus campos obligatorios -como descripciones de productos, botones del carro de la compra y otros contenidos- para poder previsualizarlos en una plantilla de producto única.

Ahora, es el momento de construir los elementos que componen la página de producto. Para los propósitos de este tutorial, sólo se utilizarán los siguientes widgets Elementor y no se requerirá ningún otro plugin:

• Widget de título del producto
• Widget de migas de pan de Woo
• Widget de imagen de producto
• Widget de valoración de productos
• Breve descripción del widget
• Widget de precios de productos
• Widget de añadir a la cesta
• Meta Widgets de producto
• Ficha Datos del producto
• Productos relacionados 
• Añadir widgets

Como se ve en el vídeo, hay total libertad para ajustar el diseño y mover los elementos. Se puede utilizar cualquier otro widget para que la página de producto sea más eficaz y atractiva. Botones para compartir, widgets de llamada a la acción, imágenes destacadas, menús desplegables ...... Incluso se pueden añadir campos personalizados a la plantilla mediante la función de contenido dinámico.

Paso 4: Previsualizar la página del producto con otros productos

Para asegurarse de que la plantilla de producto está diseñada correctamente, se recomienda previsualizarla con varios productos diferentes. Haga clic en el icono del ojo en el panel inferior izquierdo y, a continuación, en Configuración. En Configuración de vista previa, seleccione el producto específico que desea mostrar. Ahora, aplique y vea cómo queda.

Paso 5: Establecer las condiciones

En esta etapa, puede establecer las condiciones que determinan dónde se muestran las plantillas de productos. Por defecto, la plantilla afectará a todas las páginas de productos del sitio. También es posible seleccionar categorías específicas de productos. Haga clic en "Publicar" y el producto individual saldrá a la luz.

Cómo utilizar las fichas de producto de WooCommerce con Elementor

Personalizar la página de la tienda de productos

Para llevar a cabo esta tarea, es necesario diseñar una producciónPágina del catálogoEsta página afectará a todos los productos del sitio o a los productos de una categoría. En primer lugar, vuelva a la página Elementor > Mis plantillas(matem.) géneroCrear una plantilla de perfil de producto. A continuación, seleccione una plantilla existente o cree una.

Añadir "Productos archivados "gadgety "Título del archivo"y personalice su diseño. Para que coincida con el diseño de las plantillas de producto individuales, utilice la función Copiar estilos entre páginas. Vuelva a la página del producto y haga clic con el botón derecho en Copiar. Vuelva al producto archivado y haga clic con el botón derecho en Pegar estilo.

En "Productos archivados "en el menú "consultar (un documento, etc.) > fuente (de información, etc.) "Selección bajo "Nuevos productos". A continuación, seleccione Anillos en la categoría de productos. Sólo aparecerá la categoría de anillos. Si la lista de productos de esa categoría es larga, deslice la paginación. En la pestaña Estilo, puede diseñarColumnas y filasinter-brecha. Ajustescoloryestilo caligráficoetc.

Antes de publicar, seleccione las condiciones para determinar dónde aparecerá el archivo, como haría en una plantilla de producto individual. Haga clic en "escriba a" y la página de archivo se puso en marcha.

alcanzar un veredicto

El Constructor de WooCommerce de Elementor proporciona flexibilidad de diseño para crear y ajustar intuitivamente las páginas de producto. Esto ahorra tiempo y reduce drásticamente el tiempo que se tarda en pasar de la idea a una tienda online WooCommerce en vivo y totalmente funcional.

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