Cree una página de producto Elementor WooCommerce

Las tendencias de compra están cambiando a un ritmo rápido y la gente tiende a comprar online 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 que salir a comprar.

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

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

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

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

¡Profundicemos más para ir al grano!

¿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 creador 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 el Elementor profesional y descárguelo del Elementor.org oficial.

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

  • Para la versión gratuita de Elementor:

Vaya a Plugin > Agregar nuevo > ingrese al creador de páginas Elementor > 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 estándar del producto WooCommerce se parece a cualquier página básica del producto WooCommerce sin ningún detalle nítido.

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

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

Ahora, en el menú desplegable, seleccione el elemento "Producto único".

La mejor parte es que Elementor viene con algunas plantillas de páginas de productos prediseñadas, 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 una 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 producto.

Una vez que haya seleccionado su plantilla favorita, lo llevará al editor de Elementor donde podrá personalizar la plantilla según sus gustos.

Aquí puedes ver diferentes bloques en el menú del lado izquierdo. 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 de la 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” encima.

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

Puede agregar relleno a ambas columnas para mantenerlas ligeramente separadas entre sí.

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 puedes 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 ello tendrá que arrastrar y soltar el widget de precio debajo de la descripción del producto.

Después de agregar la pestaña de precio debajo de la descripción del producto, puede personalizar el widget de precio seleccionando las opciones en el 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: añade información adicional sobre el producto en el siguiente apartado.

Cree una nueva sección de dos columnas y luego agregue pestañas de datos del producto que incluyan descripción, información adicional y reseñas. 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 para agregar "sección de ventas adicionales".

Así es como se verá su sección de ventas adicionales después de agregarla. 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 bien, ¿el paso final es dónde deseas publicar tu producto? puede hacer clic en publicar o ir a la sección de ojos 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.

Móvil optimice la página de su producto WooCommerce

Dado que una gran cantidad de tráfico llegará a través del teléfono inteligente, tendrá que optimizar su tienda para la visualización del teléfono inteligente; de ​​lo contrario, puede perder sus ventas.

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

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

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

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

Ahora, guarde y continúe publicando la página de su 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, entonces 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 soporte para 3 sitios y 1000 sitios respectivamente.

Concluyendo

El único propósito del creador de páginas Elementor es permitir a los usuarios dar 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 curva de la página de la tienda. Y si no encuentra el elemento que desea en el menú de Elementor, ¡no se preocupe! Hay muchas otras configuraciones avanzadas que pueden actualizar su arsenal y agregar múltiples elementos a su biblioteca. Uno de ellos son los complementos esenciales que vienen con elementos dedicados únicamente para WooCommerce.

Titularkhu

en vivo:.cid.e495888558d5265f

Publicaciones recientes

Cómo usar encabezados y pies de página con Elementor

Los encabezados y pies de página de un sitio web son elementos esenciales. En la mayoría de los casos, el encabezado proporciona navegación...

6 de enero de 2022

Comparación de temas de WordPress: Astra vs OceanWP

Dos de los temas de WordPress más populares del mercado son Astra y OceanWP. Profesional…

2 de enero de 2022

Comparación de temas de noticias de WordPress: Periódico vs. Astra

Crear un excelente sitio web de noticias no requiere que te conviertas en diseñador web. Nosotros…

25 de octubre de 2021

Cree un sitio web relacionado con noticias con Newspaper Theme

El tema Periódico es uno de los temas de WordPress más importantes diseñados por tagDiv, un…

18 de octubre de 2021

Cómo construir un comercio electrónico con el constructor Avada WooCommerce

Cuando se trata de configurar una tienda en línea, WooCommerce es el plugin ideal. Él…

4 de octubre de 2021

Cómo usar encabezados fijos y efectos de desplazamiento con Elementor

Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web,…

21 de septiembre de 2021