Как переместить Woocommerce сайдбар вверх в мобильной версии

Когда вы включаете сайдбар WooCommerce на странице магазина, корзины, оформления заказа и/или одной страницы продукта, боковая панель отображается во вторичном контейнере. Это значит, что в мобильной версии, все ваши фильтры и меню категорий будут отображаться в самом низу сайта, что не удобно для посетителей.

Мы покажем, как исправить данную проблему на примере популярной темы Astra.

сайдбар вверх в мобильной версии woocommerce

Что такое вторичный контейнер?

По сути, контейнер - это место, где появляется основное содержимое и информация. В общем, если убрать шапку и подвал сайта, то останется только контейнер страницы. Область содержимого и боковая панель являются частями контейнера. Область содержимого технически называется первичным контейнером, в то время как боковая панель является вторичным контейнером.

На мобильных устройствах сначала отображается первичный контейнер, а затем вторичный. Таким образом, вторичный контейнер отображается под основным контейнером.

Меняем расположение сайдбара в мобильной версии темы Astra

Если вы хотите отобразить боковую панель WooCommerce над основным контейнером на мобильном устройстве, вам нужно будет использовать пользовательский CSS-код. Необходимый CSS-код указан ниже для обеих боковых панелей.

Когда сайдбар Woocommerce находится слева

@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;
  }
}

Когда сайдбар Woocommerce находится справа

@media (max-width: 768px){
    .ast-right-sidebar #content>.ast-container{
        -js-display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .ast-right-sidebar #content>.ast-container>#primary {
        order: 2;
    }
    .ast-right-sidebar #content>.ast-container>#secondary {
        order: 1;
    }
}

Куда нужно вставлять CSS код?

Вставить CSS код можно несколькими способами:

В Customizer. В админке WordPress перейдите в раздел Внешний вид > Настройка > Дополнительные стили и добавьте код в пользовательскую область CSS.
Установив плагин SiteOrigin CSS или аналогичный. Далее перейдите в раздел Внешний вид > Custom CSS и вставьте код.
Добавить код в style.css. Для этого рекомендуется сначала установить дочернюю тему (child theme) чтобы код не пропал после обновления основной темы.