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

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

 

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

 

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

Укажите свой Email, если хотите получить ответ на почту!

  1. Роман

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  2. Oleg

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

    Ответить
    1. Илья Журавлёв автор
      Ответить
  3. Oleg

    Спасибо!

    Ответить
  4. Никита

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  5. Михаил

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

    Ответить
    1. Илья Журавлёв автор

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

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

      Ответить
      1. Денис

        а какой плагин выводит из категории.. только рекомендованные?

      2. Илья Журавлёв автор

        Вы имеете ввиду, чтобы можно было самому выбрать определённые товары?

      3. Денис

        да

      4. Илья Журавлёв автор

        Могу порекомендовать два плагина: WPB WooCommerce Product Slider и SP WooCommerce Product Slider. У них есть такая функция, плюс они свежие, недавно обновлялись и совместимы с WordPress.

  6. Никита

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
      1. Никита

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

      2. Илья Журавлёв автор

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

  7. Никита

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  8. Key

    Добрый день! Плагин отображает товары не блоками в ряд, а блоками в столбец. То есть, все товары сразу

    Ответить
  9. Ислам

    Надпись на кнопке “Add ti Cart” как поменять?

    Ответить
    1. Илья Журавлёв автор

      Вам поможет плагин Loco Translate

      Ответить
  10. Абдурахимов

    👍

    Ответить