No se muestra el sidebar en Woocommerce

El otro día un seguidor me trasladó un seguidor del blog un problema que tenía con el sidebar en WooCommerce. La plantilla que está utilizando en su tienda online tiene un problema de diseño y no muestra el sidebar en las páginas de la tienda online. Es decir, en las páginas de productos, categorías y demás no se muestra el sidebar.

Estuve analizando la plantilla en las páginas del blog y en las páginas de la tienda y encontrar las diferencias. Así sabría la causa y después solo tendría que localizar dónde se encuentra el problema.

Problemas encontrados en el sidebar WooCommerce

En la siguiente imagen realicé mi análisis con Firebug:

El problema principal es que la sección site-main no tenía la clase content-part y entonces no tenía un ancho definido para poder dejar hueco al sidebar. Aunque solucionara esto, el sidebar seguiría sin mostrarse, pero era algo que había que solucionar.

La plantilla no pintaba la capa que contiene la clase sidebar-rigth. Este es el motivo principal por el que la plantilla mostrara el sidebar. Es decir, no la llamaba en esa página.

Solución al sidebar en WooCommerce

Para solucionar los problemas anteriores y que el sidebar en WooCommerce se muestre era necesario averiguar en qué fichero se construía la sección site-main y page_wrapper para averiguar dónde realizar las modificaciones oportunas. El fichero en cuestión, en este caso, no estaba dentro del plugin de WooCommerce, sino que estaba en la plantilla. Es decir, dentro de la plantilla había un fichero woocomerce.php que sobreescribía las funciones del plugin.

Este fichero, en su estado original contenía:

<?php get_header(); ?>

<div class="content-area">
    
<div class="container main_content_wrap">
      
<div class="page_wrapper">
  
                
        
<section id="site-main" class="site-main" > 
            <?php woocommerce_content(); ?>
        </section>

        
<div class="clear"></div>

      </div>

<!--end .page_wrapper-->       
    </div>

</div>

    
     
<?php get_footer(); ?>

Y las modificaciones que tuve que hacer para incluir la llamada al sidebar y reservar el espacio suficiente de la sección principal fueron las siguientes:

<?php get_header(); ?>

<div class="content-area">
    
<div class="container main_content_wrap">
      
<div class="page_wrapper">
  
                
        
<section id="site-main" class="site-main content-part" > 
            <?php woocommerce_content(); ?>
        </section>

        <?php get_sidebar(  ); ?>
        
<div class="clear"></div>

      </div>

<!--end .page_wrapper-->       
    </div>

</div>

    
     
<?php get_footer(); ?>

Resultado

El resultado que obtuvimos fue el siguiente:

En general, podemos perder los cambios que hemos hecho en la plantilla si actualizamos esta. Para evitarlo habría que construirse un Child Theme y realizar las modificaciones que he explicado sobre el Child Theme y así evitar que cuando actualicemos el tema por una nueva versión que haya sacado su autor perdamos nuestras modificaciones.

Si te ha parecido interesante te invito a seguir mi blog para recibir nuevos artículos cómodamente por email. También me sería de gran ayuda que lo compartieras en tus redes sociales.

Guardar