Mucha gente me ha preguntado cómo puede añadir 2 barras laterales o sidebars diferentes a su wordpress. Una barra o sidebar para el blog y otra barra o sidebar diferente para la tienda online (Woocommerce).
Por defecto, solo vamos a poder tener una barra lateral o sidebar en WordPress. Esto, es un problema, ya que la barra no solo se mostrará en las entradas y categorías del blog, sino que también aparecerá en las categorías y productos de la tienda online.
Es difícil y poco práctico crear una barra lateral o sidebar que sirva al mismo tiempo para el blog y la tienda Woocommerce.
De hecho cuando añadimos el widget de categorías del blog al sidebar, puede ser confundido por los clientes con las categorías de la tienda online.
Lo ideal sería que una barra o sidebar se mostrara en entradas y categorías del blog y por otro lado, otro sidebar o barra lateral se mostrara en productos y categorías de la tienda Woocommerce.
Vamos a utilizar un plugin gratuito de WordPress, que se denomina WooSidebars. El plugin nos va a servir para crear varias barras laterales o sidebar en WordPress y mostrar cada uno de ellos según determinadas circunstancias.
Nos sirve para este problema planteado cuando se trabaja con Woocommerce, pero también nos puede servir para otros casos.
ÍNDICE VARIOS SIDEBARS EN WORDPRESS
- 1.- Plugin WooSidebars para crear diferentes barras laterales o sidebars en Wordpress
- 2.- Cómo crear áreas de widget con WooSidebars (crear barras laterales o sidebars wordpress)
- 3.- Configurar área de widget o barra lateral / Condiciones
- 4.- Personalizar la barra lateral, sidebar o área de widgets creada en el anterior apartado
Como decía antes, vamos a usar el plugin gratuito WooSidebars para poder crear diferentes barras laterales o áreas de widgets.
Cada zona o área de widget se mostrará atendiendo a una serie de criterios que configuraremos.
Aquí tienes un enlace al plugin WooSidebar
Una vez hayamos instalado y activado el plugin WooSidebars, estamos listos para crear una zona o área de Widgets, que no es otra cosa que la creación de una barra lateral o sidebar.
Para cresar un área de Widgets iremos a: “Apariencia > Área de Widgets”
A continuación, haremos clic en el botón: “Add new” para añadir una nueva zona o área de Widgets.
3.- Configurar área de widget o barra lateral / Condiciones
Una vez creada el área de widgets, le pondremos un nombre para poder diferenciarlo de otros sidebars o áreas de widgets que vayamos a crear en el futuro.
Después de poner el nombre al área de widgets que estamos creando iremos al bloque: “Condiciones”.
En este apartado de “Condiciones”, estableceremos cuando se debe mostrar la barra lateral o zona de widgets que estamos creando.
Tenemos las siguientes pestañas y opciones (si no te aparecen, haz clic en avanzado):
a.- Páginas: en esta pestaña se mostrarán las diferentes páginas creadas en WordPress. Podrás marcar las páginas específicas en las que quieras que se muestre la barra lateral que estás creando
b.- Páginas y sus hijas: En esta pestaña se mostrarán páginas principales y páginas hijas o subpáginas. En el anterior apartado también se mostraban las páginas principales y subpáginas, pero en esta pestaña se muestra esa dependencia entre páginas padre e hijo.
Al igual que en la pestaña anterior, marcaremos las páginas o subpáginas en las que queremos que se muestre la barra lateral que estamos creando.
Si quieres saber más sobre las páginas hijo o subpáginas en wordpress, aquí tienes más info: Subpáginas wordpress
c.- Tipos de contenido: aquí podremos hacer que la barra aparezca en todos los contenidos de un determinado tipo.
Nos interesan las opciones:
“Cada producto individual”: si marcamos esta opción, la barra lateral se mostrará en todas las fichas de producto de la tienda online Woocommerce
“Cada entrada individual”: si marcamos esta opción, la barra lateral se mostrará en todas las entradas de blog.
d.- Archivos de taxonomía (Taxonomy archives): Las taxonomías son formas de clasificar contenidos como por ejemplo: las categorías de un blog, categorías de una tienda online, etiquetas de un blog, etiquetas de una tienda online, categorías de proyectos Divi, etc.
En esta pestaña podremos seleccionar que la barra lateral o área de widgets que estamos creando se muestre en determinadas taxonomías.
Nos interesan principalmente:
“Categorías (Category)”: categorías del blog (todas)
“Categorías del producto (producto_cat)”: categorías de la tienda Woocommerce. Es decir, categorías que forman el catálogo de la tienda online (todas).
Condiciones para mostrar la nueva barra lateral o sidebar de wordpress
e.- Términos de la taxonomía (Taxonomy terms): muy parecida a la anterior. También podremos seleccionar taxonomías (que te he explicado en el apartado anterior) generadas en wordpress.
Pero en este caso, podremos seleccionar determinadas taxonomías.
En el apartado anterior (archivos de taxonomía) solo podíamos seleccionar todos los elementos de una taxonomía, como por ejemplo, todas las categorías del blog. En esta pestaña, podremos seleccionar por ejemplo una categoría específica del blog.
Verás dos subpestañas:
“Categorías”: hace referencia a las categorías del blog
“Categorías del producto”: hace referencia a las categorías del catálogo de la tienda Woocommerce
f.- Jerarquía de plantilla (WordPress Template Hierarchy): las páginas en wordpress se agrupan por jerarquías. En esta pestaña podremos seleccionar que se muestre la barra lateral en páginas de una determinada jerarquía.
g.- Woocommerce: en esta pestaña nos aparecerán páginas específicas de Woocommerce. Por lo que podremos marcar en que páginas específicas de Woocommerce queremos que se muestre la barra lateral o sidebar que estamos creando.
En el lateral derecho verás un bloque denominado: “Barra lateral a reemplazar”. Selecciona la barra a la que sustituirá la barra lateral que estás creando.
Finalmente, publica la página.
Ya hemos creado una nueva área de widgets o sidebar. Hemos configurado en donde debe mostrarse (páginas, post, productos, taxonomías, etc.). Pero, ahora nos falta algo fundamental, que es personalizar esta área de widgets o barra lateral que hemos creado. Es decir, añadirle widgets.
Para esto, iremos a: “Apariencia > Widgets”.
Veremos cómo ahora existe un área de widgets con el mismo nombre que el área que creamos en el apartado anterior.
Ahora, simplemente, tendremos que ir añadiendo los widgets que queramos al nuevo sidebar que hemos creado.
Me encanta el diseño web y el mundo del ecommerce. Apasionado de Prestashop, Woocommerce/Wordpress y de la formación. Me gustaría que este blog te sirviera de ayuda para poner en marcha e ir mejorando y evolucionando tu tienda online. Ya seas un profesional del sector o no, seguro que encontrarás mucha información de valor e interés aquí.
Hola! muchas gracias por el contenido es de mucha ayuda, cree mi barra lateral para mostrar las categorias con el plugin que sugeriste, de mis productos y la inclui en una pagina con la opción slide bar de divi, pero cuando salgo del modo de edición de divi esta desaparece ¿que podría estar pasando?
Saludos y gracias
Hola Isidora.
Habría que ver como lo tienes configurado. Pero, en principio la configuración la debes hacer desde las opciones del plugin. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Analytics , SEO, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
Buenos días Joaquin,
Tengo una página de afiliación y quería que la barra lateral diera información diferente en función del tema (deportes, hogar, afeitado, etc …)
Utilizo el tema EXTRA. He bajado el plugin y seguido tus pasos, creando varias Áreas con sus widgets pero no me funciona.
Por si quieres verlo, la página es http://www.estudiodecompras.com
y he hecho la prueba con la entrada Guía de Afeitado con Navaja Barbera, pero solo consigo que aparezca la barra lateral vacía, sin contenido.
Estos son los pasos que he hecho:
– En Áreas de Widgets he creado el Area Afeitado
– Le he indicado que substituye a la barra lateral principal
– En Términos de Taxonomía/Categorías, he marcado: «Afeitado, Todas las entradas de Afeitado, Consejos de Afeitado y Todas las entradas de Consejos de Afeitado»
– En WIDGETS he ido a la barra denominada Area Afeitado y le he añadido varios widgets de prueba, como el campo buscar y algún otro.
– He ido a ENTRADAS y en este artículo he seleccionado que quiero que tenga una barra lateral. También he seleccionado como Ubicación de la barra lateral: Derecha y en Elija la barra lateral: Area Afeitado.
Pero como te comento, solo me aparece el campo de la barra lateral vacío. He hecho varias pruebas y cambios pero no hay manera.
A ver si me puedes ayudar, muchas gracias!!
Emili
Buenas.
Para descartar que sea algo de la plantilla Extra, mira a ver en el soporte de Elegant Themes
OK! Así lo haré.
Gracias y saludos
Emili