Move Product Archive Menu above content on mobile

Hey marladesign,

Thank you for the inquiry.

There is no option for this by default but we can add a script to move the sidebar above the content on mobile view. Please try this code in the functions.php file.

function ava_custom_script_mod(){
  ?>
  <script>
        (function($) {
			// move the product category sidebar above the content on mobile view
			function av_move_prodcat_sidebar() {
				var is_mobile = false;
				var is_archive = $("body").is(".tax-product_cat");
				if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
					is_mobile = true;
				}
				
				if( is_archive && is_mobile ) {
					$(".sidebar").prependTo(".template-shop.content");
				}
			}

			$(document).ready(function() {
				av_move_prodcat_sidebar();
			});
		})(jQuery);
  </script>
  <?php
}
add_action('wp_footer', 'ava_custom_script_mod');

Then add this code in the Quick CSS field to make sure that the sidebar container displays on smaller screens.

@media only screen and (max-width: 767px) {
    .responsive .template-blog .blog-meta, .responsive .post_author_timeline, .responsive #top #main .sidebar {
       display: none;
    }
}

Best regards,
Ismael

Hi!

Sorry about that. We forgot to adjust this condition in the script above.

if( is_archive && is_mobile || true  ) {

You have to remove the last condition, or this part.

 || true 

We adjusted the code above in case you’re not sure what to remove.

Regards,
Ismael