Cómo crear un sitio de WooCommerce impulsado por Elementor

No basta con 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. Como tal, tiene sentido usar los tres para crear una tienda en línea con un aspecto estelar y un gran rendimiento.

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

En este artículo, veremos cómo crear una tienda usando Elementor y WooCommerce. En todo momento, veremos cómo ambos encajan para brindarle la mayor 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 crear tiendas en línea de primera línea.

Para empezar, WordPress es el CMS más utilizado del mercado. Por supuesto, esto no es suficiente para garantizar una posición tan dominante entre los usuarios. De hecho, hemos echado un vistazo a 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 sobre la que puede construir.

Hablando de eso, también tienes WooCommerce. Debido a que Automattic desarrolla el complemento, tiene una gran integración con el núcleo de WordPress, pero eso no es todo.

También es la plataforma de comercio electrónico más popular. Dentro del ecosistema de WordPress, tiene alrededor del 20 por ciento de participación, lo que se traduce en alrededor del ocho por ciento de todos los sitios web. En comparación, Shopify tiene una participación de mercado del cinco o seis por ciento. Una vez más, las cifras de uso no lo son todo.

WooCommerce toma el proceso de creación de una tienda en línea y lo agiliza. Puede estar en funcionamiento en minutos y tener una plataforma de comercio electrónico robusta, poderosa y extensible lista para funcionar.

Para unirlos, tienes Elementor. También tiene una gran cuota de mercado dentro de su campo y una base de usuarios masiva.

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

En resumen, Elementor es un complemento con muchas columnas en el blog de WPKube, y debe revisar nuestros archivos para ver qué puede hacer.

Lo que un sitio de WooCommerce necesita de 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 afinar por qué esto es así y qué ofrece.

En un sentido general, 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 ayudar a que sus productos y páginas de compras se destaquen.
• Una forma de editar los elementos individuales que componen una página de producto típica.
• Funcionalidad adicional para ayudar a 'subir de nivel' su tienda.

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

Por ejemplo, tiene un gran Popup Builder que funciona de maravilla para ventas, ofertas por tiempo limitado, cupones y mucho más:

Puede crearlos como lo haría con otras plantillas de página y puede aplicarlos en un instante. Además, puede personalizarlos de casi cualquier forma que elija. 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 muchos detalles aquí, ya que cubrimos esto en nuestro tutorial, y también redondeamos algunos temas en un artículo dedicado.

La consideración principal que necesita en este caso es un tema que sea compatible con Elementor y WooCommerce. Incluso una mirada rápida a los sitios premium del mercado le mostrará que muchos temas anuncian esto, por lo que sus opciones son amplias.

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

• Escaparate. Es probable que tenga la menor compatibilidad con Elementor en el futuro, ya que el Editor de bloques es una tecnología nativa. Quieto,
• Hola. Este es el tema de inicio en blanco de Elementor, y es ideal para desarrollar un sitio de WooCommerce desde cero. Por supuesto, si tiene menos tiempo disponible, sería conveniente elegir otro tema con más funciones.
• Generar Prensa. Este es un tema superior con una infraestructura flexible. Esto significa que independientemente de si usa Block Editor, Elementor u otra cosa, su tienda se verá increíble.

Lo alentamos a encontrar el tema correcto antes de profundizar en la creación de su sitio. Recuerda, los mejores resultados serán con algo compatible con Elementor y WooCommerce.

Cómo crear un sitio de WooCommerce impulsado por 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 a tener en cuenta:

• Instalar y configurar WooCommerce.
• Cree sus líneas de productos de WooCommerce y use Elementor para crear las páginas de productos.
• Diseñe una página de Tienda dedicada, nuevamente usando Elementor.

Sin embargo, para este tutorial vamos a suponer que ya tiene instalado y activado Elementor Pro. Es algo que le mostramos en nuestro artículo sobre cómo crear un embudo de WordPress. Esa publicación lo ayudará cuando experimente problemas.

1. Instale WooCommerce y configúrelo

