Como Crear y Personalizar una tienda de WooCommerce con Elementor

En este tutorial vamos a ver como podemos crear a nuestro gusto la página principal de nuestra tienda con WooCommerce y Elementor Pro.

Error común con Elementor y WooCommerce

Si te has lanzado directamente a editar la página de tu tienda con WooCommerce es muy probable que te salta este error y no sepas como salir de el:

Lo sentimos, no se encontró el área de contenido de su página.

Debes llamar a la función ‘the_content_’ en la plantilla actual, para que Elementor pueda funcionar en esta página.

Y no tengamos otra opción de hacer click en el botón volver

error elementor woocommerce tienda

¿Te has encontrado con esta situación? No te preocupes que lo resolveremos 😉

El error que nos da el constructor visual en la página de WooCommerce es debido a que el propio WooCommerce trata la página de tienda de forma especial y no deja que ningún plugin externo la toque directamente.

Si quieres saber más sobre este problema aquí lo explican.

Crear una plantilla con Elementor para resolver el problema

Para que WooCommerce no de guerra lo que tenemos que hacer es primero crear una plantilla con Elementor y luego decirle que sea usada exclusivamente en la página de Tienda a través de las condicionales que nos permite añadir Elementor. Qué gran invento 🙂

¿Cómo hacemos esto? Muy sencillo, vamos a ello 😉

Vamos a Elementor —> mis plantillas —> product Archive —> Añadir Nueva

crear plantilla woocommerce elementor

En añadir nueva plantilla nos selecciona automáticamente Product Archive y le damos un nombre:

nueva plantilla elementor product archive

Ahora podemos elegir entre una plantilla predefinida o hacerla a nuestro gusto.

En esta ocasión voy a elegir una de las plantillas:

plantillas woocommerce elementor

Una vez seleccionada la plantilla podremos modificar lo que queramos, con la ventaja que vemos visualmente como va quedando:

previsualizar woocommerce elementor

Cuando tenemos la página a nuestro gusto hacemos click en publicar y aquí viene la parte más importante add condition o añadir condición

En nuestro caso le vamos a decir que tenga en cuenta esta plantilla para la página de tienda

condicion pagina tienda woocommerce

Y listo, a partir de ahora si vas a la página de tienda ya tendrá el nuevo diseño sin errores ni problemas 🙂

Si prefieres ver todo el proceso en vídeo aquí tienes el tutorial en vídeo para ver todo el proceso en detalle.

Suscríbete a mi canal:  

Espero que os haya sido útil 😉

2 comentarios en «Como Crear y Personalizar una tienda de WooCommerce con Elementor»

Responder a Oscar martin Cancelar la respuesta