Colocar en divi u otra plantilla la barra lateral de woocommerce arriba en el movil
Hoy hemos tenido que realizar un pequeño código para una empresa. Su necesidad era poner en plugin de filtros, en el escritorio deberia de aparecer a la izquierda y en el movil arriba pero con la opción de ocultar o mostrar al tener muchas categorías y molestar la navegación.
Aquí os contaré como.
¿Cómo poner en wordpress el sidebar a la izquierda o arriba en el movil?
Antes que la opción de woocomerce pondré como se hace para wordpress ya que por ejemplo la página principal es diferente a las de la plantilla woocommerce y siempre está bien tener un filtro ahi si es que tenemos una tienda online.
Si queremos poner en la izquierda o arriba la barra lateral según sea escritorio o móvil, debemos de ir a wp-content/themes/nuestro-theme/page.php
Ahí veremos que el sidebar aparece al final del código, siendo lo último que se renderiza , lo único que tenemos que hacer es poner arriba el sidebar. Si vemos que sale mal , simplemente un control z y probamos en otro lugar.
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package storefront
*/
get_header();
do_action( 'storefront_sidebar' ); /*ESto es lo que hemos puesto arriba*/
?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
while ( have_posts() ) :
the_post();
do_action( 'storefront_page_before' );
get_template_part( 'content', 'page' );
/**
* Functions hooked in to storefront_page_after action
*
* @hooked storefront_display_comments - 10
*/
do_action( 'storefront_page_after' );
endwhile; // End of the loop.
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();
Con esto ya tendríamos el sidebar de la plantilla a la izquierda o arriba en el móvil.
¿Cómo poner en un artículo de woocommerce la barra al principio?
El sidebar que estamos probando no es el típico de wordpress, sino que es el de woocomerce, por lo que aunque nos aparezca algo de sidebar, tenemos que poner el doaction de la tienda.
Para empezar vamos a sobreescribir la plantilla.
¿Cómo sobreescribir la plantilla de woocommerce para un producto?
Para que funcione es muy sencillo solo tienes que seguir tres pasos:
- Ir a wp-content/plugins/woocommerce/single-product.php y descargarlo en tu ordenador
- Vamos a wp-content/themes/your-theme y creamos una carpeta llamada woocommerce // your-theme se refiere al nombre de tu plantilla.
- Subimos ahi el archivo single-product.php que descarmos antes.
¿Qué hacemos una vez sobreescrita la plantilla de woocommerce?
Una vez solucionado la sobreescritura modificamos el código añadiendo el doaction('storefront_sidebar') en el lugar que queramos. Observese que en el código de abajo aparece el woocomerce sidebar al final tambien, esto lo podemos quitar o si estamos poniendo nuestros widget ahí pues ese es el que tenemos que cambiar de sitio.
<?php
/**
* The Template for displaying all single products
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @package WooCommerce/Templates
* @version 1.6.4
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
get_header( 'shop' );
do_action('storefront_sidebar' );
?>
</div>
</div>
<?php
/**
* woocommerce_before_main_content hook.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
*/
do_action( 'woocommerce_before_main_content' );
?>
<?php while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php
/**
* woocommerce_after_main_content hook.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
?>
<?php
/**
* woocommerce_sidebar hook.
*
* @hooked woocommerce_get_sidebar - 10
*/
do_action( 'woocommerce_sidebar' );
?>
<?php get_footer( 'shop' );
/* Omit closing PHP tag at the end of PHP files to avoid "headers already sent" issues. */
¿Cómo poner en la categoría de productos woocommerce la barra al principio?
Lo primero que tenemos que hacer es lo mismo que hicimos con el producto individual, pero esta vez el archivo que sobreescribiremos será archive-product.php que es donde se encuentra las categorías. Si quires que en vez de todas las categorías sea una única podrias buscar en google taxonomia_categoría y sería ese el archivo que aparece en la plantilla inicial de woocommerce.
Una vez que lo tenemos hacemos exactamente lo mismo y es modificar el código para poner donde queramos el doaction('storefront_sidebar')
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @package WooCommerce/Templates
* @version 3.4.0
*/
defined( 'ABSPATH' ) || exit;
/**
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar - 10
*/
get_header( 'shop' );
do_action( 'storefront_sidebar' );
/**
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
* @hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );
?>
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>
<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<?php
if ( woocommerce_product_loop() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* @hooked woocommerce_output_all_notices - 10
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_prop( 'total' ) ) {
while ( have_posts() ) {
the_post();
/**
* Hook: woocommerce_shop_loop.
*/
do_action( 'woocommerce_shop_loop' );
wc_get_template_part( 'content', 'product' );
}
}
woocommerce_product_loop_end();
/**
* Hook: woocommerce_after_shop_loop.
*
* @hooked woocommerce_pagination - 10
*/
do_action( 'woocommerce_after_shop_loop' );
} else {
/**
* Hook: woocommerce_no_products_found.
*
* @hooked wc_no_products_found - 10
*/
do_action( 'woocommerce_no_products_found' );
}
/**
* Hook: woocommerce_after_main_content.
*
* @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
*/
do_action( 'woocommerce_after_main_content' );
get_footer( 'shop' );
Pues bien, con esto ya tendriamos en la parte superior del móvil la barra lateral y en la parte izquierda del escritorio. En mi caso tenía un problema y es que el cliente lo que tenía era un filtro de categorias de productos woocommerce el cual tenía muchímas categorías anidadas de forma jerárquica, por lo que decidimos poner únicamente en la versión móvil la opción de mostrar u ocultar el filtro o lo que es lo mismo el sidebar. Además teníamos que tener en cuenta que cuando iniciase una categoría apareciese desplegado por defecto y también que al hacer estos cambios a veces se desencuadraban los productos de la tienda online.
El siguiente código pertenece a lo que hicimos , es muy sencillito de ver ya que los cambios son mínimos en cuanto a html, javascript y css que aparecen en los casos anteriores. Decidí poner el css en cada plantilla sobreescrita ademas del javascript y no en todo el sitio por unos motivos que no vienen al caso.
El filtro que tiene la web para que os hagáis una idea es este:
Realmente seria mucho más grande por lo que en el móvil, tener este filtro tan grande siempre desplegado al inicio de la página es una cosa inviable, por lo que pusimos un botón mostrar y ocultar que mediante javascript cogiese y pusiera un display:none para ocultar y un display:block para mostrar.
Quedaria visualmente algo asi, aunque el css es mejorable la funcionalidad es esquisita :)
Para que esto funcione tenemos que añadir :
- Los pasos de sobreescritura que dijimos al princpio para que podamos modificar el template y no se nos estropee cuando actualicemos. Recuerda que es lo que hacía que apareciese el sidebar de woocomerce a la izquierda en el escritorio o arriba en el móvil.
- Añadir una libreria Jquery si es que no la teníamos hasta ahora.
- Añadir los botones de mostrar y ocultar con su id para poder controlarlo luego a través del Jquery
- Darle formato con el CSS
Tampoco me voy a poner pesado explicando, asi que os pongo directamente el código de archiv-product.php , recuerda que este seria para las categorías de woocommerce si quieres que también te aparezca como ya vimos en un producto en particular, recuerda que tienes que poner los mismos cambios (solo los jquery, css, y html), no me vayas ir copiando y pegando el código de categoría y en en articulo que la liamos jajaja.
<?php
/**
* The Template for displaying product archives, including the main shop page which is a post type archive
*
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @package WooCommerce/Templates
* @version 3.4.0
*/
defined( 'ABSPATH' ) || exit;
/**
* Hook: woocommerce_sidebar.
*
* @hooked woocommerce_get_sidebar - 10
*/
get_header( 'shop' );
?>
<div class="movil">
<div class="titulo_boton">
Categorías productos
<button id="show"> Mostrar</button> / <button id="hide"> Ocultar</button>
</div>
<?php
do_action( 'storefront_sidebar' );
?>
</div>
<?php
/**
* Hook: woocommerce_before_main_content.
*
* @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb - 20
* @hooked WC_Structured_Data::generate_website_data() - 30
*/
do_action( 'woocommerce_before_main_content' );
?>
<header class="woocommerce-products-header">
<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="woocommerce-products-header__title page-title"><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>
<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description - 10
* @hooked woocommerce_product_archive_description - 10
*/
do_action( 'woocommerce_archive_description' );
?>
</header>
<?php
if ( woocommerce_product_loop() ) {
/**
* Hook: woocommerce_before_shop_loop.
*
* @hooked woocommerce_output_all_notices - 10
* @hooked woocommerce_result_count - 20
* @hooked woocommerce_catalog_ordering - 30
*/
do_action( 'woocommerce_before_shop_loop' );
woocommerce_product_loop_start();
if ( wc_get_loop_p
