Astra主题移动端侧边栏（筛选器）置顶问题求助

• 使用Astra主题，店铺页面侧边栏添加了筛选器，但移动端视图下筛选器显示在页面底部，希望移至内容上方。
• 已尝试以下CSS代码，未解决问题，求解决指引或替代方案（如插件）。
• 店铺页面：https://dress-den.com/shop-2/

尝试过的代码 #

@media (max-width: 768px){
  .ast-left-sidebar #content>.ast-container{
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -moz-box-orient: horizontal;
      -moz-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
  }
}

解决指引 #

一、CSS调整方案 #

原代码未生效大概率是选择器权重不足或布局逻辑不对，替换为以下代码试试：

@media (max-width: 768px) {
  /* 强制设置容器为flex布局并垂直排列 */
  .ast-left-sidebar .ast-container {
    display: flex !important;
    flex-direction: column !important;
  }
  /* 将侧边栏筛选器容器移至内容上方 */
  .ast-left-sidebar #secondary {
    order: -1 !important;
    margin-bottom: 20px;
  }
}

说明：利用flex布局的order属性调整侧边栏顺序，!important用来覆盖主题默认样式，确保优先级足够。

二、插件替代方案 #

如果CSS调整仍无效，可尝试专门的WooCommerce筛选插件，这类插件自带移动端适配：

• WooCommerce Product Filters：官方出品，支持自定义筛选器位置，移动端可设置为顶部展开式筛选
• YITH WooCommerce Ajax Product Filter：热门第三方插件，提供多种移动端布局选项，可直接将筛选器固定在内容上方

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