---
title: "Zerif Lite: ¿Cómo agregar un área de widgets para WooCommerce?"
url: https://caribdis.net/2017/03/22/zerif-lite-como-agregar-un-area-de-widgets-para-woocommerce/
date: 2017-03-22
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "Hace poco más de un año aprendimos a mostrar una barra lateral en las páginas de WooCommerce dentro del tema gratuito Zerif Lite, de ThemeIsle. Esas instrucciones simplemente sirven para..."
categories:
  - "Zerif Lite"
tags:
  - "español"
  - "gratuito"
  - "tema"
  - "ThemeIsle"
  - "tutorial"
  - "WordPress"
  - "Zerif Lite"
image: https://caribdis.net/wp-content/uploads/2017/04/zerif-lite-wordpress.jpg
word_count: 300
---

# Zerif Lite: ¿Cómo agregar un área de widgets para WooCommerce?

Hace poco más de un año aprendimos a [mostrar una barra lateral en las páginas de WooCommerce](https://caribdis.net/2016/03/13/zerif-lite-anadir-una-barra-lateral-las-paginas-woocommerce/) dentro del tema gratuito **Zerif Lite**, de [**ThemeIsle**](https://caribdis.link/ThemeIsle).

Esas instrucciones simplemente sirven para incluir el área de widgets que ya existe en el tema, y que es común a todas las páginas del blog. Esto es sin dudas una limitación, ya que si usamos tanto la tienda como el blog nos veremos obligados a mostrar los mismos widgets en ambas secciones.

![](https://caribdis.net/wp-content/uploads/2017/03/Zerif-Barra-Lateral.jpg)

![](https://caribdis.net/wp-content/uploads/2017/03/Zerif-Barra-Lateral-WC.jpg)

Para poder mostrar widgets distintos, tendremos que crear un área específica para la tienda y los productos de **WooCommerce**.

#### Paso 1: registrar el área de widgets

Lo más probable es que ya tengamos el tema hijo creado, con el área de widgets agregada en la plantilla de **WooCommerce**. Si así no fuera el caso, tendremos que seguir las instrucciones de [esta entrada](https://caribdis.net/2017/05/07/zerif-lite-agregar-una-seccion-tutorial-actualizado-para-la-version-de-wp-org/) (solo el ***Paso 1***) para crear el tema hijo.

Una vez creado, en el archivo `functions.php`, antes del cierre de la etiqueta `?>` (si lo hubiera) pegamos lo siguiente:
function zerif_woocommerce_sidebar_widgets() {
    register_sidebar( array(
        'name' => __( 'Barra lateral de Tienda', 'zerif-lite' ),
        'id' => 'area-tienda',
        'description' => __( 'Widgets para las páginas de WooCommerce', 'zerif-lite' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'zerif_woocommerce_sidebar_widgets' );
Con esto veremos que se ha añadido un nuevo panel en nuestra página de *Widgets.*

![](https://caribdis.net/wp-content/uploads/2017/03/Zerif-Barra-Lateral-WC.png)

#### Paso 2: incluir el área de widgets en la plantilla de WooCommerce

El código anterior por sí solo no nos va a servir de mucho si no lo “llamamos” desde la correspondiente plantilla. Así es que abriremos el archivo `woocommerce.php` (previamente editado según las instrucciones de [esta entrada](https://caribdis.net/2016/03/13/zerif-lite-anadir-una-barra-lateral-las-paginas-woocommerce/)) y reemplazaremos la línea:
<?php zerif_sidebar_trigger(); ?>
Por:
<div>
    <div role="complementary">
    <?php
    if ( is_active_sidebar( 'area-tienda' ) ) :
    dynamic_sidebar( 'area-tienda' );
    endif;
?>
    </div>
</div>
Vamos a agregar algunos widgets:

![](https://caribdis.net/wp-content/uploads/2017/03/Zerif-Barra-Lateral-WC2.png)

El resultado:

![](https://caribdis.net/wp-content/uploads/2017/03/zerif-woo-sidebar.jpg)

Y nuestras páginas del blog conservarán la barra lateral predeterminada. :)