Меняем количество товаров в строке Woocommerce

Меняем количество товаров в строке Wocommerce

Здравствуйте, дорогие друзья!

Давайте разберёмся как изменить количество товаров в строке для WooCommerce в версии для компьютера и для мобильного телефона. По умолчанию в WooCommerce сетка товаров выводится не всегда так как нам нужно, а в мобильной версии так совсем все плохо, поэтому давайте рассмотрим как это исправить.

Способы изменения количества товаров в строке

Для изменения количества товаров в строке можно воспользоваться одним из следующих вариантов:

  1. 1Проверить настройки темы в разделе «Внешний вид» — «Настроить» — вкладка «WooCommerce» или вкладки настроек страниц магазина. В зависимости от темы названия вкладок, а так же наличие и расположение настроек может отличаться. Здесь вам нужно искать настройку связанную с количеством столбцов в строке WooCommerce.
  2. 2 Если у вас платная тема, то она может иметь дополнительную страницу настроек, которая обычно находится в разделе «Внешний вид» или может быть выведена в основное меню WordPress слева. Если такая страница есть, перейдите на нее и поищите возможность задавать количество столбцов в строке с товарами.
  3. 3 Установить специальный плагин, например, WooCommerce Customizer. У этого плагина есть много возможностей, в том числе и влиять на количество столбцов в строке с товарами для десктопной версии сайта. Но именно эта настройка, к большому сожалению, срабатывает не всегда.
  4. 4Изменить ширину столбцов вручную при помощи CSS. Этот способ мне нравится больше всего, так как с его помощью мы можем менять количество товаров в строке не только для компьютера, но и для любых устройств и при этом не зависеть от настроек темы или установленных плагинов.

Все эти способы я показала и более подробно объяснила в видео инструкции. Все фрагменты CSS кода, которые вам могут понадобится размещены под видео. Приятного просмотра!

Видео инструкция

Изменение количества товаров в строке WooCommerce при помощи CSS

  1. 1 Переходим в раздел «Внешний вид» — «Настроить» — вкладка «Дополнительные стили».
  2. 2 Для темы Orchid Store можно вставить такой CSS-код:
  3. 3 Для других тем вы можете самостоятельно проинспектировать код и определить селектор или использовать такой вариант:
  4. 4 Нажимаем на кнопку «Обновить» вверху на панели настроек.

Изменение количества товаров в строке WooCommerce в мобильной версии

  1. 1 Для начала нам нужно определиться начиная с какой ширины экрана мы хотим изменить количество товаров в строке. Для этого нам нужно будет протестировать мобильную версию интернет-магазина в браузере. Как это сделать показано в видео и в статье «Как проверить сайт на адаптивность?».
  2. 2После того как мы определились с шириной нам понадобятся медиа запросы. Например, для того чтобы изменить количество столбцов для мобильных устройств с шириной меньше 600 px в разделе «Внешний вид» — «Настроить» — на вкладке «Дополнительные стили» нужно добавить следующий код:

    Данный код позволяет разместить товары по 2 штуки в строке.
  3. 3 Для того чтобы разместить товары по одному в строке на более маленьких экранах (300px и меньше) добавляем следующий медиа запрос:

    Надеюсь, что помогла вам разобраться с тем как изменить количество товаров в строке WooCommerce! Если что-то не понятно – задавайте вопросы в комментариях или под видео на моём YouTube канале.


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

    Успехов вам в создании интернет-магазинов!

    С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

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

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

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif