---
title: "Zerif Lite: ¿Cómo añadir una barra lateral en las páginas de WooCommerce?"
url: https://caribdis.net/2016/03/13/zerif-lite-anadir-una-barra-lateral-las-paginas-woocommerce/
date: 2016-03-13
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Retomando la serie de tutoriales dedicados al tema gratuito Zerif Lite, de ThemeIsle, en esta decimotercera entrega vamos a aprender a añadir una barra lateral en las páginas de WooCommerce...."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "traducción"
  - "tutorial"
  - "WooCommerce"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 160
---

# Zerif Lite: ¿Cómo añadir una barra lateral en las páginas de WooCommerce?

Retomando la serie de tutoriales dedicados al tema gratuito **Zerif Lite**, de **[ThemeIsle](https://caribdis.link/ThemeIsle)**, en esta decimotercera entrega vamos a aprender a añadir una barra lateral en las páginas de **WooCommerce**.

La presentación predeterminada de las páginas de tienda y productos en **Zerif Lite** tiene un ancho completo.

[![Zerif Lite - Página de Tienda WooCommerce](//caribdis.net/wp-content/uploads/2016/03/zerif-woocommerce-950x1024.jpg)](https://caribdis.net/wp-content/uploads/2016/03/zerif-woocommerce.jpg)

Es muy probable que necesitemos mostrar una barra lateral para mejorar la experiencia del usuario. Para esto, tendremos que modificar el archivo `woocommerce.php`.

Como siempre recordamos, debemos usar un tema hijo para hacer esta clase de ediciones. Las instrucciones para crear un tema hijo se encuentran [en esta entrada anterior](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/).

Copie el archivo `woocommerce.php` del tema padre a la carpeta raíz del tema hijo y reemplace todo el contenido con el siguiente código:
<?php
/**
 * The template for displaying all WooCommerce pages.
 */
get_header(); ?>
<div class="clear"></div>
</header> <!-- / END HOME SECTION  -->
<?php zerif_after_header_trigger(); ?>
<div id="content" class="site-content">
    <div class="container">
        <div class="content-left-wrap col-md-9">
            <div id="primary" class="content-area">
                <main id="main" class="site-main">
                    <?php woocommerce_content(); ?>
                </main><!-- #main -->
        </div><!-- #primary -->
</div><!-- .content-left-wrap -->
    <?php zerif_sidebar_trigger(); ?>
</div><!-- .container -->

<?php get_footer(); ?>
Tendremos ahora una barra lateral en la tienda, en donde podremos añadir cualquier widget.

[![Zerif Lite - WooCommerce con barra lateral](//caribdis.net/wp-content/uploads/2016/03/zerif-woocommerce-sidebar-1024x1014.png)](https://caribdis.net/wp-content/uploads/2016/03/zerif-woocommerce-sidebar.png)

**Tutorial original en inglés: [http://docs.themeisle.com/article/56-how-to-add-sidebar-on-woocommerce-pages](http://docs.themeisle.com/article/56-how-to-add-sidebar-on-woocommerce-pages)**