Cómo crear un sitio WooCommerce basado en Elementor

No es suficiente que la plataforma WordPress en sí sea el sistema de gestión de contenido (CMS) más popular del mundo. También tenemos las plataformas de comercio electrónico y creación de páginas más populares en Elementor y WooCommerce. Por lo tanto, tiene sentido usar los tres para crear una tienda en línea estelar y de alto rendimiento.

Si lo desglosamos, WordPress es ideal para organizar sus publicaciones, páginas y productos. WooCommerce ofrece una estrecha integración con la plataforma gracias a sus desarrolladores (Automático). Además, Elementor ofrece una creación de páginas potente e intuitiva arrastrando y soltando. Es una solución completa sin código para construir su tienda.

En esta pieza, veremos cómo construir una tienda usando Elementor y WooCommerce. Con el tiempo, veremos cómo encajan ambos para brindarle la máxima flexibilidad para su sitio.

Por qué WordPress, Elementor y WooCommerce funcionan bien juntos

Vale la pena echar un vistazo más de cerca a cómo WordPress, Elementor y WooCommerce pueden combinarse para ayudarlo a construir las mejores tiendas en línea.

Para empezar, WordPress es el CMS más utilizado A la tienda. Evidentemente, esto no es suficiente para garantizar una posición tan dominante entre los usuarios. De hecho, vimos esto en una publicación anterior, por lo que le recomendamos que lea más esa publicación. En resumen, es una plataforma segura, estable y escalable que puede construir.

Por cierto, también tienes WooCommerce. Dado que Automattic desarrolla el complemento, tiene una excelente integración con el núcleo de WordPress, pero eso no es todo.

Es lo más popular plataforma de comercio electrónico. Dentro del ecosistema de WordPress, tiene una participación de alrededor del 20%, lo que se traduce en alrededor del 8% de todos los sitios web. En comparación, Shopify tiene una participación de mercado de alrededor del cinco al seis por ciento. Nuevamente, los datos de uso no lo son todo.

WooCommerce se encarga del proceso de creación de una tienda en línea y simplifica el proceso. Puede estar en funcionamiento en minutos y tener una plataforma de comercio electrónico robusta, potente y extensible lista para usar.

Para fusionarlos, tienes Elementor. También tiene un gran cuota de mercado en su campo y una gran base de usuarios.

Es un creador de páginas de arrastrar y soltar con un enfoque único para ayudarlo a construir todo su sitio desde cero. Esta es una solución atractiva para usar, ya que hay muchas características y funcionalidades poderosas que otras herramientas no tienen. Lo más relevante aquí está dedicado Generador de WooCommerce.

En resumen, Elementor es un complemento con muchas pulgadas de columna en el blog de WPKube, y debe navegar por nuestros archivos para ver exactamente lo que puede hacer.

¿Por qué un sitio de WooCommerce necesita un creador de páginas?

La conclusión implícita de la última sección es que Elementor puede proporcionar la combinación correcta de características y funcionalidades que WooCommerce necesita para llevar su sitio al siguiente nivel. Sin embargo, es importante comprender por qué es esto y qué ofrece.

En términos generales, un sitio de WooCommerce necesita lo siguiente de un creador de páginas:

• Estrecha integración para que no haya conflictos entre el creador de páginas y WooCommerce.
• Muchas opciones de personalización para ayudarlo a resaltar sus productos y las páginas de la tienda.
• Una forma de cambiar los elementos individuales que componen una página de producto típica.
• Funciones adicionales para «subir de nivel» su tienda

También debe (por supuesto) tener en cuenta sus necesidades individuales. Por ejemplo, puede encontrar que los formularios y las ventanas emergentes son importantes para su tienda y su estrategia de ventas. La buena noticia es que Elementor es más que capaz de satisfacer sus necesidades.

Por ejemplo, tiene una gran Generador de ventanas emergentes que funciona como regalo por ventas, ofertas por tiempo limitado, cupones y más:

