---
title: "Zerif Lite: ¿Cómo mostrar los últimos productos de WooCommerce en la página de inicio?"
url: https://caribdis.net/2016/06/05/zerif-lite-mostrar-los-ultimos-productos-woocommerce-la-pagina-inicio/
date: 2016-06-05
modified: 2019-10-11
lang: es
author: "Caribdis.Net"
description: "He aquí un capítulo más, el XVIII, para el repertorio de tutoriales del tema gratuito Zerif Lite, de ThemeIsle. Como ya sabemos, es compatible con el plugin número uno de..."
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: 585
---

# Zerif Lite: ¿Cómo mostrar los últimos productos de WooCommerce en la página de inicio?

He aquí un capítulo más, el XVIII, para el repertorio de tutoriales del tema gratuito **Zerif Lite**, de [**ThemeIsle**](https://caribdis.link/ThemeIsle). Como ya sabemos, es compatible con el plugin número uno de comercio electrónico para WordPress, **WooCommerce**. Y aunque no está centrado principalmente en esta funcionalidad, es posible mediante algunos ajustes hacer una integración más uniforme.

Por ejemplo, queremos mostrar la lista de los últimos productos en lugar de alguna de las secciones de widgets: *Nuestro enfoque*, *Nuestro equipo* o *Testimonios.*

En cualquiera de estos casos, es necesario usar un tema hijo. 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/).

En el presente ejemplo vamos a ver cómo mostrar los productos en la sección *Nuestro equipo*.

En el archivo `functions.php` del tema hijo añadimos el siguiente código (dentro de las etiquetas `<?php ?>`:
add_filter('widget_text', 'do_shortcode');
Ahora vamos a *Apariencia > Widgets*. Borramos los widgets *Nuestro equipo* si estuvieran presentes, y arrastramos un widget de *Texto*. En el recuadro del *Contenido* de este widget de texto añadimos el código abreviado de **WooCommerce** correspondiente. Podrán encontrar la lista de códigos disponibles aquí: [https://docs.woothemes.com/document/woocommerce-shortcodes/](https://docs.woothemes.com/document/woocommerce-shortcodes/).

Para mostrar los productos más recientes, usaremos este código:
[recent_products per_page="4" columns="4"]
y el resultado es:

![Zerif Lite - Últimos productos en lugar de la sección "Nuestro equipo"](https://caribdis.net/wp-content/uploads/2016/06/zerif-ultimos-productos1.jpg)Zerif Lite - Últimos productos en lugar de la sección "Nuestro equipo"

El mismo procedimiento aplica para cualquiera de las otras dos secciones de widgets. Sin embargo, en el caso de que necesitáramos mostrar los productos en lugar de las *Últimas noticias*, tendremos que emplear otro método.

Siempre usando un tema hijo, y sin necesidad de editar el archivo `functions.php` con el código de más arriba, crearemos un archivo con el nombre `latest_news.php` en la carpeta `/sections/`. El contenido de este archivo deberá ser el siguiente:
<?php
        zerif_before_latest_news_trigger();
        echo '<section>';
            zerif_top_latest_news_trigger();
            echo '<div>';
            /* SECTION HEADER */

                echo '<div>';
                    /* Title */

                    zerif_latest_news_header_title_trigger();
                    /* Subtitle */

                    zerif_latest_news_header_subtitle_trigger();
                echo '</div><!-- END .section-header -->';
echo do_shortcode('[recent_products per_page="4" columns="4"]');
            echo '</div><!-- .container -->';
            zerif_bottom_latest_news_trigger();
        echo '</section>';
    zerif_after_latest_news_trigger();
?>
Como notarán, el `do_shortcode` y el código abreviado estarán agregados directamente en el archivo `latest_news.php`.

![Zerif Lite - Últimos productos en lugar de la sección "Últimas noticias"](https://caribdis.net/wp-content/uploads/2016/06/zerif-ultimos-productos.jpg)Zerif Lite - Últimos productos en lugar de la sección "Últimas noticias"

 

Un último consejo: para evitar la separación exagerada entre título, precio y botón (y destacar un poco más el título), corregir la alineación de las estrellas y el tamaño de la placa de oferta, añadiremos el siguiente código al archivo `custom.css`:
/* normaliza el espaciado de los precios */

.home .price {
    line-height: initial;
    height: initial;
}

/* agranda la fuente del título */

.home .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.5em;
}

/* corrige alineación de las estrellas */

.woocommerce ul.products li.product .star-rating {
    font-size: initial;
}

/* corrige el tamaño de la placa de oferta */

.woocommerce ul.products li.product .onsale {
    left: -20px;
    top: -35px;
}
.woocommerce span.onsale {
    width: 70px;
    height: 70px;
    line-height: 63px;
}

/* alineación correcta de columnas en dispositivos móviles */

@media (max-width:991px) {
.woocommerce[class*="columns-"] ul.products li.product {
    width: 48%;
    margin-left: 1%;
    margin-right: 1%;
}
}
@media (max-width:480px) {
.woocommerce[class*="columns-"] ul.products li.product {
    width: 100%;
}
}
![Zerif Lite - Últimos productos CSS](https://caribdis.net/wp-content/uploads/2016/06/zerif-woocommerce-css.jpg)Zerif Lite - Últimos productos con CSS aplicado

 

**Tutorial original en inglés: [How to Show WooCommerce Products on Home Page in Zerif](http://docs.themeisle.com/article/282-how-to-show-woocommerce-products-on-home-page-zerif)**