Woocommerce Categories List View on Desktop, Full Width Grid View for Mobile

I need a Woocommerce/Wordpress expert to assist with setting the category pages in Woocommerce to display in list view when viewed on desktop and grid view when loaded on mobile. Below is the code that sets whether the products will be shown in list view or grid view. I need to know where to place this code so that it overrides all other settings and sets the view type right before the page renders. const mq = [login to view URL]( "(min-width: 768px)" ); if ([login to view URL]) { jQuery(document).ready(function(){ jQuery('[login to view URL]').addClass('list'); }); } else { jQuery(document).ready(function(){ jQuery('[login to view URL]').addClass('grid'); }); } Plugins I'm using: WooCommerce Grid / List toggle WooCommerce AJAX Products Filter YITH Infinite Scrolling Currently, category pages load in list view on both mobile and desktop. On mobile, the grid view is displayed first but only for less than a second before switching to list view. However, when a category is filtered by price using WooCommerce AJAX Products Filter plugin on mobile, the view switches to grid and stays as it should. The view must also stay the same when the next products are loaded using YITH Infinite Scrolling. I will share the site with you once I hear your proposal. Thanks, Alex