Sticky Website Buttons: How to Increase Conversion with Floating Buttons

On the mobile version of a website, it’s crucial that key actions (calls, orders, chat) are always within the user’s reach. Sticky buttons solve this problem — they remain on screen during scrolling, improving convenience and conversion rates.

In this article, we’ll cover:
✔️ What sticky buttons are and why you need them
✔️ How to add them to your WordPress site (ready code + plugins)
✔️ Examples of effective buttons (phone, WhatsApp, Telegram, shopping cart)

---

Why Use Sticky Buttons?

Research shows that 67% of users leave a website if they can’t quickly find contact information or order buttons. Sticky buttons solve this problem:

✅ Increase conversion – customers always see the «Order» or «Call» button
✅ Improve UX – no need to scroll back to the top to take action
✅ Mobile-friendly – on small screens, important elements should be easily accessible

Which Buttons Should Be Sticky?

1. Phone – for quick contact
2. WhatsApp/Telegram – popular messengers
3. Shopping cart – so users don’t lose selected items
4. Callback request – for service websites

---

How to Add Sticky Buttons to WordPress?

Method 1: Ready Code (No Plugins)

Simply insert this code into your theme’s footer.php or via Appearance → Editor:

<div class="sticky-buttons-mobile">
    <a href="tel:+79991234567" class="sticky-button">
        <i class="fas fa-phone-alt"></i>
        <span>Call</span>
    </a>
    <a href="https://t.me/your_username" class="sticky-button" target="_blank">
        <i class="fab fa-telegram-plane"></i>
        <span>Telegram</span>
    </a>
    <a href="https://wa.me/79991234567" class="sticky-button" target="_blank">
        <i class="fab fa-whatsapp"></i>
        <span>WhatsApp</span>
    </a>
    <a href="/cart" class="sticky-button cart-button">
        <i class="fas fa-shopping-cart"></i>
        <span class="cart-count-indicator" style="display: none;"></span>
        <span>Cart</span>
    </a>
</div>

CSS (add to style.css or via Additional CSS):

.sticky-buttons-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 9999;
    padding: 8px 0;
}

.sticky-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    text-decoration: none;
    font-size: 12px;
    gap: 4px;
    padding: 8px 5px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.sticky-button i {
    font-size: 20px;
}

/* Icon colors */
.sticky-button:nth-child(1) i { color: #3498db; } /* Phone */
.sticky-button:nth-child(2) i { color: #0088cc; } /* Telegram */
.sticky-button:nth-child(3) i { color: #25D366; } /* WhatsApp */
.sticky-button:nth-child(4) i { color: #e74c3c; } /* Cart */

/* Press effect */
.sticky-button:active {
    transform: scale(0.95);
    background: #f5f5f5;
}

/* Cart indicator */
.cart-count-indicator {
    position: absolute;
    top: -5px;
    right: 20px;
    width: 12px;
    height: 12px;
    background: #e74c3c;
    border-radius: 50%;
    border: 2px solid #fff;
    display: none;
}

@media (min-width: 768px) {
    .sticky-buttons-mobile {
        display: none;
    }
}

avaScript (for cart indicator):

document.addEventListener('DOMContentLoaded', function() {
    const cartIndicator = document.querySelector('.cart-count-indicator');
    // Replace with your cart checking logic
    if (localStorage.getItem('cart_items') > 0) {
        cartIndicator.style.display = 'block';
    }
});

Method 2: Plugins (No Coding)

If you prefer not to edit code, use:

• Sticky Mobile Buttons – Best sticky buttons solution
• Sticky Menu (or Anything!) on Scroll – sticks any elements
• Elementor – if your site uses this page builder

---

Conclusion

Sticky buttons simplify navigation and increase conversion, especially on mobile devices. You can add them:
🔹 Manually (our code is ready to use)
🔹 Via plugins (quick but less flexible)

Tip: Test different button variations (colors, placement) and track conversion in Yandex Metrica and Google Analytics.