Cómo construir un sitio web de WooCommerce con Elementor y Astra Theme

¿Busca lanzar una tienda WooCommerce y comenzar a vender productos a través de Internet? Si bien puede encontrar mucha información en línea, todo el proceso de crear una tienda que realmente se vea bien a menudo puede parecer un poco abrumador.

Entonces, ¿qué pasaría si le dijéramos que puede configurar una tienda de comercio electrónico de excelente apariencia en menos de una hora … gratis?

Lo sabemos, es una tarea difícil. Pero con la combinación de Elementor, WooCommerce y el tema Astra, puedes hacerlo . Y en esta publicación, le mostraremos los pasos exactos que debe seguir para comenzar a operar con su propia tienda en poco tiempo.

Qué buscar en un tema WooCommerce de Elementor

Tan emocionante como es comenzar con su tienda en línea usando WooCommerce y Elementor, es igualmente esencial encontrar un tema adecuado para acompañarlo.

¡Lo último que desea es terminar apagando incendios y solucionando problemas justo antes de comenzar!

¿Cuáles son esos elementos clave que debe considerar al reducir su tema ideal de WordPress?

1. Velocidad

Todo se reduce a qué tan rápido se carga su sitio web. Es aún más importante cuando tienes productos para vender en tu tienda WooCommerce.

La velocidad de carga de la página no es solo una necesidad. Es lo que subraya su éxito.

¿Sabía que 1 de cada 4 visitantes abandonará su sitio web si tarda más de cuatro segundos en cargarse? Incluso un segundo retraso puede reducir la satisfacción del cliente en un 16 %. (Fuente: Experto en creación de sitios web)

Con un tiempo de carga de página más largo, sus clientes tienen más posibilidades de irse sin ver lo que su tienda tiene para ofrecer. Lo que significa una tasa de rebote más alta.

Esto no va bien con los motores de búsqueda y solo reduce la clasificación de su sitio.

Al final del día, todo se reduce a la experiencia del usuario. Cuanto mejor sea la experiencia del usuario, mejores serán las conversiones de su tienda.

2. Personalización

¿Quiere un control total sobre la apariencia de su tienda en línea? Luego considere un tema que pueda personalizar fácilmente.

Al crear una tienda en línea, la idea es crear una que sea mejor que sus competidores. Su logotipo, fuentes, colores, todos deben reflejar la identidad de su marca.

Entonces, ¿por qué ceñirse a la configuración predeterminada del tema?

Debe poder personalizar cada elemento del tema, ya sea desde el personalizador o usando Elementor. Si bien la mayoría de los temas le brindan esta flexibilidad, es útil verificar esto desde el principio.

3. Plantillas de demostración

¿Por qué empezar con un lienzo en blanco cuando puedes aprovechar algunas plantillas de tiendas ya preparadas?

Admitelo. Cuando empiezas, ¿no es más fácil crear una tienda online viendo cómo ya está hecha? Es como hacer referencia a lo que funciona antes de convertirse en un profesional en la creación de uno propio.

Busque temas que le ofrezcan la flexibilidad de usar plantillas de tienda de WooCommerce preconstruidas que se puedan personalizar fácilmente con Elementor.

4. Optimizado para ventas móviles

Las ventas desde dispositivos móviles están en constante aumento.​​

Los informes indican que se proyecta que las ventas desde dispositivos móviles alcancen los 3,56 billones de dólares en 2021, un 22,3 % más que lo registrado en 2020.

(Fuente: Statista)

¿Tu tienda está optimizada para dispositivos móviles? ¿Tu tema responde y funciona bien en todos los dispositivos? Si no es así, te recomendamos que lo consideres seriamente.

5. Proceso de pago más rápido

Comencemos con algunos hechos.

• La tasa promedio de abandono del carrito es de casi el 70 por ciento (69,57 para ser precisos) y llega al 85,65 por ciento cuando se trata de usuarios móviles.
• Debido al abandono del carrito, las marcas de comercio electrónico pierden hasta $ 18 mil millones en ingresos por ventas cada año.

La buena noticia es que el mismo informe también indica que al optimizar la experiencia de pago, hay un aumento del 35,62 % en las conversiones.

Si bien la razón número uno es la inclusión de cargos adicionales, el 26% mencionó que el proceso de pago es demasiado largo durante el proceso de pago.

