Move my sidebar(widget) to top in mobiles only

Assuming you’re talking about the search widget, here’s JavaScript that does what you want. You can add this to your functions file or use the Code Snippets plugin.

<?php
add_action('wp_footer', 'wpsf_move_sidebar_search', 100);
function wpsf_move_sidebar_search()
{ ?>
  <script>
    (function($) {

      // Only on mobile:
      if ($(window).width() <= 980) {

        // Move sidebar search to top
        $('.woocommerce.widget_product_search').prependTo('#left-area');

      }

    })(jQuery);
  </script>
<?php
}

And here’s a variation you can swap in that would place it below the popular banner instead.

        // Move sidebar search before title
        $('.woocommerce.widget_product_search').insertBefore('.woocommerce-products-header');

Thank you @rickymccallum87 for the time but I wanted to move the whole sidebar of this page including filters to the top in mobile only

• This reply was modified 3 years, 4 months ago by uxijee.

You’re welcome. Here’s code that moves the entire sidebar.

<?php
add_action('wp_footer', 'wpsf_move_sidebar_search', 100);
function wpsf_move_sidebar_search()
{ ?>
  <script>
    (function($) {

      // Only on mobile:
      if ($(window).width() <= 980) {

        // Move sidebar search to top
        $('#sidebar').prependTo('#content-area');

      }

    })(jQuery);
  </script>
<?php
}

@rickymccallum87 thankyou sooo much. One little question can i turn these filters into like dropdown? So it doesn’t take the whole place

You’re welcome! I originally assumed you only wanted to move the search because it does take up so much space.

Rather than move them as well as create a dropdown, I would recommend adding an anchor link to jump mobile users down to the search and filters.

You could drop this directly into the top of your Shop page.

<a class="mobile-only" href="#sidebar">Jump to search/filter ↓</a>

Then add CSS to the Customizer so that it only shows for mobile visitors.

@media (min-width: 981px) {
  .mobile-only {
    display: none;
  }
}