Support » Plugin: WooCommerce Grid / List toggle » List on Desktop, Grid on Mobile

  • Hi,

    I would like to set it so that products display in list view on desktop and grid view on mobile. Where would I put the code below so that the grid/list layout is set based on the screen size just before the page loads?

    <script>
    
    const mq = window.matchMedia( "(min-width: 768px)" );
    
    if (mq.matches) {
    jQuery(document).ready(function(){
        jQuery('ul.products').addClass('list');
    });
    } else {
    jQuery(document).ready(function(){
        jQuery('ul.products').addClass('grid');
    });
    }
    
    </script>

    I’ve tried the following:
    https://wordpress.stackexchange.com/questions/71885/woocommerce-grid-list-view
    And adding it to the file: jquery.gridlistview.min.js

    But the format snaps back to the setting in the Customizer just before the category page finishes loading.

    Is there somewhere in woocommerce-grid-list-toggle.php that would work?

    I’ve added this code to the After Update section on the Javascript tab of the AJAX Products Filter plugin and it works – after a filter is modified, the format changes appropriately when a filter is updated.

    Thanks,

    Alex

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘List on Desktop, Grid on Mobile’ is closed to new replies.