Решено WooCommerce Cart Tab - плагин плавающей корзины

[Валерий]

Плагин WooCommerce Cart Tab отображает закладку корзины, которая "плавает" по странице магазина, страницам архивов и странице просмотра описания товара при скроллинге, и раскрывается, показывая содержимое виджета корзины, когда посетитель наводит курсор мыши на закладку. Подобный подход позволяет удерживать фокус внимания посетителя на покупке. Плавающая вкладка корзины глаза не мозолит, сильно не напрягает, но и расслабиться клиентам не дает. Она словно шепчет: "Нажми на меня..." , недвусмысленно намекая на необходимость покупки!

Вот как выглядит вкладка после активации плагина:

​

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

​

Варианты настройки находятся на странице WooCommerce -> Настройки -> вкладка Каталог. Выглядят настройки так:

​

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

При наведении курсора мыши на вкладку, корзина плавно "выплывает", показывая свое содержимое. На фото показано содержимое корзины при выборе светлого скина:

​

И темного скина:

​

Если дефолтные скины Вас по каким-то причинам не устраивают, то css Вам в помощь!

 

[adsl3008]

Ты не мог бы подсказать как добавить картинку корзины? и кнопку перейти. У тебя очень красиво получилось на этом изображении

 

[Валерий]

Картинка - это обыкновенный бэкграунд для области ярлычка закладки, путь к которому прописал в стиле css для видимой области закладки (изначально там нет никакого бекграунда). Кнопку "перейти" просто прописал, добавив в исходный код строку вывода кнопки в исходнике плагина, ниже строки вывода количество товара в корзине. И подредактировал стили, чтобы кнопка выводилась как надо: паддинги, марджины и др.

 

[adsl3008]

Хотелось бы узнать куда именно ты вставил бэкграунд в css стиле, я уже целый час бьюсь над этим не как не разберусь

 

[Валерий]

У меня прописано так:

​

 

[adsl3008]

Попытки добавить в мой плагин WooCommerce Cart Tab картинку как у тебя потерпели фиаско ты можешь более подробно описать как добавить в свою корзину картинку ?
думаю многим пригодится в том числе и мне!

 

[Валерий]

Я уж и не знаю, как подробнее описать процесс добавления картинки! Я для добавления картинки сделал только 3 вещи:

• Нарисовал картинку и положил ее в папку;
• Добавил класс a.cart-parent в style.css моей темы;
• Прописал путь к картинке в url этого класса, как показано на скриншоте.

И это все!

Возможные траблы с добавлением картинки мне видятся только в том, что:

1. Не прописан путь к картинке в url, или он ведет не в ту папку, где лежит картинка.
2. Возможно нужен какой-то другой класс. Я сперва посмотрел иерархию классов своего шаблона, и на основании этого прописал класс a.cart-parent {}. И то у меня получилось сделать это далеко не с первого раза. Если обратить внимание на запись "a.cart-parent", то становится очевидным, что стиль применяется для всех элементов "cart-parent", которые являются ссылкой "а", что как-то не совсем естественно. Было бы более правильно применить стиль к самому элементу, а не к ссылке, которая лежит внутри него. Не помню, почему так, но у меня сработал именно этот вариант, хотя изначально я пробовал добавлять бекграунд в другие стили. Т.е. из всего этого можно сделать следующий вывод, а именно: добавление картинки корзины в другие шаблоны может потребовать своих стилей, которые будут связаны со стилями шаблона. Учитывая принцип наследования стилей сверху-вниз, вполне вероятна ситуации наложения стилей друг на друга, а также необходимость добавления префиксов (не знаю, как правильно это назвать) из вышестоящих классов по принципу: ".класс_1 .класс_2 элемент {}". Вроде с плагином Cart Tab у меня таких проблем не было, но с другими плагинами были, и чтобы класс применился приходилось прописывать путь из классов, например, не просто писать "ul.class_3 {}" (для всех улов класса 3), а писать ".class_1 .class_2 ul.class_3 {}", т.е. короткая запись не работала. Причем обращаю внимание, что проблема была не в плагинах, а в конкретной связке "Мой Шаблон - Плагин". То есть на другом шаблоне таких проблем может и не возникнуть. Я часто сталкиваюсь с трудностями подбора стиля для списков ul li. Учитывая, что у меня на этих списках построены многоуровневые выпадающие меню, то когда еще и плагине оказываются многоуровневые ul li, каша получается такая, что иногда полдня-день уходит чтобы наконец-то подобрать и прописать правильный класс...

 

