Crear un sidebar personalizado para las páginas de WooCommerce

[…]


por

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»

  1. Avatar de Vintitrenta

    |

    Hola, yo utilizo Storefront, cómo sería para hacerlo con storefront?

    gracias!

    1. Avatar de esther

      |

      Hola!
      Puedes probar con el plugin WooSidebars de WooThemes, te permite crear sidebars personalizados para cualquier página de la web.

      Saludos!

      1. Avatar de Vintitrenta

        |

        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

        1. Avatar de esther

          |

          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!

          1. Avatar de Vintitrenta

            |

            Creo que es exactamente lo que busco, muchas gracias!!!

          2. Avatar de esther

            |

            De nada!

  2. Avatar de Carolina

    |

    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

    1. Avatar de esther

      |

      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!