Перейти к содержимому
BIS Arts
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
Whatsapp Telegram-plane
+7(900)247-59-69
Главная / Уроки / Woocommerce / Как переместить Woocommerce сайдбар вверх в мобильной версии

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

  • 27 января, 2021
  • 2 комментов
Содержание

Когда вы включаете сайдбар 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 код можно несколькими способами:

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

2 ответа

  1. Укшс:
    12.05.2021 в 22:59

    Спасибо большое!!!!

    Ответить
  2. Елена:
    11.11.2022 в 16:11

    Большое спасибо, все получилось

    Ответить

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Категории
Сайтостроение
Сайтостроение
WordPress
WordPress
WooCommerce
Elementor
elementor
Дизайн
Монетизация
Монетизация
реклама
BIS Arts

Услуги по созданию и обслуживанию сайтов

  • Услуги
  • Портфолио
  • Отзывы
+7 (900) 247-59-69
пн-пт с 10:00 до 19:00
Whatsapp Telegram Envelope
Copyright © 2013 — 2025 BIS Arts
Политика конфиденциальности
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • +7 (900) 247-59-69
  • Написать в Whatsapp
  • Написать в Telegram
Свяжитесь с нами
  • Позвонить
  • Написать в WhatsApp
  • Написать в Telegram
  • Написать письмо
Позвонить
Написать в WhatsApp
Написать в Telegram
Написать письмо