WooCommerce Cart Tab вкладка корзина открывающаяся при наведении

WooCommerce

 Привет ! Мы продолжаем разбирать самые интересные и самые полезные плагины для интернет-магазина Woocommerce ! Сегодня вы узнаете как добавить в свой интернет-магазин вкладку корзины, которая открывается при наведении мыши. Вы наверняка видели на теме Storefront такую фишку, когда наводишь курсор мыши на корзину в меню, то появляется окно с содержанием корзины, где указано количество товаров, общая стоимость товаров и кнопки – “Перейти в корзину” и “Оформление заказа”.

 Вы сможете сделать точно также на любой wordpress теме, только вкладка корзины будет отображаться в боковой части сайта, слева или справа. У выезжающей вкладки будет две темы на выбор, светлая и тёмная. Можно выбрать расположение вкладки, в левой или правой части сайта. Вкладка с корзиной всегда находится на виду у пользователя.

 

корзина магазин сайт

 

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

 

WooCommerce Cart Tab

 

 Далее, после установки и активации плагина, перейдите на страницу: WoocommerceНастройкиТоварыОтображение. Здесь вы сможете настроить основные параметры плагина.

 

настройки корзины

 

 В настройках Товары – Отображение, спуститесь в самый низ страницы, здесь у вас будут настройки плагина:

 

– Cart Widget, поставьте здесь галочку, чтобы виджет корзины появлялся при наведении на вкладку.

– Hide Empty Cart, скрыть вкладку корзины когда корзина пуста.

– Use the light or dark skin, вы можете выбрать тему для корзины, тёмную или светлую.

– Position the cart tab on the right or left, выберите расположение вкладки, слева или справа.

– Cart link display total/subtotal, здесь можно выбрать как будет отображаться стоимость в корзине, общая или промежуточная. Оставьте по умолчанию.

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

 

вкладка корзина

 

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

 

вкладка корзина

 

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

 

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

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

  1. катя

    Здравствуйте, а как поменять текст, который отображается во вкладке корзины, а именно : у меня по умолчанию написано 1 item, а мне надо, к примеру 1 шт.
    Спасибо

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

      Здравствуйте, либо искать перевод в файлах плагина, либо с помощью плагина – Loco Translate.

      Ответить
  2. Павел

    Приветствую!
    Два проблемы с данным плагином:
    1. Настроек плагина в указанном Вами месте обнаружить не удалось. Я использую на сайте плагин “WooCommerce Products Per Page” и там, где Вы указали, что должны быть настройки “WooCommerce Cart Tab”, вместо этого отображаются настройки указанного плагина, а настроек “WooCommerce Cart Tab” ВООБЩЕ нигде не смог найти. Но это еще не самое плохое, в принципе вкладка и так выглядит не плохо и находился в нужном месте. Но…
    2. Внизу вкладки находятся кнопки “Перейти в корзину” и “Оформление заказа”. Их расположение не такое, как на Вашем скрине, а в одну строку. Из-за этого текст в кнопки не влазит (если б у Вас был разрешен аплоадинг файлов, я бы приложил скрин) и некрасиво уходит куда-то за кнопки. Как вариант решения этой проблему – поменять текст на более короткий. Но проблема в том, что в файле русской локализации самого плагина данных кнопок нет в принципе. Из чего я сделал вывод, что плагин подтягивает их из стандартной русской локализации WooCommerce. Открыл этот файл – да, такое значения есть. Поменял на другие, обновился, но ничего не поменялось. Текст кнопок остался тем же. Думал, быть может этот текст задают какие-то плагины кастомизации WooCommerce или локализация самой темы, но перекопал уже все и так ничего не нашел. Но где-то же эти фразы на русском берутся? Какие у Вас есть идеи по этой ситуации?

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

      Здравствуйте, плагин Loco Translate пробовали ?

      Ответить
      1. Павел

        Разумеется. И Локо и ПоЭдит. В языковом файле нет подписей этих кнопок

      2. Александр

        В языковом файле плагина woocommerce есть такие названия переводов, ищите лучше, поменял текст “В корзину” и “Заказать” вместо “Перейти в корзину” и “Оформить заказ”, за минуту все нашел.

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

        А кэш чистили в браузере после перевода ?

      4. Александр

        естественно

  3. Александр

    Здравствуйте! У меня тоже отсутвуют настройки плагина, подскажете в чем дело?
    И, может еще подскажете, как отключить базовую корзину Woocommerce, а то сейчас присутствуют обе.

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

      Здравствуйте. Настройки должны быть ! Ещё раз внимательно посмотрите на странице: Woocommerce – Настройки – Товары – Отображения, внизу страницы.

      А где корзина базовая отображается ? Чем она выводится, плагином или темой ?

      Ответить
  4. Александр

    настроек нет – ниже “изображения товара” только кнопка “сохранить изменения”
    базовая отображалась в хедере – уже убрал, выводится темой.
    еще вопрос: можна ли сделать, чтобы корзин также выезжала при нижимании на кнопку заказать на карточке товара, а не только на главной странице магазина?

    Ответить
    1. Илья Журавлёв автор
      Ответить
  5. Александр

    Спасибо за рекомендацию плагина! Так что с настройками?

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

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

      Изменить CSS стили корзины вам поможет плагин – SiteOrigin CSS.

      Ответить
  6. Александр

    Илья, только заметил, что в мобильной версии корзина отсутствует. Этот плагин в моб версиях не работает?

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

      Точно не помню, видимо так. Но, можно с помощью CSS добавить отображение корзины на мобильные !

      Ответить
  7. Александр

    не подскажете, как именно?

    Ответить
    1. Илья Журавлёв автор
      Ответить
  8. Александр

    по ссылке вы объясняете как НЕ отображать елементы в моб версии, а мне нужно отобразить!
    в файле style.css запрета на отображение woocommerce-cart-tab нет.

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

      Да, именно так. В коде нужно указать размер экрана меньше мобильного, чтобы на мобильных устройствах отображалось.

      Ответить
  9. Leva

    Кто небудь уже знает как можно вернуть настройки или где они находятся?

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

      Какие настройки?

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

        Woocommerce – Настройки – Товары – Отображение. Внизу страницы, нет настроек?

      2. Leva

        Нет

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

        Тогда лучше к автору плагина обратиться. Видимо после обновления Woocommerce или данного плагина, произошла какая-то несовместимость. Кстати, есть и другие подобные плагины. Смотрите здесь – Супер плагины Woocommerce, в разделе Корзина.

  10. Челик

    Настройки расположения и цвета меняются в оснастке “настроить”, в админской шапке, когда на странице сайта находишься. Там есть вкладка с названием плагина этого.

    Ответить