求助：如何将Woocommerce商店移动端产品分类组件置顶？

Got it, let's get that product category widget area to the top of your store page on mobile devices. Here's a straightforward solution using CSS media queries:

Step 1: Add Targeted CSS #

First, add this code to your theme's custom CSS section (usually found under Appearance > Customize > Additional CSS) or your child theme's style.css file:

/* Adjust product category sidebar position for mobile screens */
@media (max-width: 767px) {
  /* Target the parent container of your store page content and sidebar 
     Replace .store-container with your actual parent container class if needed */
  .store-container {
    display: flex;
    flex-direction: column;
  }

  /* Move the sidebar (product category widget area) to the top */
  .sidebar.widget_area {
    order: -1;
    /* Uncomment below if you need to override existing theme styles */
    /* order: -1 !important; */
  }

  /* Keep your existing margin fix for the sidebar inner */
  .sidebar.widget_area .sidebar_inner.widget_area_inner {
    margin-right: 0;
  }
}

Step 2: Tweak for Your Theme's Layout #

• Verify the parent container: If .store-container doesn't match your theme's actual wrapper for the store page, right-click the page and use "Inspect" to find the correct class name for the element holding both main content and sidebar. Swap .store-container with that class.
• Grid layout alternative: If your theme uses CSS Grid instead of flexbox, use this code instead:

  @media (max-width: 767px) {
    .store-container {
      display: grid;
      grid-template-columns: 1fr;
    }
  
    .sidebar.widget_area {
      grid-row: 1;
    }
  
    .sidebar.widget_area .sidebar_inner.widget_area_inner {
      margin-right: 0;
    }
  }
  

• Adjust the screen breakpoint: The max-width: 767px targets screens smaller than 768px. If your theme uses a different mobile breakpoint (like 991px), update this value to match.

How This Works #

The media query ensures these styles only apply to small screens. We're either:

• Using flexbox's order property to shift the sidebar above the main content, or
• Using Grid's grid-row to place the sidebar in the first row of the grid layout.

This will make your product category widget area appear at the very top of the store page on mobile, while retaining your existing margin fix to avoid unwanted spacing.

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