Puede crearlas como otras plantillas de página y aplicarlas rápidamente. Además, puede personalizarlos de la forma que desee. Es perfecto si tiene una campaña específica para promocionar en su sitio.

¿Cómo elegir un tema de WooCommerce adecuado?

No entraremos en detalles aquí, ya que lo cubriremos en nuestro tutorial y también completaremos algunos temas en un artículo dedicado.

Lo principal que necesita en este caso es un tema compatible con Elementor y WooCommerce. Incluso un vistazo rápido a los sitios del mercado premium le mostrará que muchos temas promueven esto, por lo que sus opciones son variadas.

Aun así, hay algunos temas notables que podemos mencionar:

• tienda. Es probable que tenga la compatibilidad más baja con Elementor en el futuro, porque Block Editor es una tecnología nativa. Todavía,
• Hola. Este es el tema del lanzador en blanco de Elementor y es ideal para desarrollar un sitio WooCommerce desde cero. Por supuesto, si tiene menos tiempo disponible, sería aconsejable elegir otro tema con más funciones.
• GeneratePress. Este es un tema principal con una infraestructura flexible. Esto significa que si usa Block Editor, Elementor u otra cosa, su tienda se verá genial.

Le recomendamos que encuentre el tema adecuado antes de centrarse en la creación de su sitio. Recuerde, los mejores resultados serán con algo compatible con Elementor. Y WooCommerce.

Cómo crear un sitio WooCommerce basado en Elementor en 3 pasos

En el resto de este artículo, le mostraremos cómo usar Elementor y WooCommerce juntos para crear un sitio de comercio electrónico. Hay tres pasos para recordar:

Sin embargo, para este tutorial asumiremos que ya ha instalado y activado Elementor Pro. Hay algo en este artículo sobre la creación de un embudo de WordPress. Esa publicación te ayudará cuando tengas problemas.

1. Instale WooCommerce y configúrelo

Hay dos cosas a considerar al configurar una instalación de WooCommerce: el complemento en sí y la configuración de la tienda De hecho, la instalación del complemento requiere el mismo proceso que cualquier otro complemento de WordPress.

En cuanto a la configuración de WooCommerce en sí, si bien puede estar listo para comenzar en minutos, vale la pena dedicar más tiempo al proceso. Asistente de configuración.

Cuando se trata de este punto de configuración, lo tenemos cubierto. De hecho, tenemos una publicación completa del tutorial de WooCommerce que explica paso a paso cómo comenzar con WooCommerce y crear su primer producto. Es una buena publicación que abre en una pestaña de respaldo a medida que la revisa. La información privilegiada será invaluable para el siguiente conjunto de pasos.

2. Crea tus productos WooCommerce

Una vez que WooCommerce esté instalado, debería considerar la creación de productos en la parte posterior. Nuevamente, nuestro tutorial de WooCommerce explica cómo hacerlo en detalle, pero aquí están las notas de Cliff:

• Dirigirse a Productos> Agregar nuevo Pestaña de WordPress.
• Ingrese el nombre del producto y una breve descripción.
• Utilice metacasetes de WooCommerce para completar los datos del producto, como el precio.
• Agrega una imagen.
• Publica tu producto

Sin embargo, aquí es donde Elementor muestra su primer movimiento de poder: WooCommerce Builder. Esta es una forma de utilizar el generador de páginas para crear un diseño de página de producto.

Para comenzar, haga clic en Plantillas> Agregar nuevo en WordPress:

Desde aquí, seleccione Un producto de Tipo de modelo menú desplegable e ingrese un nombre opcional:

Esto se abrirá Biblioteca de plantillas para ver cada bloque de construcción de:

Cuando vea un diseño que le guste, haga clic en iniciar sesión en y Elementor importará el bloque:

