Стильный слайдер товаров Woocommerce

WooCommerce

С помощью плагина – Woocommerce Products Slider, вы сможете добавить в свой онлайн магазин woocommerce, стильный слайдер товаров. В настройках плагина можно указать количество товаров в слайдере, количество колонок, показ навигации, скорость скольжения слайдов. У вас будет на выбор четыре стиля слайдера, можно выбрать или задать фон для слайдера. Можно включить или выключить отображение изображения, заголовка, отрывка, категории, цены, рейтинга и т.д.

 

скриншот слайдер

 

Установить плагин вы сможете прямо из админ-панели wordpress. Перейдите на страницу: ПлагиныДобавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

 

плагин woocommerce

 

После установки и активации плагина, перейдите на страницу: WCPSNew WCPS, чтобы создать новый слайдер. На странице настроек слайдера, вверху, укажите любое название для слайдера. На вкладке Shortcode у вас будет отображаться шорткод и php код для вставки слайдера на сайт.

 

скриншот настройки

 

Options

Slider Total Items, количество товаров в слайдере.

Slider Column Number, количество колонок в слайдере, для отображения на компьютере, планшете и мобильном.

Slider Auto Play, авто-прокрутка слайдера, по умолчанию включена.

Slider Stop on Hover, остановка при наведении курсора мыши, по умолчанию включена.

Slider Navigation, навигация в слайдере, по умолчанию включена, отображается вверху справа.

Slider Pagination, пагинация в слайдере, по умолчанию включена, можно задать цвет и фон пагинации.

Slide Speed, скорость слайдера.

Pagination Slide Speed, скорость пагинации слайдера.

Slider Touch Drag Enabled, сенсорный слайдер с поддержкой перетаскивания, включён.

Slider Mouse Drag Enabled, перетаскивание с помощью мыши, включено.

 

настройки слайдер

 

Style

Themes for slider, выберите стиль слайдера. На скриншоте в начале записи показан стиль по умолчанию.

Slider Ribbon, слайдер лента, оставьте по умолчанию.

Container options, опции контейнера слайдера. Можно указать размер обивки слайдера, выбрать цвет фона или изображение фона слайдера.

Items Options, параметры элементов.

 

настройки скриншот

 

Content

Empty Thumbnail, здесь указано изображение по умолчанию для товаров без изображений.

Query order, сортировка товаров, по умолчанию указано – по убыванию.

Query orderBy, по какому признаку сортируются товары.

Hide out of stock items, оставьте по умолчанию.

Filter Slider Content, фильтр слайдер контента. По умолчанию в слайдере отображаются последние опубликованные товары.

Items sort, можно скрыть или настроить элементы товара в слайдере.

После настройки слайдера, нажмите на кнопку – Опубликовать.

 

настройки скриншот

 

На вкладке Custom CSS расположены стили слайдера. Далее, перейдите на вкладку Shortcode и скопируйте шорткод слайдера для вставки на страницу или в запись. Вы так же можете воспользоваться php кодом для вставки слайдера в файлы header.php или footer.php.

 

шорткод слайдера

 

Откройте страницу редактирования записи или страницы, куда вы хотите добавить слайдер. Вставьте на страницу шорткод слайдера и обновите страницу.

 

страница редактирования

 

После публикации или обновления страницы слайдер появится на вашем сайте. Остались вопросы ? Напиши комментарий !

 

info-effect.ru
Добавить комментарий для Андрей Отменить ответ

Имя и Email указывать не обязательно. Чтобы получить ответ на свою электронную почту, укажите свой Email.

  1. Александра

    Здравствуйте, а подскажите слайдер где я могу выбрать определенную категорию.

    Ответить
    1. Admin автор

      Попробуй тогда здесь поискать – Рубрика Слайдер. Обычные слайдеры для woocommerce тоже подходят.

      Ответить
  2. Алексей

    Здравствуйте! Скажите,а как добавлять определенный товар в слайд. Выбрать товар для слайда

    Ответить
    1. Admin автор

      Здравствуйте, посмотрите параметр “Filter Slider Content” на вкладке “Content”. Есть другие слайдеры для Woocommerce.

      Ответить
  3. Анна

    Добрый день! Отсутствуют кнопки прокрутки, а в настройках галочки проставлены правильно. Как поправить?

    Ответить
    1. Admin автор

      Здравствуйте. Если параметр Slider Navigation включен, стрелки должны отображаться, вверху справа. Посмотрите ещё раз внимательно, может не заметили.

      Навигация может не отображаться, если у вас к примеру всего 3 товара и на странице тоже 3 отображается, прокрутка в таком случае не нужна.

      Ответить
  4. Андрей

    Добрый день.
    А как настроить слайдер для товаров с определённой меткой из разных категорий ?
    Я не нашел такой опции в этом слайдере.
    Или такая вообще не предусмотрена ?

    Ответить
    1. Admin автор

      Здравствуйте. Такие функции есть в плагине AS woocommerce with owl carousel. Ещё посмотрите плагин Carousel Slider, там тоже есть выбор категорий и меток.

      Ответить
  5. Андрей

    Спасибо!
    Carousel Slider у меня не заработал. А AS меня смущает тем, что не обновлялся 2 года. С текущей версией я его проверю, но , как он поведет себя в будущем у заказчика при регулярных обновлениях WP, я поручиться не смогу.

    Ответить
    1. Admin автор

      Посмотрите ещё плагин Woo Product Slider and Carousel with category, я его не разбирал, но, там тоже есть функция “Сортировать по категориям”.

      Ответить
  6. Эдуард

    Здравсвуйте, подскажите а как сделать в этом слайдере чтобы после прокрутки всех товаров, он шел на новый круг. А то он просто останавливается в конце и все

    Ответить