Woocommerce карусель слайдер товаров сенсорный

 Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для интернет-магазина Woocommerce ! Сегодня вы узнаете как добавить в свой онлайн магазин адаптивный, сенсорный слайдер (карусель) товаров. Вы можете настроить внешний вид слайдера, стиль кнопки и навигации. Вы можете указать размер слайдера для разных устройств, мобильный, планшет, компьютер. В слайдере можно отобразить все товары, либо товары из определённой категории. Поддерживает функции: LazyLoad, Mobile Touch, JQuery. Добавить слайдер на сайт можно с помощью простого шорткода.

 

AS woocommerce with owl carousel

 

Выбор стиля кнопки и навигации.

 

AS woocommerce with owl carousel

 

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

 

woocommerce carousel слайдер плагин

 

Далее, после установки и активации плагина, перейдите на страницу: As Short code. Здесь вы сможете настроить основные параметры плагина:

 

— Carousel Name, укажите имя слайдера или карусели. Должно быть уникальным.

— Select type of Product, выберите какие товары будут отображаться в слайдере. Featured products — рекомендуемые товары., Show Products by category — выберите категорию товаров., Show all products — все товары.

— Items, укажите количество отображаемых товаров.

— ItemsDesktop, ширина слайдера для компьютера (в описании указан размер по умолчанию, если оставите пустым).

— ItemsDesktopSmall, размер для маленького экрана компьютера.

— ItemsTablet, размер для планшетов.

— ItemsTabletSmall, размер для маленьких планшетов.

 ItemsMobile, размер для мобильных устройств.

— singleItem, функция один элемент.

— itemsScaleUp, функция масштабирования. (false — отключить., true — включить.)

— slideSpeed, скорость слайдов.

— paginationSpeed, скорость пагинации.

— rewindSpeed, скорость перемотки.

— autoPlay, автовоспроизведение.

— stopOnHover, остановить при наведении.

— navigation, навигация.

— navigationText, навигация в виде текста, указать текст.

— rewindNav, перемотка.

— scrollPerPage, прокрутка.

— pagination, пагинация, разбить на страницы.

— paginationNumbers, пагинация с цифрами.

— responsive, адаптивный.

— lazyLoad, функция постепенной загрузки.

— lazyFollow, загрузка слайдов при нажатии на кнопку.

— lazyEffect, эффект постепенной загрузки.

— mouseDrag, перетаскивать слайды с помощью мыши.

— touchDrag, сенсорный, перетаскивание с помощью пальцев.

— afterLazyLoad, после постепенной загрузки.

— Add to cart, кнопка «Добавить в корзину».

— Select a button, стиль кнопки.

— Select a icon, кнопки для навигации.

Сохраните изменения.

 

As woocomerce with owl carousel

 

Далее, после того как вы настроите основные параметры, сохраните изменения. Затем нажмите внизу на кнопку — Get Shortcode, чтобы сгенерировать шорткод слайдера. У вас появится готовый шорткод. Можете его скопировать и вставить на страницу, где будет отображаться слайдер.

 

woocommerce слайдер карусель шорткод

 

Далее, перейдите на страницу «As option». Здесь вы сможете настроить дополнительные параметры внешнего вида слайдера.

 

— Upload loader gif, можно загрузить своё GIF изображение для функции Lazy Load при загрузке товара в карусель.

— Add To Cart loader gif, можно загрузить GIF изображение для функции Lazy Load при добавлении товара в корзину.

— Carousel Loader Background Color, цвет фона слайдера.

— Carousel Add To Cart Background Color, цвет фона кнопки добавить в корзину.

— Background Opacity, прозрачность фона.

— Add To Cart Background Opacity, прозрачность фона кнопки добавить в корзину.

— Set image width height, можно указать свои размеры, ширину и высоту изображения.

— Crop image, обрезать изображение.

— Description limit, указать лимит для описания товара.

Сохраните изменения.

 

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

 

Всё готово ! После того как вы добавите шорткод слайдера на страницу или в запись, готовый слайдер будет отображаться на вашем сайте !

 

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

 

Оцените статью