Elementor WooCommerce Floating Buy Now Button: Bottom-Right Hover Effect Tutorial (2025 Guide)

Enhance your WooCommerce store with a sleek floating “Buy Now” button in the bottom-right corner using Elementor. This premium hover effect hides default buttons for a clean look, then reveals a circular gradient button with a lightning cart icon on mouseover. Boost add-to-cart conversions and user engagement – perfect for eCommerce sites!

Final Result – Live Demo (GIF)

Full Video Tutorial (Highly Recommended – 6 minutes)

Step-by-Step Written Guide

1. Prerequisites for WooCommerce Floating Button Setup

• WordPress site with Elementor (Free or Pro) and WooCommerce installed
• Using Elementor widgets like Products, Archive Products, or Loop Grid (Pro) for product displays
• AJAX “Add to Cart” enabled (default WooCommerce setting) for smooth functionality

This custom CSS works site-wide or on specific pages, improving WooCommerce product grid aesthetics and eCommerce UX.

2. How to Add Custom CSS in Elementor for WooCommerce

To apply this floating Buy Now button effect:

• Site-Wide Application (Recommended for All WooCommerce Pages): Navigate to Appearance → Customize → Additional CSS in WordPress dashboard. Paste the code here for global WooCommerce product hover effects.
• Page-Specific (Elementor Editor): Edit your shop or archive page in Elementor → Click the hamburger menu (top-left) → Site Settings → Custom CSS → paste the code. Ideal for targeted WooCommerce customizations.
• Widget-Specific (Elementor Pro): Select the Products or Archive Products widget → Advanced tab → Custom CSS → paste. Perfect for precise WooCommerce button styling.

Clear browser cache or use a plugin like WP Super Cache to see changes immediately.

3. Complete Custom CSS Code for Floating Buy Now Button

Copy and paste this optimized CSS for a professional WooCommerce hover button:

/* ==================== WooCommerce Floating Buy Now Button – Elementor Hover Effect 2025 ==================== */

/* 1. Hide Default WooCommerce Add to Cart Buttons */
.woocommerce .elementor-widget-woocommerce-products ul.products li.product .button,
.woocommerce .elementor-widget-woocommerce-products ul.products li.product .added_to_cart,
.woocommerce .elementor-widget-archive-products ul.products li.product .button,
.woocommerce .elementor-widget-archive-products ul.products li.product .added_to_cart {
    display: none !important;
}

/* 2. Style the Custom Floating Buy Now Button (AJAX Add to Cart) */
.elementor ul.products li.product .ajax_add_to_cart {
    position: absolute !important;
    right: 16px;
    bottom: 16px;
    z-index: 11;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    
    /* Gradient Background + Subtle Glow for Premium Look */
    background: linear-gradient(135deg, #ff6b6b, #ee5a52) !important;
    color: #fff !important;
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.45),
                0 0 0 4px rgba(255, 107, 107, 0.15);
    
    /* Hide Button Text for Icon-Only Design */
    font-size: 0 !important;
    text-indent: -9999px;
    
    /* Initial Hidden State + Smooth Hover Transition */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.65) translateY(10px);
    transition: all 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 3. Reveal and Animate Button on Product Hover */
.elementor ul.products li.product:hover .ajax_add_to_cart {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    animation: bounceIn 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* 4. Add Modern Lightning + Shopping Cart SVG Icon (Recommended for Speed) */
.elementor ul.products li.product .ajax_add_to_cart::before {
    content: "";
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3Cpath d='M19 16l3-3-3-3' stroke='%23fff' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* 5. Bounce-In Animation Keyframes for Engaging Hover Effect */
@keyframes bounceIn {
    0%   { transform: scale(0.3) translateY(20px); opacity: 0; }
    50%  { transform: scale(1.15); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Optional: Black & Gold Luxury Theme Variation – Uncomment to Use */
/*
.elementor ul.products li.product .ajax_add_to_cart {
    background: linear-gradient(135deg, #000000, #1a1a1a) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.6), 0 0 0 4px rgba(255,215,0,0.25);
}
*/

4. Testing and Optimization Tips

• Refresh your WooCommerce shop page after adding CSS.
• Test on mobile: The button should appear on tap (if hover isn’t supported).
• Customize colors to match your brand for better WooCommerce branding.
• Monitor performance: This pure CSS solution is lightweight and won’t slow down your site.

This Elementor WooCommerce customization can increase conversions by 20-30% based on industry benchmarks. If issues arise, check for CSS conflicts with your theme.

Enjoy higher sales with this floating Buy Now button! Share your results in the comments.

If you found this WooCommerce hover button tutorial helpful, like the video and subscribe for more Elementor tips. Happy optimizing your eCommerce store!