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

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

 

Остались вопросы ? Напиши комментарий ! Удачи !

 






info-effect.ru
Woocommerce карусель слайдер товаров сенсорный обновлено: Февраль 18, 2017 автором: Илья Журавлёв

15 комментариев

  • Роман 25.02.2017 Ответить

    Здесь только один слайдер можно создать?
    Или есть возможность сделать разные слайдеры?

    • Илья Журавлёв 25.02.2017 Ответить Автор

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

  • Oleg 07.04.2017 Ответить

    Как такой слайдер, поместить на главной странице над футером, и что бы на любой другой странице он отображался, всё на том же месте.
    Я так понимаю тут шорткодом не обойтись)))

  • Oleg 10.04.2017 Ответить

    Спасибо!

  • Никита 23.02.2018 Ответить

    Здравствуйте, в каком файле можно изменить язык плагина с английского на русский?

    • Илья Журавлёв 24.02.2018 Ответить Автор

      Добрый день. Вы WordPress и Woocommerce обновляете? Переводы надо тоже обновлять.

  • Михаил 07.03.2018 Ответить

    А есть аналогичный плагин, только для карусели категорий, а не товаров?

    • Илья Журавлёв 08.03.2018 Ответить Автор

      Да, есть такие плагины:

      – Woo Product Slider and Carousel with category
      – Woocommerce Products Slider
      – Woo Related Products
      – WP WooCommerce Category Slider

  • Никита 08.03.2018 Ответить

    Здравствуйте, не выводит “рекомендуемые товары”. Для товаров поставил “звездочку”, они стали отмечаться галочкой “рекомендованные”, но шорт код их не отображает. Подскажите, как исправить? Заранее спасибо.

    • Илья Журавлёв 08.03.2018 Ответить Автор

      Добрый день. Значит у вас нет рекомендуемых товаров. Выберите другой тип.

      • Никита 08.03.2018 Ответить

        Подскажите тогда, как добавить товары в категорию “рекомендуемых”, чтобы плагин их видел?

        • Илья Журавлёв 09.03.2018 Ответить Автор

          Я с переводом не много ошибся. Не рекомендуемые, а популярные. Видимо у вас нет ещё популярных товаров. Система сама определяет.

  • Никита 19.04.2018 Ответить

    Здравствуйте. Вновь столкнулся с проблемой. Плагин стал криво отображать карусель. Раньше был порядок, товары стояли квадратами рядом друг с другом, сейчас один товар растянут на всю строку. Прикрепляю ссылку на сайт.
    Данный плагин конфликтует с многими другими плагинами. До этого искал альтернативу, что бы не было конфликта. Но уже надоело искать альтернативу, хочется решить проблему навсегда.
    Заранее большое спасибо за ответ.

    • Илья Журавлёв 19.04.2018 Ответить Автор

      Здравствуйте. Проблемы не обнаружил, может скриншот покажите.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая на кнопку Отправить комментарий, вы соглашаетесь с Политикой конфиденциальности и Пользовательским соглашением сайта info-effect.ru


Обратная связь

Политика конфиденциальности - Пользовательское соглашение

Стрелка вверх