Es muy probable que si en tu web tienes blog y tienes tienda online, necesites poner información diferente en el sidebar o barra lateral según estés en unas secciones u otras de la web.
Si el objetivo de la web es que el usuario compre, no tiene mucho sentido que en la barra lateral de las páginas de producto indiquemos los últimos artículos del blog o el listado de categorías. Tampoco que cuando el usuario esté en el blog, le aparezca por ejemplo un filtro de precios para los productos, que iría muy bien sin embargo en las páginas de la tienda.
Si utilizamos un child theme de Genesis con WooCommerce, para solucionar esto lo que podemos hacer es crear un sidebar personalizado para que aparezca sólo en las páginas de la tienda.
1- Registrar Widget Area
Lo primero que aremos será registrar una Widget Area, añadiendo este código en nuestro functions.php:
//* Registrar sidebar para la tienda genesis_register_sidebar( array( 'id' => 'woo_primary_sidebar', 'name' => __( 'Tienda Sidebar', 'nombre_del_tema' ), 'description' => __( 'Sidebar para la tienda en WooCommerce', 'nombre_del_tema' ), ) );
Una vez hecho esto, en Apariencia -> Widgets nos aparecerá la nueva sidebar donde podremos poner todos aquellos widgets que queramos que aparezcan.
2- Añadimos el sidebar a las páginas de WooCommerce
Con el siguiente código en functions.php
//* Eliminamos el sidebar de Genesis y añadimos el de la tienda
add_action( 'genesis_before', 'dpw_add_woo_sidebar', 20 );
function dpw_add_woo_sidebar() {
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
if( is_woocommerce() ) {
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );
remove_action( 'genesis_sidebar_alt', 'genesis_do_sidebar_alt' );
add_action( 'genesis_sidebar', 'dpw_woo_sidebar' );
}
}
}
3 – Mostrar Sidebar en las páginas de WooCommerce
//* Mostrar el sidebar de WooCommerce
function dpw_woo_sidebar() {
if ( ! dynamic_sidebar( 'woo_primary_sidebar' ) && current_user_can( 'edit_theme_options' ) ) {
genesis_default_widget_area_content( __( 'WooCommerce Primary Sidebar', 'genesis' ) );
}
}
Con estos 3 simples pasos tendremos lista la barra de sidebar de WooCommerce para poder personalizar al máximo la experiencia del usuario en nuestra tienda online.
El código original de esta entrada es de wpstudio.io
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA
Comentarios
8 respuestas a «Crear un sidebar personalizado para las páginas de WooCommerce»
|
Hola, yo utilizo Storefront, cómo sería para hacerlo con storefront?
gracias!
|
Hola!
Puedes probar con el plugin WooSidebars de WooThemes, te permite crear sidebars personalizados para cualquier página de la web.
Saludos!
|
Hola, muchas gracias, lo se, es elq ue utilizo pero estoy intentando minimizar al máximo los plugins, con sistemas como el que tu has descrito.
He intentado replicar tu ejemplo adaptandolo pero no lo he conseguido
gracias
|
Hola!
En ese caso, una opción sería registrar una sidebar y añadirla manualmente a las plantillas de WooCommerce. Aquí tienes un ejemplo: https://www.ostraining.com/blog/wordpress/custom-sidebar/
Saludos!
|
Creo que es exactamente lo que busco, muchas gracias!!!
|
De nada!
|
Hola! Gracias por el artículo, me ha venido estupendamente.
Tengo una duda. En Genesis mi layout es con la columna a la derecha, sin embargo en Woocommerce me interesa tenerla a la izquierda. Con este código me sustituye un sidebar por otro, pero en la misma posición.
Cómo podría modificarlo? Con CSS o añadiendo algo al código.
Muchas gracias.
Carolina
|
Hola Carolina!
Antes de nada tendrías que mirar si tu child theme de Genesis está preparado para el layout con la columna a la izquierda, y en las páginas de WooCommerce indicar que quieres utilizar ese layout.
Saludos!