如何将ShopMe主题的WooCommerce商品目录默认设为列表视图

Hey Darren! Nice work getting that JavaScript snippet working in Chrome DevTools—let's turn that into a permanent fix so your SHOPME WooCommerce catalog loads in list view by default, no manual clicks needed. Here are two reliable ways to implement this:

Method 1: Quick Footer Script Injection #

This is the simplest way to get your code running site-wide on catalog pages:

1. Head to your WordPress dashboard, go to Appearance > Theme File Editor, and open your SHOPME theme's footer.php file (or edit it via FTP if you prefer).
2. Scroll to the very bottom, right above the closing </body> tag, and paste your script wrapped in <script> tags (I added a few safeguards to avoid errors):

   <script>
   document.addEventListener('DOMContentLoaded', function() {
       function setDefaultListView() {
           // Target the products container element from your original snippet
           const productsContainer = document.querySelector(".products-container");
           if (!productsContainer) return; // Exit if element doesn't exist
           
           // Replace grid view class with list view class (update these to match your theme's actual classes!)
           productsContainer.classList.replace('grid-view', 'list-view');
           
           // Optional: Update the toggle button's active state to match
           const listToggle = document.querySelector('.view-toggle.list');
           const gridToggle = document.querySelector('.view-toggle.grid');
           if (listToggle) listToggle.classList.add('active');
           if (gridToggle) gridToggle.classList.remove('active');
       }
   
       // Run on initial page load
       setDefaultListView();
       // Re-run if WooCommerce refreshes products (e.g., after filtering/sorting)
       document.addEventListener('wc_update_after_refresh', setDefaultListView);
   });
   </script>
   

   Important: Double-check the class names (grid-view, list-view, view-toggle) against what your theme actually uses—your original snippet referenced classList.replace, so make sure the old/new class names here match your site's markup.
3. Save the file, then visit your catalog page to test it out.

Method 2: Child Theme Implementation (Recommended) #

If you're not using a child theme yet, set one up first—this ensures your changes won't get overwritten when the SHOPME theme updates. Once you have a child theme:

1. Create a new file in your child theme folder named custom-list-view.js, and paste the JavaScript code (without the <script> tags) into it.
2. Open your child theme's functions.php file and add this code to enqueue the script only on WooCommerce catalog pages:

   function shopme_enqueue_list_view_script() {
       // Load only on shop, category, and tag pages
       if (is_shop() || is_product_category() || is_product_tag()) {
           wp_enqueue_script(
               'shopme-custom-list-view',
               get_stylesheet_directory_uri() . '/custom-list-view.js',
               array(), // Leave empty if no dependencies; add 'jquery' if needed
               wp_get_theme()->get('Version'),
               true // Load script in the footer for better performance
           );
       }
   }
   add_action('wp_enqueue_scripts', 'shopme_enqueue_list_view_script');
   

3. Save both files, and your catalog pages will now default to list view automatically.

Key Notes #

• The DOMContentLoaded listener makes sure we don't try to modify elements before the page's HTML is fully loaded.
• The wc_update_after_refresh listener keeps the list view active when WooCommerce refreshes products (like after using filters or sorting options).
• Always back up your theme files before making changes!

内容的提问来源于stack exchange，提问作者Darren Le