[Jon]

Не подскажите как удалить надпись цены и количества товара, я так понимаю в cart-tab.php нужно что-то удалить)

 

[Александр Валентинович]

Странно, но закладки "Каталог" я не нашел у себя в Woocommerce. И пустая корзина не пропадает. Помогите!

 

[Александр Валентинович]

Разобрался. Управление плавающей корзиной теперь в Woocommerce - Настройки - Товары.

 

[redjek]

Добрый день, холе бы узнать, как можно сделать так чтобы корзина раскрывалась не при наведении курсора мышки, а по щелчку. В настройках самой корзины если поставить"Cart Widget Display the cart widget on hover" то остается только пиктограмма с ценой, и уже по щелчку перенаправляется на полную страницу корзины.

 

[Юрий Николаевич]

Большое спасибо за статью! Узнал за плагин ! И вставил красивую корзину!!!!! Подскажите как прописать вместо items русский текст единиц или товаров

 

[D&B]

Большое спасибо за статью! Узнал за плагин ! И вставил красивую корзину!!!!! Подскажите как прописать вместо items русский текст единиц или товаров

Тут

 

[Stork.71]

лучше тут. (неплохо было бы добавить эту ссылку в шапку темы)
а ссылки от D&B просто обязательны к прочтению.

 

[qwacer]

Разобрался. Управление плавающей корзиной теперь в Woocommerce - Настройки - Товары.

Разобрался. Управление плавающей корзиной теперь в Woocommerce - Настройки - Товары.

а у меня и там к сожалению нету
версия ворд 3.8 - может в этом дело

 

[kvo]

Есть возможность удалять товары прямо из виджета
Нужно вставить в /wp-content/plugins/woocommerce/templates/cart/mini-cart.php
этот код:

<?php echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf('<a href="%s" title="%s">× Delete</a>', esc_url( $woocommerce->cart->get_remove_url( $cart_item_key ) ), __( 'Delete item', 'woocommerce' ) ), $cart_item_key ); ?><?php echo WC()->cart->get_item_data( $cart_item ); ?>

в строку перед (выше) :

<a href="<?php echo get_permalink( $product_id ); ?>"> <?php echo str_replace( array( 'http:', 'https:' ), '', $thumbnail ) . $product_name; ?></a>

Текст, который отображается на виджете и наведении переводится и редактируется прямо в коде.

Единственное, что в моей теме как -то не эстетично всё это смотрится, нужно подумать как сделать красивее

 

[Zaknafain]

Есть возможность удалять товары прямо из виджета
Нужно вставить в /wp-content/plugins/woocommerce/templates/cart/mini-cart.php
этот код:

<?php echo apply_filters( 'woocommerce_cart_item_remove_link', sprintf('<a href="%s" title="%s">× Delete</a>', esc_url( $woocommerce->cart->get_remove_url( $cart_item_key ) ), __( 'Delete item', 'woocommerce' ) ), $cart_item_key ); ?><?php echo WC()->cart->get_item_data( $cart_item ); ?>

в строку перед (выше) :

<a href="<?php echo get_permalink( $product_id ); ?>"> <?php echo str_replace( array( 'http:', 'https:' ), '', $thumbnail ) . $product_name; ?></a>

Текст, который отображается на виджете и наведении переводится и редактируется прямо в коде.

Единственное, что в моей теме как -то не эстетично всё это смотрится, нужно подумать как сделать красивее
Посмотреть вложение 806

о вундерферма, клевые напитки )

 

[kvo]

о вундерферма, клевые напитки )

Ага

ps Ещё в редакторе темы style.css

Меняем размер шрифта на вкладке

.cart-tab .cart-parent {
font-size:2em;
}

Меняем ширину

.cart-tab {
width:30em;
}

 

[Ника01]

Конкретно с проблемой замены items на русский аналог не помогало справиться ничего из перечисленного по ссылке (хотя с другими переводами проблем не возникло). Может, потому, что в папке плагина в принципе нет русского файла локализации. Помогло внести изменения непосредственно в файле cart-tab.php - заменить в коде слова item и items на шт. Вернее даже не на "шт.", а на "шт.". Изменения в отображении корзины заметны только после добавления в нее нового товара (или удалить все из корзины и добавить заново).

 

[agroachtuba]

Ребят помогите!
Установил плагин, активировал, в настройках поставил галочку. И все равно корзины нет на странице. В чем может быть проблема?

У меня установлена WooCommerce Menu Cart, хотя отключал его, все равно не помогло...