Crear una página de producto Elementor WooCommerce

Las tendencias de compra están cambiando a un ritmo rápido y las personas tienden a comprar en línea más que nunca.

Es por eso que la necesidad de una tienda de comercio electrónico está aumentando para satisfacer los hábitos de compra en línea porque a las personas les resulta más conveniente comprar en línea en lugar de salir a comprar.

También puede iniciar su tienda de comercio electrónico de inmediato, utilizando las herramientas y la configuración correctas. Y notará un aumento drástico en sus ventas en un período de tiempo récord.

Si ha planeado abrir una tienda de comercio electrónico y está buscando un experto de WordPress que haga el trabajo por usted, déjeme decirle que no necesita ninguno.

¡Si! Puede hacerlo usted mismo porque no necesita ser un desarrollador de WordPress o experto en codificación y puede hacerlo sin tener ningún conocimiento de codificación con las herramientas y la configuración correctas.

Simplemente siga el tutorial paso a paso para crear una página de tienda WooCommerce utilizando el generador de páginas Elementor.

¡Profundicemos más para llegar al punto!

¿Qué necesitará para crear una página de producto con Elementor?

Instale el plugin en su sitio de WordPress desde el repositorio de WordPress.org y, además, deberá instalar el generador de páginas Elementor . La versión gratuita se puede descargar desde WordPress.org, sin embargo, la versión gratuita viene con opciones de personalización limitadas. Por lo tanto, si desea obtener opciones de personalización ilimitadas, elija Elementor pro y descárguelo de Elementor.org oficial.

¿Cómo instalar el generador de páginas Elementor?

  • Para la versión gratuita de Elementor:

Ir a Plugin s> Agregar nuevo> entrar en la página Elementor formador> haga clic en instalar y activar.

  • Para Elementor Pro:

Compre la versión Pro en Elementor.com y luego cargue el archivo zip y luego haga clic en instalar y activar.

Cree una página de producto Elementor WooCommerce paso a paso

La página de productos estándar de WooCommerce se parece a cualquier página básica de productos de WooCommerce sin ninguna nitidez.

Sin embargo, si desea agregar la voz de su marca, debe personalizarla de manera única.

Paso 1: Vaya a la sección Plantilla del menú de su Tablero y haga clic en "Agregar nuevo".

Ahora, desde el menú desplegable, seleccione el elemento "Producto único"

La mejor parte es que Elementor viene con algunas plantillas de página de productos prefabricadas, por lo que, si desea comenzar rápidamente, seleccione cualquiera de las opciones que se parezca más a la que desea.

Es mucho más fácil crear una página de producto a partir de la plantilla prefabricada que crearla desde cero. Por lo tanto, modifique cualquier plantilla existente y ahorre tiempo y esfuerzo.

Hemos seleccionado esta plantilla para nuestra página de productos.

Una vez que haya seleccionado su plantilla favorita, lo llevará al editor Elementor donde puede personalizar la plantilla según su gusto.

Aquí puede ver diferentes bloques en el menú de la izquierda. Arrastra y suelta el bloque con el que te gusta trabajar.

Haga clic en el botón "+" Agregar y seleccione el tamaño de columna que desea agregar.

Hemos seleccionado dos tamaños de columna para nuestra plantilla de producto.

Ahora, agregue un widget de título de producto en la columna derecha y agregue el título de su producto en él.

Una vez que haya agregado el título del producto, el siguiente paso es agregar las "migas de pan Woo" por encima.

Ahora, agregue la imagen del producto en la columna izquierda y arrastre y suelte el widget de imagen del producto desde la columna izquierda.

Puede agregar el relleno a ambas columnas para mantenerlos ligeramente separados el uno del otro.

Después de agregar la imagen y ajustar el relleno de acuerdo con las dimensiones requeridas, agregue el widget de calificación del producto debajo del título del producto.

Agregue una breve descripción del widget del producto debajo del bloque de revisión del producto. También puede ajustar el espacio entre los dos bloques.

Una vez que haya terminado con la descripción del producto y todos los detalles, nuestro siguiente paso es agregar el precio del producto y para esto tendrá que arrastrar y soltar el widget de precio debajo de la descripción del producto.

Después de agregar la pestaña de precios debajo de la descripción del producto, puede personalizar el widget de precios seleccionando las opciones del menú de la izquierda. Puede ampliar el icono, cambiar el estilo de fuente y también el color de fuente de negro a cualquier otro color de su elección.

Ahora agregue el widget "agregar al carrito" y personalice su color, fuente o estilo desde el menú si lo desea.

Ahora, agregue meta del producto debajo del widget de precio que mostrará la categoría del producto y el número de serie del producto.

Paso 2: agregue información adicional sobre el producto en la siguiente sección.

Cree una nueva sección de dos columnas y luego agregue pestañas de datos del Producto que incluyen descripción, información adicional y revisiones. Y en el lado derecho de la columna, agregue la sección de productos relacionados.

Para mantener el mismo formato de cada columna, puede hacer clic en la esquina izquierda de cada columna y copiar y pegar el formato de columna para cada columna.

Paso 3: agregue otra sección de agregar "sección de venta superior".

Así es como se verá la sección de ventas posteriores después de la adición. Agregue un poco de relleno para alinear la sección.

Y finalmente, ha terminado con el diseño de la página de su producto. Ahora, ¿el último paso es dónde quieres publicar tu producto? puede hacer clic en publicar o ir a la sección del ojo en la esquina inferior del menú izquierdo y hacer clic en la configuración para seleccionar la categoría del producto.

Haga clic en el menú Agregar condición y luego seleccione la categoría de su producto y haga clic en publicar.

Mobile optimice su página de producto WooCommerce

Dado que va a llegar mucho tráfico a través de los teléfonos inteligentes, tendrá que optimizar su tienda para la visualización de teléfonos inteligentes, de lo contrario, podría perder sus ventas.

Aunque, WooCommerce ya está optimizado para dispositivos móviles, pero para tranquilizar si las plantillas de la página de su producto se ven absolutamente bien en la pantalla del dispositivo móvil, siga el procedimiento.

Encontrará una opción Modo receptivo en la esquina inferior izquierda de la interfaz de Elementor.

Al hacer clic en la opción de respuesta móvil, puede cambiar entre las opciones de visualización móvil, de escritorio y de pestañas.

Haga clic en cualquiera de las opciones que desee ver y modifique el diseño si encuentra alguna complicación.

Ahora, guarde y continúe publicando su página de producto.

Precios de Elementor Pro

La versión básica de Elementor está disponible de forma gratuita, mientras que la versión pro viene con tres licencias. Si está buscando su blog personal o un sitio único, la licencia personal es la más adecuada para usted, donde puede obtener un creador de WooCommerce junto con más de 90 widgets profesionales.

Mientras que las licencias plus y expert son adecuadas para empresas o agencias adultas con un soporte de 3 sitios y 1000 sitios respectivamente.

Terminando

El único propósito del páginas de Elementor es permitir que los usuarios den rienda suelta a su creatividad sin depender de la codificación. Elementor viene con una variedad de widgets que le permiten crear cualquier tipo de páginas de productos basadas en diseños atractivos. Los elementos básicos de WooCommerce son más de 10 que permiten a los usuarios personalizar cada torcedura y curva de la página de la tienda. Y si no encuentra el elemento deseado en el menú de Elementor, ¡no se preocupe! Hay muchas otras configuraciones avanzadas que pueden mejorar su arsenal y agregar múltiples elementos a su biblioteca. Uno de ellos son los complementos esenciales que vienen con elementos dedicados solo para WooCommerce.

Deja un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios están marcados *