(Fuente: Sleeknote)

Todos estos datos demuestran la importancia de una página de pago bien diseñada.

A menos que desee ver una mella significativa en sus ingresos por ventas, querrá asegurarse de que su tema tenga un proceso de pago optimizado para la conversión.

6. Impresionante apoyo

¿No ayudaría un poco de apoyo de vez en cuando? Y qué mejor que contar con un equipo de apoyo, justo cuando lo necesites.

Si bien la mayoría de los temas ofrecen soporte a través de la documentación, es bueno optar por un tema de WordPress que ofrezca un soporte humano amigable.

7. Seguro

Por último, pero no menos importante, elija un tema que sea estable y seguro. Uno que le permite instalar casi cualquier complemento de WooCommerce y Elementor sin temor a romper su tienda.

Para resumir, busque un tema creado para el rendimiento, la conversión y que funcione a la perfección.

Un tema como Astra!

Lo que necesitas para hacer tu tienda WooCommerce

Como sugiere el título de esta publicación, hay dos herramientas principales que necesitará para construir su tienda más allá del complemento principal de WooCommerce:

• Tema Astra: este es un tema gratuito de WordPress que incluye opciones de personalización profundas, así como sitios integrados de integración y demostración de WooCommerce.
• Elementor: este es un creador de páginas gratuito que lo ayudará a personalizar varias páginas en su tienda, como su página de inicio y la página de información.

Lo único que supondremos para este tutorial es que ya tiene instalado WooCommerce; cubriremos todo lo demás sobre cómo hacer que su tienda se vea y funcione bien.

Si necesita ayuda para configurar WooCommerce, consulte nuestra guía completa.

Una vez que haya instalado WooCommerce, ¡aquí le mostramos cómo hacer que su tienda se vea increíble!

Parte 1: Cree un sitio web de WooCommerce en menos de 10 minutos

Más allá de su diseño liviano general y sus opciones de personalización, Astra lo ayuda específicamente con WooCommerce de dos maneras principales.

Puedes:

• Importe plantillas gratuitas de Elementor WooCommerce, así como la configuración del Personalizador de WordPress para crear rápidamente una tienda WooCommerce de gran apariencia.
• Utilice la integración dedicada de WooCommerce de Astra para personalizar aspectos importantes de su tienda a través del Personalizador de WordPress en tiempo real.

Aquí se explica cómo usar Astra para configurar el núcleo de su tienda WooCommerce:

Paso 1: tema y complemento

Para comenzar, deberá instalar un tema y un complemento. Ambos se enumeran en WordPress.org, lo que significa que puede instalarlos directamente desde su panel de control de WordPress:

• Tema Astra
• Complemento de plantillas de inicio

Paso 2: Importar el sitio de inicio de Astra WooCommerce

Una vez que haya instalado el tema Astra y el complemento Plantillas de inicio, vaya a Apariencia → Plantillas de inicio en su panel de WordPress para importar su sitio de demostración (este artículo de ayuda tiene más información si es necesario).

Esto iniciará el asistente de plantilla de inicio para instalar la plantilla prediseñada en su sitio web.

Haga clic en el botón " Construya su sitio web ahora ".

Luego, seleccione el generador de páginas de Elementor :

Luego puede usar las opciones de filtrado para encontrar las diversas plantillas de Elementor de comercio electrónico.

Algunas de estas plantillas son gratuitas, mientras que otras, marcadas como "Premium", requieren el complemento Premium Starter Templates que forma parte de Astra Essential Bundle y Growth Bundle.

Siéntase libre de elegir cualquier sitio de demostración que le llame la atención. Pero para este tutorial, vamos a utilizar el sitio de demostración gratuito de Brand Store :

Una vez que haga clic en el sitio de demostración deseado, se abrirá una nueva página donde podrá cargar el logotipo y el esquema de colores de su sitio web. Esto hace que su vida sea más fácil porque no tendrá que agregar el logotipo o elegir colores la segunda vez.

Sin embargo, si su logotipo y colores no están listos, simplemente puede omitir el paso. Para este tutorial, haga clic en " Omitir y continuar ".

A continuación, encontrará un cuadro que le pide que complete sus datos (que puede dejar en blanco) e instale los datos personalizados que se agregan al sitio web.