Hay dos aspectos a considerar cuando configura una instalación de WooCommerce: el complemento en sí y la configuración de su 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 un par de minutos, vale la pena tomarse un poco más de tiempo para pasar por el Asistente de configuración.

Cuando se trata de este punto de la configuración, lo tenemos cubierto. De hecho, tenemos una publicación de tutorial completa de WooCommerce que explica paso a paso cómo comenzar con WooCommerce y crear su primer producto. Es una buena publicación para tener abierta en una pestaña libre mientras revisas esta. La información allí contenida será valiosa para el siguiente conjunto de pasos.

2. Crea tus productos de WooCommerce

Una vez que tenga una instalación de WooCommerce en funcionamiento, debe considerar la creación de productos en el back-end. Nuevamente, nuestro tutorial de WooCommerce cubre cómo hacer esto en detalle, pero aquí están las Notas de Cliff:

• Dirígete a la pestaña Productos > Agregar nueva dentro de WordPress.
• Complete el nombre de su producto y una breve descripción.
• Utilice los metacuadros de WooCommerce para completar los datos de su 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 creador de páginas para crear el diseño de las páginas de sus productos.

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

Desde aquí, seleccione Producto único en el menú desplegable Tipo de plantilla e ingrese un nombre opcional:

Esto abrirá la biblioteca de plantillas para mostrar cada bloque preconstruido dentro de:

Una vez que vea un diseño que le guste, haga clic en el botón Insertar y Elementor importará el Bloque:

Esta es una forma rápida de activar una página de producto dedicada. Puede tomar este gran comienzo y agregar más también. Elementor incluye una serie de widgets dedicados para ayudarlo a crear páginas específicas de WooCommerce:

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

Aparecerá una ventana emergente para ayudarlo a configurar una condición específica para mostrar la plantilla:

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

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

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

Si usa WordPress y WooCommerce con un tema específico de WooCommerce como Storefront, su principal puerto de escala para personalizar la página de la tienda es a través del Personalizador. Sin embargo, nuestro enfoque es con Elementor. La forma de hacerlo con el generador de páginas es usar una página de archivo de productos .

Esto le permite personalizar cómo se muestran los productos en su sitio, pero no maneja el resto de su página. En algunos casos, puede ser difícil administrar dos conjuntos de personalizaciones y configuraciones, pero según nuestra experiencia, hasta ahora no ha sido un problema.

Al igual que con los productos individuales, deberá dirigirse a Plantillas> Agregar nuevo dentro de 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. También como antes, puede usar cualquiera de los widgets específicos de WooCommerce para ayudarlo a diseñar una página a su gusto.

Una vez que haga clic en el botón Publicar nuevamente y llegue al cuadro de diálogo Configuración de publicación, puede invocar la magia. En su forma básica, puede incluir la nueva plantilla en la página de la tienda :

Aunque, eso no es todo. Puede agregar más condiciones de inclusión 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 de WooCommerce

Antes de terminar, queremos mencionar las otras páginas de WooCommerce generadas. La mala noticia es que no caen bajo la mirada de Elementor. En otras palabras, no puede editar páginas como las páginas de pago o agradecimiento sin una extensión adicional de WooCommerce.

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

Si editar estas páginas en su totalidad es importante para usted, querrá ver el Editor de campos de pago ($ 49 por año) y la extensión Páginas de agradecimiento personalizadas (también $ 49 por año).

En conclusión

¿Qué podría salir mal al usar tres de las herramientas más populares para publicar una tienda de comercio electrónico? En este caso, no hay mucho. WordPress, Elementor y WooCommerce ofrecen una experiencia estelar. Combinarlos puede brindarle lo último en crear y administrar una tienda en línea.

A lo largo de esta publicación, hemos visto cómo usar Elementor y WooCommerce juntos para construir una tienda. Una vez que haya instalado y activado ambos complementos, su primera tarea es crear productos junto con sus 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 creador de páginas (como el creador de ventanas emergentes y más) puede ayudar a llevar su tienda a la estratosfera.

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