Hello,
I see lots of questions about this but no solution worked for me.
I need to move the sidebar above the main content on the product category pages.
Thanks for your help.
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
Thanks It works on mobile but it also moves it on desktop.
See link in private section to the staging site.