Entonces, en este paso, simplemente haga clic en Enviar y crear mi sitio web .

Una vez que haga clic en el botón Enviar y crear mi sitio web , comenzará a importar el sitio web.

Ahora, ¡estás listo para hacer las cosas tuyas!

Paso 3: use el personalizador de WordPress para personalizar las cosas

Astra utiliza el personalizador nativo de WordPress para ayudarlo a personalizar el aspecto de su tienda. Esta herramienta le permite realizar cambios sin código en varios aspectos de su tienda y ver los resultados de inmediato en una vista previa en tiempo real.

Para acceder al Personalizador de WordPress, vaya a Apariencia → Personalizar en su panel de control de WordPress:

Además de la configuración específica de WooCommerce aquí, Astra también incluye opciones para ayudarlo a personalizar otros aspectos de su sitio, como fuentes, colores, logotipos y más.

Para obtener una explicación completa de estas configuraciones, puede consultar los artículos de soporte de configuración del Personalizador. Sin embargo, para este tutorial, nos centraremos específicamente en las integraciones de WooCommerce de Astra.

Estos le permiten controlar aspectos de su tienda como:

• Cómo funcionan las páginas de listado de productos
• Ventas adicionales en la página de su carrito de compras
• Las imágenes de tus productos
• Otros ajustes más pequeños

La mayoría de las configuraciones de WooCommerce se encuentran en dos áreas principales.

Configuración de WooCommerce

Para acceder al conjunto de opciones, vaya a WooCommerce en la barra lateral del Personalizador de WordPress. Aquí, verá las siguientes áreas:

• Catálogo de productos : le permite controlar cuántos productos mostrar en la página de su tienda, así como qué información mostrar y cuántas columnas de productos mostrar.
• Producto único : le permite desactivar las migas de pan.
• Carrito : le permite habilitar las ventas adicionales de productos en la página de su carrito. Las ventas adicionales pueden ayudarlo a aumentar sus ventas al mostrar productos específicos relacionados con los productos que ya están en el carrito de un usuario.
• Aviso de la tienda : le permite habilitar un aviso en toda la tienda y personalizar su texto.

Por ejemplo, si habilita un aviso de la tienda , obtendrá este agradable banner de notificación en todo el sitio:

Esta característica es excelente para promocionar una venta u oferta especial.

Cambiar las columnas de la tienda a 4 agrega otro producto en cada fila:

Más allá de la parte de WooCommerce , también puede encontrar la configuración de WooCommerce en:

• Global → Contenedor : le permite controlar el ancho del área que ocupan sus páginas de WooCommerce.
• Barra lateral : le permite controlar la ubicación de su barra lateral en las páginas de WooCommerce. Por ejemplo, al cambiarlo de izquierda a derecha , su lista de categorías de productos se desplazaría hacia el lado derecho.

Pasos para crear un sitio web de WooCommerce con Elementor y Astra Theme.

Parte 2: use el generador de páginas de Elementor para personalizar las páginas de su tienda

Astra lo ayuda a personalizar las páginas de su tienda y productos, así como su menú de navegación y barra lateral.

Pero cuando se trata de ajustar su página de inicio y su página Acerca de nosotros, ahí es donde entra en juego el complemento gratuito de creación de páginas de Elementor.

Para editar su página de inicio, haga clic en Editar con Elementor . Elementor facilita:

• Cambiar texto e imágenes
• Mueva los elementos de diseño usando arrastrar y soltar
• Agregar nuevos elementos de diseño

Por ejemplo, para editar el título de su página de inicio, simplemente haga clic y escriba:

Si necesita ayuda para usar el creador de páginas de Elementor para editar las páginas principales de su tienda, los videos oficiales de Elementor 101 son un excelente lugar para aprender sobre Elementor. Si eres un novato total, primero debes familiarizarte con el generador de páginas de Elementor.

¿Sabía que puede crear un carrito de compras completo, una página de pago, una página de cuenta de cliente y mucho más con solo usar un código abreviado?

Aquí hay una lista completa de códigos cortos de WooCommerce que puede explorar.

Los mejores temas de Elementor WooCommerce

Hay muchos temas de WordPress y muchos de ellos son compatibles con Elementor y WooCommerce.

