Cómo Hacer Una Página

Hacer una Web Profesional con Wordpress

  • Mi Cuenta
  • Contacto
  • Curso GRATUITO de WordPress
  • Suscribirse (10€/mes)
Estás aquí: Inicio / Elementor / Como Crear y Personalizar una tienda de WooCommerce con Elementor

Como Crear y Personalizar una tienda de WooCommerce con Elementor

noviembre 7, 2018 Por Óscar 2 comentarios

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 😉

Publicado en: Elementor, Woocommerce

Comentarios

  1. Emelys dice

    marzo 17, 2019 a las 5:35 pm

    Muchas gracias tanto por este artículo como por el otro sobre “Cómo crear la ficha de los productos de WooCommerce con Elementor Pro” . Me ayudaron muchísimo. Esta bien explicado.

    Responder
    • Oscar martin dice

      marzo 18, 2019 a las 9:01 am

      Muchas gracias Emelys 😉

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Carrito

Categorías

Contenido Premium

¿Quieres Aprender WordPress y Ganar dinero? Cópiame

¿Necesitas Ayuda?

  • Contacto
  • Blog

Más Información

  • Condiciones de Uso
  • Condiciones generales de venta
  • Aviso Legal
  • Pólitica de Privacidad
  • Política de cookies

Buscador

Funciono con el Theme Genesis · Acceder

Este sitio web instalará en tu navegador cookies analíticas y publicitarias propias y de terceros si continúas navegando.
Encontrará más información en nuestra Política de Cookies...Configuración de CookiesAceptar
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Siempre activado
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente el blog no funcionará bien si no están activas.
Estas cookies son:
- Comprobación de inicio de sesión.
- Cookies de seguridad imprescindibles.
- Saber si ya has aprobado/rechazado las cookies.
Non-necessary
Esta web utiliza las siguientes cookies adicionales:
- Mautic: Recordar si ya estás suscrito al boletín de noticias.
- Google Analytics: un servicio de analítica web desarrollada por Google, que permite la medición y análisis de la navegación en las páginas web.
GUARDAR Y ACEPTAR