Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для интернет-магазина Woocommerce! Сегодня вы узнаете как добавить в свой онлайн магазин адаптивный, сенсорный слайдер (карусель) товаров. Вы можете настроить внешний вид слайдера, стиль кнопки и навигации. Вы можете указать размер слайдера для разных устройств, мобильный, планшет, компьютер.
В слайдере можно отобразить все товары, либо товары из определённой категории. Поддерживает функции: LazyLoad, Mobile Touch, JQuery. Добавить слайдер на сайт можно с помощью простого шорткода.
Выбор стиля кнопки и навигации.
Установить плагин AS woocommerce with owl carousel вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый, введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
Далее, после установки и активации плагина, перейдите на страницу: 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, кнопки для навигации.
– Сохраните изменения.
Далее, после того как вы настроите основные параметры, сохраните изменения. Затем нажмите внизу на кнопку – Get Shortcode, чтобы сгенерировать шорткод слайдера. У вас появится готовый шорткод. Можете его скопировать и вставить на страницу, где будет отображаться слайдер.
Далее, перейдите на страницу “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, указать лимит для описания товара.
– Сохраните изменения.
Всё готово! После того как вы добавите шорткод слайдера на страницу или в запись, готовый слайдер будет отображаться на вашем сайте!
Остались вопросы? Напиши комментарий! Удачи!
Здесь только один слайдер можно создать?
Или есть возможность сделать разные слайдеры?
Можно делать разные слайдеры. Укажите другое имя для слайдера, внизу страницы скопируйте шорткод, он будет другим.
Как такой слайдер, поместить на главной странице над футером, и что бы на любой другой странице он отображался, всё на том же месте.
Я так понимаю тут шорткодом не обойтись)))
Вам нужен специальный php код для вставки шорткода Смотрите Здесь !!!
Спасибо!
Здравствуйте, в каком файле можно изменить язык плагина с английского на русский?
Добрый день. Вы WordPress и Woocommerce обновляете? Переводы надо тоже обновлять.
А есть аналогичный плагин, только для карусели категорий, а не товаров?
Да, есть такие плагины:
– Woo Product Slider and Carousel with category
– Woocommerce Products Slider
– Woo Related Products
– WP WooCommerce Category Slider
а какой плагин выводит из категории.. только рекомендованные?
Вы имеете ввиду, чтобы можно было самому выбрать определённые товары?
да
Могу порекомендовать два плагина: WPB WooCommerce Product Slider и SP WooCommerce Product Slider. У них есть такая функция, плюс они свежие, недавно обновлялись и совместимы с WordPress.
Здравствуйте, не выводит “рекомендуемые товары”. Для товаров поставил “звездочку”, они стали отмечаться галочкой “рекомендованные”, но шорт код их не отображает. Подскажите, как исправить? Заранее спасибо.
Добрый день. Значит у вас нет рекомендуемых товаров. Выберите другой тип.
Подскажите тогда, как добавить товары в категорию “рекомендуемых”, чтобы плагин их видел?
Я с переводом не много ошибся. Не рекомендуемые, а популярные. Видимо у вас нет ещё популярных товаров. Система сама определяет.
Здравствуйте. Вновь столкнулся с проблемой. Плагин стал криво отображать карусель. Раньше был порядок, товары стояли квадратами рядом друг с другом, сейчас один товар растянут на всю строку. Прикрепляю ссылку на сайт.
Данный плагин конфликтует с многими другими плагинами. До этого искал альтернативу, что бы не было конфликта. Но уже надоело искать альтернативу, хочется решить проблему навсегда.
Заранее большое спасибо за ответ.
Здравствуйте. Проблемы не обнаружил, может скриншот покажите.
Добрый день! Плагин отображает товары не блоками в ряд, а блоками в столбец. То есть, все товары сразу
Надпись на кнопке “Add ti Cart” как поменять?
Вам поможет плагин Loco Translate
?