Índice
El sidebar o barra lateral es un elemento básico de una web y se suele usar para añadir filtros de búsqueda, listado de categorías, banners, redes sociales, formularios…
A veces, se hace indispensable contar con diferentes sidebars. Por ejemplo, en el caso de que tengas una tienda online que incluye blog.
Esto es lo que vamos a explicar paso por paso en este post; cómo crear diferentes sidebars para tienda y blog en una web con WooCommerce y Divi.
Pues muy sencillo, en la página de tienda y en las fichas de producto se suelen añadir widgets como:
- Filtro por precio
- Categorías de productos
- Productos más vendidos
- Productos en oferta
- Productos vistos recientemente
- Carrito
- Inicio de sesión
Y en la página de blog o en los post individuales se suelen añadir widgets como:
- Filtro de contenido
- Categorías de las entradas
- Últimas entradas
- Entradas más vistas
- Formulario de suscripción
- Banners
- Redes sociales
- Algún widget específico de tienda
La plantilla estrella de Elegant Themes, Divi, permite opciones de configuración directa y de diseño del sidebar de una web, sin embargo, en la actualidad no es posible incluir varios sidebars según el tipo de contenido, salvo añadiendo algún snippet o algún plugin.
A veces, se necesitan crear sidebars diferentes según la categoría del contenido, según el tipo de usuario que visite la web o según si es una página o un post.
En el caso de tiendas online, después de probar diferentes plugins, el que mejor se ha adaptado es WooSidebars, un plugin gratuito, específico para WooCommerce y muy sencillo de configurar.
Para conseguir que se muestre un sidebar para tienda y otro sidebar para blog con este plugin, hay que realizar dos pasos:
- Instalar y configurar WooSidebar.
- Añadir y configurar los widgets para cada sidebar.
Instalar y configurar WooSidebars
Lo primero que tienes que hacer es instalar el plugin en tu WordPress y configurarlo.
Ve a Plugins > Añadir nuevo e instala y activa el plugin WooSidebars.
Ahora, ve al nuevo campo que se ha creado en Apariencia > Áreas de widgets.
Te aparecerá un listado vacío, donde puedes añadir nuevos sidebars a tu web con Divi y WooCommerce.
Añade un nuevo Sidebar clicando en «Add new».
Asígnale un nombre al nuevo sidebar (lo hemos llamado Tienda), una descripción y selecciona el contenido donde quieres que se muestre.
Para ello, revisa todos los apartados y marca la casilla de las páginas donde quieres que se muestre el nuevo Sidebar de Tienda (clicando en la pestaña de «Avanzado» te aparecerán todas las casillas).
Por último, selecciona «Barra Lateral» en le desplegable de la derecha y clica en Publicar. Ya que con este plugin también es posible seleccionar áreas del footer para crear pies de páginas diferentes dentro de una misma web.
Si te faltan cambios, después podrás entrar a editar este sidebar cuantas veces quieras.
Una vez configurado el plugin WooSidebars, es el momento de indicar a tu WordPress qué widgets quieres que se muestren en cada sidebar.
Para ello, ve a Apariencia > Widgets y comprueba que te aparece el nuevo sidebar creado (Tienda Sidebar en nuestro caso) y el sidebar que la plantilla Divi incluye por defecto (Barra lateral).
Abre cada sidebar y arrastra dentro de de ellos los widgets que quieras mostrar.
Como ves, lo que hemos hecho es dejar el sidebar que Divi incluye por defecto para la página de blog y para las entradas, y añadir un nuevo sidebar para las páginas de tienda, ficha de producto, categoría de producto, etiqueta de producto…
Esto no quiere decir que no incluyas algún widget de WooCommerce en el sidebar del blog, lo cual resultará positivo para recordar al cliente que puede comprar productos además de leer la información de tu blog.
La página de carrito, página de pago, o página de mi cuenta preferimos dejarlas en ancho completo, sin ningún sidebar que distraiga al cliente de realizar la compra.
Hemos creado una única variante de barra lateral, pero si tu web es más compleja y necesitas crear más tipos de barras laterales o sidebars, lo puedes hacer siguiendo el mismo proceso.
Si tienes una tienda online con la plantilla Divi y con WooCommerce, esta es la forma más sencilla de crear diferentes sidebars para Blog y Tienda. Esto no quiere decir que ambos sidebars no puedan compartir algunos widgets, pero te permite seleccionarlos en función del contenido que se está mostrando al usuario en ese momento.
Buenas, yo trabajo con Divi, el problema es que el filtro en móviles se ve debajo del listado de productos, lo normal es que estuviera justo arriba, para no tener que hacer scroll. Lo único que aparece arriba es «ordenar por»
Además, la apariencia del filtro es un poco cutre para mi gusto. He usado otras plantillas y con los plugins que mencionais arriba (YITH WooCommerce Ajax Product Filter y Woosidebars) la apariencia es mucho más profesional, tipo filtro desplegable etc y sin hacer ningín cambio de CSS ni de nada (aunque Divi es mi tema favorito)
Dejo link a la tienda
https://www.tododelantales.com/tienda/
Hola, tu sabes como activar los filtros en una tienda online hecha con divi.
Hola! la pagina esta en modo mantenimiento a pedido del cliente. Mi duda es que quiero hacer la pagina de la tienda con el constructor divi para poder ponerle un banner arriba y el pie de pagina, pero cuando uso el constructor divi no me funciona la barra lateral. Hay algun plugin compatible con divi para eso?
Hola,
Estoy utilizando el módulo Tienda para mostrar mis artículos pero no funcionan los filtros. He instalado los siguiente plugins (que he usado en otras tiendas con Woocommerce pero sin Divi):
– Yith WooCommerce Ajax Product Filter
– Themify – WooCommerce Product Filter
El primero simplemente ni los mostraba y en el segundo los mostraba bien pero no funcionaban. Al filtrar, creaba un listado de productos debajo del footer en lugar actualizar el módulo tienda.
¿Me pueden dar algún consejo o recomendarme algún plugin?
Muchas gracias
Hola.
Mi pregunta es la siguiente, trabajo con Divi, que me parece genial, hasta hace poco tenía perfectamente funcionando WooSidebars para tener un sidebar distinto para Woocommerce, y de repente ha dejado de funcionar, tg todas las últimas actualizaciones y tiene pinta que por alguna de ellas ya no funciona, en otra tienda que no he actualizado sigue funcionando correctamente.
Las últimas actualizaciones que me han saltado son la de Woocommerce, Woosidebars, WooCoomerce PDF y la del tema Divi.
Ha alguien le ha pasado lo mismo, o hay alguna actualización prevista que lo solucione.
Gracias.
Un Saludo
Hola Isidro, dejo aquí tu duda por si alguien ha tenido el mismo problema. Gracias y saludos!
Hola!!
Mi pregunta esta fuera del tema y quiero que me ayudes.
Sabes Quiero mejorar la apariencia de woocommerce lo tengo con el theme divi. No me gusta la anchura de woocomerce sobre todo en dispositivos móviles se vee muy estrecho. ¿ Cómo puedo hacerlo para que se vea mas ancho y así mejorar la apariencia?
Muchas gracias por tu ayuda.
Hola
En el comentario anterior me refería a esto. Para que lo puedes ver te envío el Link https://www.paquetesturisticoscusco.net/tienda/cusco-de-tus-suenos-4-dias-3-noches/
(No puede enviar captura de pantalla) jejej
La parte que no me agrada esta después de la descripción del producto(desde donde dice descripción hasta abajo), se vee muy estrecho en dispositivos móviles, por cierto antes que coloque la tabla de precios también estaba así, siempre estuvo así.
Gracias por tu ayuda.
Hola Joel!
Por lo que puedo ver, tienes diseñada la ficha de producto para que se muestre la barra lateral derecha (sidebar). Si lo que quieres es mostrarla en ancho completo, tienes que entrar en la edición del producto y arriba a la derecha, en «diseño de página», seleccionar la pestaña «ancho completo» o «fullwith». Esto lo tendrás que hacer una a una en cada ficha de producto.
Por cierto, he visto que aún no has eliminado el logo de Divi que viene por defecto en el menú de barra fija al hacer scroll 😉
Un saludo y gracias por seguir el blog!
Pero el plugin pone que no ha sido probado en la última versión de wordpress. ¿Se puede usar? ¿No interfirá con otros plugins o tema? Gracias
Hola María,
Es cierto que el plugin lleva tiempo sin actualizarse, pero lo hemos probado en la última versión de WordPress (4.8.1) y ha funcionado perfectamente sin interferir en el resto de plugins.
Espero que te sirva.
Saludos!