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.

<div id="primary" class="content-area">

<main id="main" class="site-main" role="main">

<header class="woocommerce-products-header">

<h1 class="woocommerce-products-header__title page-title">

<div class="movil">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">

<div class="titulo_boton">

Categorías productos

<button id="show"> Mostrar  /   <button id="hide"> Ocultar

<header class="woocommerce-products-header">

<h1 class="woocommerce-products-header__title page-title">

<script type="text/javascript">

jQuery(document).ready(function(){

jQuery("#hide").click(function(){

jQuery("#secondary").hide();

});

jQuery("#show").click(function(){

jQuery("#secondary").show();

});

});