Skip to content Последвайте ме:
Липсващи бутони или неработещ скрол в мини количката (WooCommerce + Elementor) — Решение със CSS
Ако използвате WooCommerce и Elementor с изскачаща странична количка (mini cart sidebar), често се появяват следните прeдизвикателства:
На десктоп: при добавяне на повече продукти, липсва скрол и част от съдържанието остава невидимо.
На мобилни устройства: бутоните за „View cart“ и „Checkout“ изчезват или се показват извън екрана, без възможност за достигане до тях.
На компютър
На мобилно устройство
Решение за десктоп
На десктоп устройствата е важно да се осигури:
Скрол в рамките на количката.
Адекватно разстояние между бутоните.
➤ CSS код за десктоп:
.woocommerce-mini-cart,
.elementor-widget-wc-cart .elementor-widget-container {
max-height: 90vh; /* ограничава височината */
overflow-y: auto; /* позволява вертикален скрол */
overscroll-behavior: contain;
padding-right: 10px; /* предотвратява скриване от скролбар */
}
.woocommerce-mini-cart__buttons a.button {
margin-right: 10px; /* добавя разстояние между бутоните */
}
Решение за мобилни устройства
На мобилни устройства проблемът обикновено е по-сериозен — бутоните често напълно изчезват от екрана. Това решение:
Задава sticky позициониране на бутоните в долната част на количката.
Прави бутоните адаптивни и подредени с подходящо разстояние.
Гарантира, че съдържанието на количката остава скролируемо.
➤ CSS код за мобилни устройства:
@media (max-width: 768px) {
.woocommerce-mini-cart__buttons {
position: sticky;
bottom: 0;
background: #fff;
z-index: 1000;
padding: 10px;
display: flex;
gap: 5px;
justify-content: space-between;
flex-wrap: wrap;
}
.woocommerce-mini-cart__buttons a.button {
flex: 1 1 48%;
display: inline-block !important;
}
}
CSS кодовете се поставят в настройките на WordPress за допълнителен код:
Резултат
След прилагане на този CSS:
На десктоп: количката има скрол и бутоните са добре подредени.
На мобилно: бутоните са винаги видими в долната част, подредени адаптивно и достъпни за натискане.
