Делайте бизнес как умные люди! Действуйте как профи! Зарабатывайте через систему будущего!      Узнать подробности
  




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

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


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



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

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

    обучение

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

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





  


Top Яндекс.Метрика