5
(1)

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.

¿Por qué crear un sidebar para tienda y otro para blog?

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

Cómo crear sidebars diferentes en una web con WooCommerce y Divi

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.

plugin añadir sidebar woosidebars

Ahora, ve al nuevo campo que se ha creado en Apariencia > Áreas de widgets.

web varios sidebars

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».

añadir nuevo sidebar woocommerce

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).

sidebar diferente tienda woocommerce

sidebar diferente divi woocommerce

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.

Añadir y configurar los widgets para cada sidebar

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).

añadir otra barra lateral divi

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…

widgets diferentes web divi woocommerce

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.

¿Te ha resultado útil?

¡Danos 5 oks!

Promedio de puntuación 5 / 5. Recuento de votos: 1

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies