Плавающая корзина с счетчиком товаров в ней для Woocommerce

Віталий

5 років ago

Плавающая корзина с счетчиком товаров в ней для Woocommerce

Доброго времени суток. 🙂

Появилось немного времени и я решил написать небольшую статью о маленькой доработке вашего магазина, работающего на Woocommerce. Сегодня, речь пойдет о добавлении плавающей кнопке корзины с счетчиком товаров в ней. Доработку можно применить по разному, но я ее воплотил в виде плавающей иконки. Такая кнопка полезна тем, что всегда под рукой у посетителя на сайте, что совершает покупки. Он в любой момент может перейти в корзину для оформления товара. Так же он всегда видит количество товаров отложенных для покупки.

Чтобы добавить такую кнопку на свой сайт нужно добавить небольшой код в вашу тему, на которой активирован плагин Woocommerce. Добавлять код нужно, например в файл шапки или подвала. Тогда, ваша иконка плавающая будет отображаться на всех страницах сайта. Лично я добавляю в файл подвала - footer.php. Конкретно, перед функцией - wp_footer();, она есть в любой теме WordPress, в файле footer.php.

<?php 
if (class_exists('WooCommerce' )){
global $woocommerce; ?>
<a href="<?php echo $woocommerce->cart->get_cart_url() ?>" class="fix_cart_btn fz_an">
        <span class="basket-btn__label">Корзина</span>
        <span class="fix_cart_count"><?php echo sprintf($woocommerce->cart->cart_contents_count); ?></span>
</a>
<?php 
} 
?>

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

По самому коду все просто. Во второй строке мы проверяем активирован ли Woocommerce и существует ли класс WooCommerce. Допустим, у вас не активен плагин, тогда кнопки не будет. Далее, подключаем глобальную переменную $woocommerce, чтобы работала ссылка на корзину и счетчик. Теперь уже начинается код самой ссылки-кнопки. Тут все просто, обычная ссылка, путь которой - корзина вашего сайта.

Внутри ссылки добавлено 2 элемента. Первый это иконка, картинка, слово или то что вы захотите туда добавить. Я добавляю иконку от шрифта Font Awesome, если у вас подключена его 5 версия, то тоже можете добавить ее вместо слова Корзина:

<i class="fas fa-shopping-basket"></i>

Придаем стили нашей кнопке. Она будет фиксированной и плавать в правом нижнем углу. Счетчик товаров в корзине будет над кнопкой в правом ее верхнем углу.

.fix_cart_btn{position:fixed;text-align:center;font-size:10px;color:#fff;line-height:50px;bottom:110px;right:40px;background:#01D19D;border-radius:50px;height:50px;width:50px;z-index:100;}
.fix_cart_btn:hover{color:#fff;background:#E666B1;}
.fix_cart_count{position:absolute;top:2px;right:2px;font-size:11px;line-height:15px;min-width:15px;font-weight:bold;background:#E666B1;-webkit-border-radius:10px;border-radius:10px;}

Результат будет таким:

Вы, конечно же, можете все менять на свой вкус и под свои нужды.

На этом все, спасибо за внимание. 🙂

Exit mobile version