How to display the product category menu widget at the top on mobiles

Hey Annemarie,

Thank you for the inquiry.

Did you try the css code from the previous threads? You may need to adjust the “.shop_columns_3” selector if you are not using a 3 column layout or if there are more or less columns in your shop page.

@media only screen and (max-width: 767px) { 
  #main > .container_wrap_first.template-shop.shop_columns_3 > .container {
  display: flex !important; 
  flex-wrap: wrap !important; 
  }
  #main > .container_wrap_first.template-shop.shop_columns_3 > .container > main {
      order: 3 !important; 
  }
  #main > .container_wrap_first.template-shop.shop_columns_3 > .container > aside {
      order: 2 !important; 
  }
  #main > .container_wrap_first.template-shop.shop_columns_3 > .container > header {
      order: 1 !important; 
  }
  }

Best regards,
Ismael

Hi,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
	var width = $(window).width();
	if (width <= 767) {
$( '#top.woocommerce-page.archive' ).each(function() {
$( this ).find( '#woocommerce_product_categories-3' ).insertBefore( $(this).find('.template-shop.content') );
});
}
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_script');

Then clear your browser cache and check.

Best regards,
Mike