Esta es una forma rápida de crear una página de producto dedicada. Puede comenzar en grande y agregar más. Elementor incluye una serie de widgets dedicados para ayudarlo a crear páginas específicas de WooCommerce:

Una vez que tenga una página que le guste, haga clic en el botón verde Publicar en la parte inferior de la pantalla:

Aparecerá una ventana emergente que le ayudará a configurar una condición específica para la visualización del modelo:

Cuando esté listo, haga clic en Guardar y cerrar. Desde aquí, puede agregar más productos a su tienda, trabajar en varias plantillas o comenzar a trabajar en una página de tienda dedicada.

3. Diseñe su propia página de tienda dedicada utilizando Elementor y WooCommerce

Una experiencia de usuario útil (UX) de WooCommerce es cómo genera la mayoría de las páginas necesarias que necesita para su tienda.La página de la tienda de nivel superior es la más importante, porque es la portada la que decora la puerta.

Si está utilizando WordPress y WooCommerce con un tema específico de WooCommerce, como Storefront, el punto de partida principal para personalizar la página de la tienda es a través del Personalizador. Sin embargo, nos centramos en Elementor. La forma de hacer esto con el constructor de páginas es usar un Archivo de productos página.

Esto le permite personalizar cómo se muestran los productos en su sitio, pero no se ocupa del resto de su página. En algunos casos, puede ser difícil administrar dos conjuntos de personalizaciones y configuraciones, pero en nuestra experiencia no fue así. hasta ahora no es un problema.

Al igual que con los productos individuales, tendrá que subir Plantillas> Agregar nuevo en WordPress, luego elija Archivo de productos en el menú desplegable:

Nuevamente, puede elegir un bloque, editar una página desde cero o combinar ambos para crear algo único. Además, como antes, puede usar cualquiera de los widgets específicos de WooCommerce para ayudarlo a diseñar una página a su gusto.

Después de hacer clic en público de nuevo y vaya al cuadro de diálogo Configuración de publicación, puede invocar la magia. En su forma básica, puede incluir el nuevo modelo en Página de la tienda:

Sin embargo, eso no es todo. Puedes agregar mas Incluye condiciones para usar la plantilla en varios lugares de su sitio. Esto es excelente para la continuidad y para dar a los visitantes una razón para visitar su tienda.

Una nota rápida sobre las otras páginas generadas por WooCommerce

Antes de concluir, queremos mencionar las otras páginas de WooCommerce generadas. La mala noticia es que no caen ante los ojos de Elementor. En otras palabras, no puede editar páginas como Pagar o Gracias sin una extensión adicional de WooCommerce.

Esto es decepcionante, pero comprensible. Aun así, aún puede usar Elementor para desarrollar los elementos circundantes y luego insertar la funcionalidad específica de la página de códigos cortos. Sin embargo, eso no es lo ideal.

Si editar completamente estas páginas es importante para usted, le recomendamos que eche un vistazo Editor de campo de pago ($ 49 por año), y Páginas de agradecimiento personalizadas expansión (incluso $ 49 por año).

En conclusión

¿Qué podría salir mal al usar tres de las herramientas más populares para administrar una tienda de comercio electrónico? En este caso no son demasiados. WordPress, Elementor y WooCommerce ofrecen una experiencia estelar. Su combinación puede brindarle lo último en la creación y administración de una tienda en línea.

Durante esta publicación, vimos cómo usar Elementor y WooCommerce juntos para construir una tienda. Después de instalar y activar ambos complementos, lo primero que debe hacer es crear productos con páginas asociadas. A partir de ahí, necesita una página de tienda dedicada, algo que Elementor pueda manejar. Además, la funcionalidad adicional del complemento del generador de páginas (como el generador de ventanas emergentes y otros) puede ayudarlo a mover su tienda a la estratosfera.

¿Quieres crear una combinación de Elementor y WooCommerce para tu próxima tienda y, de ser así, este artículo te ayudará? ¡Háganos saber en la sección de comentarios!