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

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

Давайте разберёмся как изменить количество товаров в строке для 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-код:
   
   CSS

   .woocommerce-page .columns-3 ul.products li.product{ flex: 0 0 25%; /*меняем ширину столбца в процентах */ max-width: 25%; /*меняем ширину столбца в процентах */ }

   1 2 3 4

   .woocommerce-page .columns-3 ul.products li.product{ flex: 0 0 25%; /*меняем ширину столбца в процентах */ max-width: 25%; /*меняем ширину столбца в процентах */ }

3. 3 Для других тем вы можете самостоятельно проинспектировать код и определить селектор или использовать такой вариант:
   
   CSS

   ul.products li.product { flex: 0 0 25%!important; /*меняем ширину столбца в процентах */ max-width: 25%!important; /*меняем ширину столбца в процентах */ }

   1 2 3 4

   ul.products li.product { flex: 0 0 25%!important; /*меняем ширину столбца в процентах */ max-width: 25%!important; /*меняем ширину столбца в процентах */ }

4. 4 Нажимаем на кнопку «Обновить» вверху на панели настроек.

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

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

   @media only screen and (max-width:600px) { ul.products li.product { flex: 0 0 50%!important; max-width: 50%!important; } }

   1 2 3 4 5 6

   @media only screen and (max-width:600px) { ul.products li.product { flex: 0 0 50%!important; max-width: 50%!important; } }

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

   @media only screen and (max-width:300px) { ul.products li.product { flex: 0 0 100%!important; max-width: 100%!important; } } </li> </ol>

   1 2 3 4 5 6 7 8

   @media only screen and (max-width:300px) { ul.products li.product { flex: 0 0 100%!important; max-width: 100%!important; } } </li> </ol>

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

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

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

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