Может кто подсказать плагин с элементом для вывода пиктограммы корзины в елменторе?

Ссылка скопирована
Иконки
1 ответ

Существуют ли бесплатные плагины для вукомерс позволяющие самому изменять вид иконки корзины в хедере. Из похожих с функционаломнашел только Elementor Header & Footer Builder, а также элемент из про версии элементора(но по причинам невозможности приобрести про версию воспользоваться нет возможности).
В Elementor Header & Footer Builder выглядит слишком тонким и нет возможности кастомизировать

Может кто подсказать плагин с элементом для вывода пиктограммы корзины в елменторе?

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Никита Орлов Ответ

Если нужна просто пиктограмма корзины в Elementor, сначала проверьте, есть ли у Вас Elementor Pro: там есть виджет Menu Cart для WooCommerce. Если Pro нет, не обязательно ставить тяжёлый набор аддонов только ради одной иконки. Можно сделать короткий shortcode и вставить его в HTML/Shortcode-виджет Elementor.

Пример shortcode для иконки корзины с количеством товаров:

add_shortcode('mini_cart_icon', function () {
    if (!function_exists('WC')) {
        return '';
    }
 
    $count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0;
    $url = wc_get_cart_url();
 
    return sprintf(
        '<a class="mini-cart-icon" href="%s" aria-label="Корзина">🛒 <span>%d</span></a>',
        esc_url($url),
        (int) $count
    );
});

add_shortcode('mini_cart_icon', function () { if (!function_exists('WC')) { return ''; } $count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0; $url = wc_get_cart_url(); return sprintf( '<a class="mini-cart-icon" href="%s" aria-label="Корзина">🛒 <span>%d</span></a>', esc_url($url), (int) $count ); });

CSS можно добавить в тему или в дополнительные стили:

.mini-cart-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    text-decoration: none;
}
 
.mini-cart-icon span {
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #1f6bff;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.mini-cart-icon { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; } .mini-cart-icon span { min-width: 20px; height: 20px; border-radius: 999px; background: #1f6bff; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

Если нужно обновление количества без перезагрузки после AJAX-добавления товара, подключите WooCommerce fragments. Но если на сайте важна скорость, лучше не злоупотреблять fragments на всех страницах. Для простого магазина shortcode обычно достаточно.

Из бесплатных решений можно посмотреть Essential Addons, Premium Addons или похожие наборы для Elementor, но ставить большой аддон ради одной корзины не всегда разумно. Каждый такой плагин добавляет CSS/JS и может ухудшить PageSpeed. Если нужна только иконка, небольшой shortcode или виджет в дочерней теме будет чище.

Не забудьте проверить страницу корзины и checkout после добавления. Иногда дизайнерская иконка ведёт на неправильный URL, а счётчик товаров не обновляется после очистки корзины. Это лучше сразу протестировать: добавить товар, удалить товар, обновить страницу и проверить мобильную шапку.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 1 ответ