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 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.

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/.

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"

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 class="latest-news" id="latestnews">';
            zerif_top_latest_news_trigger();
            echo '<div class="container">';
            /* SECTION HEADER */
                echo '<div class="section-header">';
                    /* 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"

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

Zerif Lite – Últimos productos con CSS aplicado

 

Tutorial original en inglés: How to Show WooCommerce Products on Home Page in Zerif

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web

Últimas entradas por Caribdis Diseño Web (ver todas)