Saltar al contenido principal

Aprenda a personalizar visualmente sus plantillas de página de productos WooCommerce usando Elementor.

Obtenga el mejor creador de WooCommerce y comience a diseñar la tienda de sus sueños

Para que su tienda de comercio electrónico se destaque y realmente cree una experiencia única para sus clientes, necesita poder personalizar la página de su producto. Además de eso, la capacidad de personalizar visualmente la página de su producto es fundamental para mantener un estilo único en toda su tienda en línea.

Entonces, ¿desea personalizar las páginas de sus productos WooCommerce? ¡Pues estás de suerte!

Elementor hace que sea mucho más fácil arrastrar y soltar visualmente diferentes elementos de las páginas de un solo producto, personalizando el diseño como desee.

En el pasado, este tipo de tutoriales de diseño de WooCommerce involucraban docenas de líneas de código.

Afortunadamente, esos días terminaron, gracias a Elementor Constructor de WooCommerce.

Ahora, obtiene el control total sobre su diseño y el diseño de la página del producto con el poder de Elementor Pro. No es necesario incorporar acciones o ganchos, ni profundizar en los distintos archivos PHP. Cada personalización de diseño se realiza en la interfaz, directamente desde el constructor de Elementorpage.

Plantilla de producto WooCommerce

La página del producto básico de WooCommerce se ve así:

feature-1-1024x488-9326140-7396029-2468146

Con Elementor, puede jugar con el diseño de la plantilla de la página del producto como desee. En esta guía, aprenderá a crear este diseño de página de producto:

3-template-of-product-1024x554-9084436-1834935-4906292

Debido a que utilizará la plantilla de producto único de Elementor, una vez que termine de crear la plantilla, podrá aplicarla en todos sus productos, así como para categorías específicas u otras condiciones.

Configuración inicial

En este tutorial, el enfoque está en personalizar la página del producto, por lo que omitiremos la configuración básica de WooCommerce y cómo agregar nuevos productos. Kinsta tiene un gran tutorial sobre el asunto si necesita ayuda con eso.

Después de la configuración, debe tener WooCommerce instalado y algunos productos relacionados agregados a su sitio.

También debe tener Elementor y Elementor Pro instalados para obtener las capacidades de diseño visual.

¡Nota! Si no tiene WooCommerce activado, no podrá acceder a las plantillas de productos de Elementor.

Paso 1: cree la plantilla de producto único

dauwp4j-1024x620-7232335-2661093-8547093

Para comenzar a diseñar la plantilla de producto único en Elementor, seguiremos un procedimiento similar al de crear la plantilla única normal.

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

rhplp2v-1024x682-2354286-2079144-3181990

La forma más sencilla de empezar es utilizar una de las plantillas de página de producto prediseñadas y personalizarla para que se adapte a su sitio. Hay varios estilos diferentes de páginas de productos para elegir.

Antes de comenzar a agregar widgets, puede asegurarse de que está trabajando en una página de producto de ancho completo, cambiando a una plantilla de ancho completo (aprenda cómo hacerlo aquí).

Con Elementor, tiene un control de personalización total sobre el diseño y el estilo de la página del producto.

La otra opción es construirlo desde cero. En el panel de edición, puede ver los widgets especiales para el producto.

Paso 3: agregue los widgets de productos que conformarán su página

woo-685x1024-2043988-2410399-9333766

Ahora es el momento de crear los elementos que conformarán la página de su producto. Para obtener la lista completa de widgets de productos, consulte nuestra documentación sobre el tema. Para este tutorial, utilizará los siguientes widgets de Elementor y ningún otro complemento:

  • Widget de título del producto
  • Widget Woo Breadcrumbs
  • Widget de imagen de producto
  • Widget de calificación de productos
  • Widget de descripción breve
  • Widget de precio del producto
  • Añadir al widget de carrito
  • Meta widget de producto
  • Pestañas de datos de productos
  • Producto relacionado
  • Widget de ventas adicionales

Como puede ver en el video, tiene total libertad para jugar con el diseño y mover elementos.

Puede utilizar cualquier otro widget para hacer que la página de su producto sea más eficaz y atractiva. Compartir botones, widgets de llamada a la acción, imagen destacada, menús desplegables … Incluso se pueden agregar campos personalizados a la plantilla utilizando la función de contenido dinámico.

Paso 4: Vista previa de la página del producto con otro producto

3-template-of-product-1024x554-9084436-1834935-4906292

Para asegurarse de que la plantilla de su producto tenga el diseño correcto, se recomienda que obtenga una vista previa con varios productos diferentes.

Haga clic en el icono del ojo en el panel inferior izquierdo, luego en Configuración. En Configuración de vista previa, elija el producto específico que desea mostrar. Ahora, aplique y revise para ver cómo se ve.

Paso 5: establezca las condiciones

fk2beyl-1024x682-2739854-1541419-3543605

Esta es la etapa en la que establece las condiciones que determinan dónde aparecerá su plantilla de producto. De forma predeterminada, la plantilla afectará a todas las páginas de productos de su sitio. También puede seleccionar una categoría específica de productos.

Haga clic en Publicar, ¡y su único producto estará activo!

Bono: personalice la página de su tienda de productos

gdlxt34-1024x577-1164043-9690682-7461600

Para completar la tarea, diseñe una página de catálogo de productos que afectará a todos los productos del sitio o por categoría. Entonces, primero, regrese a Elementor> Mis plantillas y cree una plantilla de archivo de producto.

Luego, seleccione una plantilla existente o cree una.

Agregue el widget Productos de archivo y el Título del archivo, y personalice su diseño.

Para adaptarlo al diseño que ya hizo en su plantilla de producto único, use la funcionalidad de estilo de copia que funciona entre páginas. Vuelva a la página del producto y haga clic con el botón derecho en Copiar. De vuelta en el producto de archivo, haga clic con el botón derecho en Pegar estilo.

En la configuración de Productos de archivo, en Consulta> Fuentes, elija Productos más recientes. Luego, en Categoría de producto, elija anillos. De esta forma, solo aparecerá la categoría del anillo.

Desliza sobre Paginación si tienes una lista larga de productos para la categoría.

En la pestaña de estilo, puede diseñar la distancia entre las columnas y las filas. Ajusta los colores, las fuentes y más.

Antes de publicar, elija las condiciones para determinar dónde aparecerá el archivo, al igual que hizo para la plantilla de producto único.

Pulse publicar y su página de archivo estará activa.

Cree páginas de productos de WordPress imaginativas utilizando el poder de #Elementor

Conclusión

WooCommerce Builder de Elementor le brinda la flexibilidad de diseño para crear y ajustar visualmente las páginas de sus productos. Esto le ahorra tiempo y reduce considerablemente el tiempo que lleva pasar de una idea que tiene a una tienda WooCommerce en línea en vivo y completamente funcional.

Descubrirás muchas otras plantillas gratuitas de WooCommerce en Envato Elements, que ofrece más de 2000 plantillas diferentes, muchas de las cuales están relacionadas con sitios de comercio electrónico. Además, existen numerosos temas de WooCommerce que puede ver como los que mencionamos en nuestro artículo.

R Marketing Digital