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

Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: ifnofollow in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/no-external-links/no-external-links-parser.php on line 121
Notice: Undefined variable: post in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 359
Notice: Trying to get property 'ID' of non-object in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 359
Notice: Undefined variable: arkrp in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 435
Notice: Undefined variable: arkdivtbl in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Notice: Undefined variable: arkopis in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Notice: Undefined variable: arkdivtbl in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Notice: Undefined variable: arkopis in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Notice: Undefined variable: arkdivtbl in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Notice: Undefined variable: arkopis in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Notice: Undefined variable: arkdivtbl in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Notice: Undefined variable: arkopis in /var/www/u1581629/data/www/vsodlyavastut.ru/wp-content/plugins/ark-relatedpost/ark-relatedpost.php on line 463
Здрасти, дорогие друзья!
Давайте разберёмся как поменять количество продуктов в строке для 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 с наиболее сложным функционалом, то приглашаю вас к для себя на обучение (педагогический процесс, в результате которого учащиеся под руководством учителя овладевают знаниями, умениями и навыками). Все подробности можно выяснить по данной нам ссылке:Фурроров для вас в разработке интернет-магазинов!
С почтением Юлия Гусарь