Si bien no los hemos enumerado todos aquí, hemos mencionado algunos de los principales temas de Elementor WooCommerce. Seleccionar uno de estos debería brindarle la experiencia que está buscando.

1. Astra

Con más de un millón de instalaciones y siendo el único tema de WordPress no predeterminado que logra esta marca, sabemos un par de cosas sobre cómo crear temas optimizados de alto rendimiento que conviertan.

Astra es un tema ligero de WordPress que ofrece integraciones con Elementor y WooCommerce. Además, Astra viene con sitios de demostración de WooCommerce listos para usar que se pueden personalizar fácilmente con Elementor.

Usando Astra, obtienes:

• Tiendas mucho más rápidas que ayudan a impulsar la tasa de conversión
• Un carrito desplegable que permite a los usuarios ver su carrito desde casi cualquier página
• Proceso de pago optimizado por conversión, lo que reduce la tasa de abandono del carrito
• Llame la atención del usuario con burbujas de ventas que ayuden a impulsar las ventas
• Sitios completamente receptivos que funcionan muy bien en todos los dispositivos
• Tiendas personalizables sin tener que escribir una sola línea de código

¿Quieres más funciones?

Actualice a Astra Pro y obtenga funciones adicionales de WooCommerce como:

• Desplazamiento infinito que carga dinámicamente sus productos a medida que los usuarios siguen desplazándose
• Opciones de pago adicionales para mejorar las experiencias de los usuarios, como pagos en dos pasos, pagos sin distracciones y más
• Más opciones de exhibición y galería de productos que se pueden ajustar fácilmente. Opción para abrir imágenes en una caja de luz también disponible
• La función de vista rápida del producto permite a los usuarios obtener una vista previa de los detalles del producto sin visitar la página detallada del producto. Esto ayuda a aumentar la tasa de conversión.
• Barra lateral fuera del lienzo para filtros de productos

2. Hola Elementor + Creador de temas

Elementor es un complemento de creación de páginas de WordPress muy popular y tiene algunos temas propios que quizás desee consultar.

Las plantillas funcionan muy bien con WooCommerce y se pueden personalizar fácilmente con Elementor WooCommerce Builder.

Usando los widgets dedicados de WooCommerce, como precios, botones para agregar al carrito y funciones en Elementor Theme Builder, puede diseñar su tienda y las páginas de productos de la manera que desee.

3. Generar Prensa

GeneratePress es otro tema popular de WordPress compatible con WooCommerce.

Usando el personalizador de WordPress, la configuración de GeneratePress WooCommerce le permite configurar casi cualquier cosa, como el carrito desplegable, el modo de pago sin distracciones y más.

Si bien el tema GeneratePress está disponible de forma gratuita en WordPress, para acceder a la configuración de WooCommerce, necesitará GeneratePress Premium.

4. Neva

Neve es un tema de WordPress listo para WooCommerce que viene con varios sitios web de demostración preparados con tecnología de Elementor.

La versión gratuita de Neve ofrece compatibilidad completa con WooCommerce. Para una mayor integración de WooCommerce, puede considerar la versión Pro.

La versión Neve Pro incluye un módulo de refuerzo de WooCommerce que le permite personalizar su tienda, producto y páginas de pago.

5. OceanWP

Con más de 700 000 instalaciones activas, OceanWP es un popular tema de WordPress que viene con muchas funciones integradas para las tiendas WooCommerce.

Tiene sitios de demostración de WooCommerce listos para usar que funcionan con Elementor.

Algunas características adicionales para WooCommerce incluyen:

• Vista rápida del producto
• carrito de compras desplegable
• Botón flotante para agregar al carrito
• Proceso de pago sin distracciones

OceanWP te ofrece un montón de opciones de personalización y es compatible con Elementor.

Cuándo considerar volverse profesional con Astra

Tanto Astra como Elementor ofrecen versiones profesionales que pueden agregar funcionalidad a su tienda WooCommerce.

Esta funcionalidad no es solo una delicia para la vista, sino que agrega características que pueden tener un efecto real en los resultados de su tienda al facilitar a sus visitantes la compra de sus productos, además de brindarle opciones para controlar la página de pago de su tienda:

