¿Te gustaría aprender a crear una página de tienda personalizada? WooCommerce con Elementor?

Como sabrá, Elementor Pro viene con la función de constructor WooCommerce lo que le permite crear un sitio web de comercio electrónico personalizado con WooCommerce sin codificar. Esta función le permite crear páginas WooCommerce personalizadas utilizando el editor visual de Elementor, que ofrece una interfaz intuitiva.

Ver también: Cómo instalar Elementor en WordPress

En el momento de escribir este artículo, puede crear páginas personalizadas para la página de la tienda, la página del producto y las páginas de archivo del producto (etiquetas y categorías). Pronto también podrá crear páginas personalizadas para la página de pago y la página del carrito.

En este artículo, le mostraremos cómo crear una página de tienda WooCommerce personalizada utilizando la función de creación de WooCommerce de Elementor Pro.

La página de la tienda en sí es una de las páginas predeterminadas en WooCommerce. Esta página actúa como un escaparate para mostrar sus productos. Puede acceder a esta página yendo a votasite.com/tienda. De forma predeterminada, la página de la tienda WooCommerce solo muestra productos WooCommerce.

Al crear una página de tienda personalizada con Elementor Pro, puede agregar elementos para hacer que su escaparate sea más atractivo.

Cómo crear una página personalizada de una tienda WooCommerce con Elementor

Hay al menos dos widgets de Elementor que puede usar para crear una página personalizada de una tienda WooCommerce: Productos de archivo y Productos.

En este ejemplo, usamos el último.

La función del widget Productos es bastante similar al del widget Publicaciones La diferencia es que el widget Productos se usa para mostrar productos de WooCommerce, mientras que el widget Publicaciones se usa para mostrar publicaciones de blog.

Lea también: Cómo importar o exportar modelos en Elementor

Tenga en cuenta que solo puede encontrar el widget Productos cuando el complemento WooCommerce está instalado y activado.

Para comenzar a crear una página de tienda WooCommerce personalizada con Elementor Pro, vaya a primero à Plantillas -> Creador de temas en su panel de WordPress. Haga clic en la pestaña Productos Archive de la página Theme Builder, luego haga clic en el botón añadir un ARCHIVO DE PRODUCTOS.

Dale un nombre a tu modelo y haz clic en el botón CREA UN MODELO.

cómo crear una página personalizada para una tienda WooCommerce con Elementor

Hay tres plantillas de página de tienda personalizadas entre las que puede elegir en caso de que desee crear la página de tienda personalizada a partir de una plantilla. Si desea crear la página de la tienda personalizada desde cero, puede cerrar la biblioteca de plantillas.

Ver tambien Cómo usar el muestrario de color en Elementor

En este ejemplo, crearemos la página de la tienda personalizada desde cero. Como se mencionó anteriormente, usaremos el widget Productos para mostrar los productos.

Antes de agregar el widget Productos al cuadro de edición, puede definir el diseño agregando secciones y columnas. Una vez que el diseño esté listo, simplemente arrastre el widget Productos al cuadro de edición.

Como puede ver, el widget Productos carga y muestra automáticamente los últimos productos de WooCommerce. Puede modificar la consulta abriendo el bloque Consulta debajo de la pestaña Contenido desde el panel de configuración. Hay cinco opciones para elegir:

  • Consulta actual - Consulta actual
  • Últimos productos - Últimos productos
  • Venta - Venta
  • Destacado - Destacado
  • Selección manual - Selección manual

También puede establecer el orden en el que se muestran los productos o excluir determinados

cómo crear una página personalizada para una tienda WooCommerce con Elementor

Para establecer el número de columnas y filas, puede abrir el bloque Contenido debajo de la pestaña Contenido. Desde este bloque también puede activar el paginación.

Puede jugar con el panel de configuración hasta que obtenga la mejor configuración para el widget Productos. Una vez que haya terminado con el widget Productos, puede agregar más widgets a su página.

Lea también: Cómo usar el selector de color en Elementor

Una vez que haya terminado de editar la página, puede hacer clic en el botón PUBLICAR en la parte inferior del panel de configuración.

Agregue una condición de visualización haciendo clic en el botón agregue una condición. Como desea crear una página de tienda personalizada, seleccione la opción Tienda Página. Haga clic en el botón GUARDAR CERRAR para guardar el cambio.

cómo crear una página personalizada para una tienda WooCommerce con Elementor

Hasta ahora, ha creado con éxito la página de la tienda WooCommerce personalizada con Elementor Pro. Puede ir en su sitio.com/tienda para comprobar el resultado.

Personalizar el widget de productos

Antes de publicar su página, puede personalizar el widget Productos para hacerlo más atractivo. Para hacerlo, haga clic en el widget en el cuadro de edición y navegue hasta la pestaña Estilo desde el panel de configuración. Hay cuatro bloques que puede abrir de la siguiente manera:

  • Productos

Puede abrir este bloque para definir el espacio entre columnas y filas. Desde este bloque también puede establecer la tipografía (familia de fuentes, tamaño de fuente, etc.) así como el color del texto de los elementos del producto, como el título del producto, el precio del producto, la calificación del producto, el producto, etc. También puede establecer el borde de la imagen del producto,

  • Box

En este contexto, Box se refiere al contenedor de cada producto. Puedes abrir el bloque Box para definir el ancho del borde del contenedor, el radio del borde, sombra de la caja, el color de fondo, el color del borde, etc.

  • Paginación

Si activa la opción Paginación de la cuadra Contenido, puedes abrir el bloque Paginación debajo de la pestaña Estilo para personalizar la paginación. Puede configurar cosas como espaciado, color de borde, color de fondo, etc.

También puede definir diferentes parámetros en cada estado (normal, apuntando y activo).

  • Flash sucio

Cuando agrega un nuevo producto en WooCommerce, puede establecer un atributo de precio de venta para mostrar a sus visitantes que el producto asociado tiene un descuento. Para enfatizar esto, puede mostrar el atributo de venta en la página de la tienda para que los productos con descuento tengan una insignia de venta.

Puedes abrir el bloque Flash sucio para personalizar la insignia de venta. Puede definir elementos como el color del texto, color de fondo, tipografía, radio del borde, tamaño (ancho y alto), distancia, etc….

Por último

WooCommerce Builder es una de las características que ofrece Elementor Pro. Te permite crear un sitio web plataforma de comercio electrónico personalizada y única con WooCommerce y sin codificación. No es necesario instalar un tema de WordPress que dice estar diseñado para WooCommerce. En su lugar, puede crear páginas personalizadas de WooCommerce usted mismo utilizando el editor visual de Elementor.

Lea también: Cómo agregar divisor para crear una sección en Elementor

Hasta la versión 3.2.2, Elementor Pro solo le permite crear una página de tienda personalizada, una página de producto individual personalizada y páginas de archivo de producto personalizadas. Pero Elementor anunció que en la próxima versión de Elementor Pro, también podrá crear una página de carrito personalizada, una página de pago personalizada y una página de cuenta de cliente personalizada.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este artículo que le muestra cómo crear una página personalizada para una tienda WooCommerce con Elementor.. Si tiene alguna duda sobre cómo llegar favísanos en el comentarios.

Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...