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.

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

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.

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

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

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)