• Desplazamiento infinito de productos: se cargan automáticamente más productos a medida que un visitante se desplaza hacia abajo en la página. La investigación del Instituto Baymard sugiere que los compradores de comercio electrónico tienden a ver más productos con desplazamiento infinito, lo cual es excelente si su tienda tiene un catálogo extenso.
• Barra lateral fuera del lienzo: esto le permite agregar filtros útiles sin interferir en la navegación de sus compradores. El filtrado de calidad es un aspecto esencial de cualquier tienda de comercio electrónico. Bien hecho, permite a sus clientes encontrar rápidamente el producto adecuado para que puedan realizar su compra.
• Vista rápida del producto: los compradores pueden hacer clic en un botón de Vista rápida cuando se desplazan sobre un producto para ver más información sobre ese producto. Esto les permite ver detalles importantes sin necesidad de cargar una nueva página, lo que puede facilitar la experiencia de compra.
• Más opciones de pago: puede agregar un pago sin distracciones o habilitar un proceso de pago de dos pasos. También puede elegir habilitar o no el campo de cupón, así como algunas otras configuraciones más pequeñas. Todas estas opciones lo ayudan a modificar su proceso de pago para garantizar que la tasa de abandono de su carrito sea lo más baja posible.
• Etiqueta blanca: si está creando una tienda para un cliente, esta función le permite eliminar toda la marca Astra del panel de control de WordPress para ofrecer un producto final más personalizado.

Donde Astra Pro le brinda acceso a características y funcionalidades de comercio electrónico extensas y únicas, Astra Essential Bundle y Growth Bundle le permiten usar sitios web premium listos para usar que tienen etiquetas "Premium" de la biblioteca de sitios web de inicio.

Elementor vs. Elementor Pro: cuándo actualizar

La versión gratuita de Elementor funciona bien. Ya sea que recién esté comenzando o sea un desarrollador de sitios web de WordPress experimentado, Elementor ofrece una amplia gama de posibilidades de diseño.

Sin embargo, si está buscando más herramientas y funciones para mejorar las conversiones y las ventas, siempre está Elementor Pro.

Si bien nos hemos centrado más en los aspectos de WooCommerce y Elementor en una tabla de comparación a continuación, aquí hay un vistazo a algunas de las diferencias significativas entre Elementor y Elementor Pro.

1. Mientras que el generador de temas le permite personalizar cada parte de su tema, el generador de temas de Elementor Pro le permite ir más allá de las restricciones del tema. Con Elementor, puede diseñar visualmente los diversos elementos de su sitio web, como el encabezado, el pie de página, la página de archivo, las publicaciones individuales y más. ¿Esto implica codificación? ¡De nada! Y funciona en casi cualquier tema de WordPress.
   
2. ¿Cómo se crean formularios de contacto? Suponemos que es mediante la instalación de un complemento de formulario de contacto como WP Forms, Ninja Forms, Contact Form 7 y muchos más. Si bien todas estas son excelentes opciones, el widget de formularios de Elementor Pro le brinda la misma flexibilidad. Diseñe sus formularios sobre la marcha y establezca alertas y notificaciones personalizadas. ¿Quiere integrar algunas herramientas de automatización o CRM? Los widgets de formulario de Elementor Pro le permiten hacerlo con solo unos pocos clics.
   
3. ¿Ha utilizado las plantillas y bloques profesionales en la biblioteca de Elementor? Si es así, sabrá que hay muchas más opciones disponibles en la versión Pro. Con estas plantillas y bloques diseñados profesionalmente, puede personalizarlos fácilmente para crear impresionantes páginas de destino, páginas web, titulares animados, formularios y mucho más.

Además de lo anterior, he aquí por qué podría considerar optar por la versión Pro de Elementor, especialmente si posee una tienda en línea.

WooCommerce, Astra y Elementor: mejor juntos

Póngalos todos juntos y WooCommerce, Astra y Elementor son una amenaza triple que le permite crear una tienda de comercio electrónico completamente personalizada en muy poco tiempo sin escribir una sola línea de código.

Recuerda, todo lo que necesitas hacer es:

• Instalar y configurar WooCommerce
• Importar un sitio de demostración de Astra
• Personalice su tienda a través de la configuración del personalizador en tiempo real de Astra
• Edite su página de inicio y otras páginas principales con el generador de páginas de Elementor

¡Ahora sal y comienza a vender tus productos!