Home » Статьи о способах заработка в интернете онлайн » Меняем количество товаров в строке Woocommerce

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

'); })(document, 'script', 'http');

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

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

Навигация по статье:

Способы изменения количества товаров в строке
Видео инструкция
Изменение количества товаров в строке WooCommerce при помощи CSS
Изменение количества товаров в строке WooCommerce в мобильной версии

Методы конфигурации количества продуктов в строке

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

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

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

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

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

1 Перебегаем в раздел «Наружный вид» — «Настроить» — вкладка «Доп стили».

2 Для темы Orchid Store можно вставить таковой CSS-код:

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

3 Для остальных тем вы сможете без помощи других проинспектировать код и найти селектор либо употреблять таковой вариант:
```
ul.products li.product {
	flex: 0 0 25%!important; /*меняем ширину столбца в процентах */
	max-width: 25%!important; /*меняем ширину столбца в процентах */
}
```
4 Жмем на клавишу «Обновить» вверху на панели опций.

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

1 Для начала нам необходимо обусловиться начиная с какой ширины экрана мы желаем поменять количество продуктов в строке. Для этого нам необходимо будет протестировать мобильную версию интернет-магазина в браузере. Как это создать показано в видео и в статье «Как проверить сайт на адаптивность?».
2После того как мы обусловились с шириной нам пригодятся медиа запросы. К примеру, для того чтоб поменять количество столбцов для мобильных устройств с шириной меньше 600 px в разделе «Наружный вид» — «Настроить» — на вкладке «Доп стили» необходимо добавить последующий код:
```
@media only screen and (max-width:600px) {
	ul.products li.product {
		flex: 0 0 50%!important; 
		max-width: 50%!important;
	}
}
```
Данный код дозволяет расположить продукты по 2 штуки в строке.
3 Для того чтоб расположить продукты по одному в строке на наиболее малеханьких экранах (300px и меньше) добавляем последующий медиа запрос:
```
@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 с наиболее сложным функционалом, то приглашаю вас к для себя на обучение (педагогический процесс, в результате которого учащиеся под руководством учителя овладевают знаниями, умениями и навыками). Все подробности можно выяснить по данной нам ссылке:

обучение

Фурроров для вас в разработке интернет-магазинов!

С почтением Юлия Гусарь