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"

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 
global $wp_customize;
echo '<section class="latest-news" id="latestnews">';
echo '<div class="container">';
/* SECTION HEADER */
echo '<div class="section-header">';
$zerif_latestnews_title = get_theme_mod('zerif_latestnews_title');
/* title */
if( !empty($zerif_latestnews_title) ):
echo '<h2 class="dark-text">' . wp_kses_post( $zerif_latestnews_title ) . '</h2>';
else:
echo '<h2 class="dark-text">' . __('Latest news','zerif-lite') . '</h2>';
endif;
/* subtitle */
$zerif_latestnews_subtitle = get_theme_mod('zerif_latestnews_subtitle');
if( !empty($zerif_latestnews_subtitle) ):
echo '<div class="dark-text section-legend">'.wp_kses_post( $zerif_latestnews_subtitle ).'</div>';
elseif ( isset( $wp_customize ) ):
echo '<div class="dark-text section-legend zerif_hidden_if_not_customizer"></div>';
endif;
echo '</div><!-- END .section-header -->';
echo '<div class="clear"></div>';
echo do_shortcode('[recent_products per_page="4" columns="4"]');
echo '</div><!-- .container -->';
echo '</section>';
?>

Como notarán, el do_shortcode y el código abreviado estarán agregados directamente en el archivo latest_news.php.

Un último consejo: para evitar esa separación exagerada entre título, precio y botón (y destacar un poco más el título), añadiremos el siguiente código al archivo custom.css:

.price {
    line-height: 0px;
    height: 0px;
}

.woocommerce ul.products li.product h3 {
    font-size: 1.5em;
}

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)