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

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

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

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

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

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

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

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

4. 4 Жмем на клавишу «Обновить» вверху на панели опций.

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

1. 1 Для начала нам необходимо обусловиться начиная с какой ширины экрана мы желаем поменять количество продуктов в строке. Для этого нам необходимо будет протестировать мобильную версию интернет-магазина в браузере. Как это создать показано в видео и в статье «Как проверить сайт на адаптивность?».
2. 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. 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 с наиболее сложным функционалом, то приглашаю вас к для себя на обучение (педагогический процесс, в результате которого учащиеся под руководством учителя овладевают знаниями, умениями и навыками). Все подробности можно выяснить по данной нам ссылке:

   обучение

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

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

Вам понравится:

Как сделать вирусное видео

Как настроить браузер гугл хром для удобной работы в интернете

Увеличиваем прибыль при помощи сквозной аналитики

Как составить отзывы для сайта: грамотно улучшаем мнение о себе