How to Add a Sticky “Proceed to Checkout” Button in WooCommerce

How to Add a Sticky “Proceed to Checkout” Button in WooCommerce

One of the best ways to enhance the user experience on WooCommerce websites is by providing easy access to important actions. In this tutorial, we’ll walk you through adding a sticky button on your WooCommerce cart and checkout pages. This button will follow users as they scroll, offering them quick access to the next step in their shopping journey—whether it’s proceeding to checkout or placing the order.

Step 1: Adding the Sticky Button to the Footer

The core functionality of this feature is achieved by using the wp_footer action hook, which ensures that the sticky button is added at the bottom of the page.

add_action('wp_footer', 'scb_add_sticky_button');

function scb_add_sticky_button() {
    if (!is_cart() && !is_checkout()) return;

    ?>
    <style>
        .scb-sticky-btn {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #2c7be5;
            color: #fff;
            text-align: center;
            padding: 15px;
            font-size: 18px;
            z-index: 9999;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
        }
        .scb-sticky-btn:hover {
            background: #1a68d1;
        }
        .scb-sticky-btn a,
        .scb-sticky-btn button {
            color: #fff;
            text-decoration: none;
            display: block;
        }
    </style>
    <?php
}

Explanation:

• Action Hook: add_action('wp_footer', 'scb_add_sticky_button') ensures that our sticky button is added to the footer section of the page.
• CSS: The styles define the look and behavior of the sticky button, making it fixed at the bottom of the page and ensuring it stays visible as users scroll.
  • Position: The button stays fixed at the bottom of the viewport using position: fixed.
  • Styling: A vibrant blue background with white text ensures it’s eye-catching. We also add a hover effect to make the button interactive.
  • Box Shadow: Adds a subtle shadow effect to the button for better visibility.

Step 2: Display the Button on the Cart Page

On the cart page, we want to provide the user with a link to proceed to the checkout. We achieve this by adding a simple anchor tag inside the sticky button.

<div class="scb-sticky-btn">
    <?php if (is_cart()) : ?>
        <a href="<?php echo esc_url(wc_get_checkout_url()); ?>">Proceed to Checkout</a>
    <?php endif; ?>
</div>

Explanation:

• Cart Page Check: We use if (is_cart()) to make sure the button only appears on the cart page.
• Checkout URL: The wc_get_checkout_url() function fetches the WooCommerce checkout URL, and we use this to create a clickable link for the user to proceed to checkout.

Step 3: Display the Button on the Checkout Page

For the checkout page, we want to add a sticky “Place Order” button that’s styled similarly to the existing “Place Order” button on the page. To achieve this, we use JavaScript to clone the existing button, adjust its styling, and append it to the sticky container.

<?php elseif (is_checkout()) : ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const placeOrderBtn = document.querySelector('#place_order');
            if (placeOrderBtn) {
                const clonedBtn = placeOrderBtn.cloneNode(true);
                clonedBtn.style.width = '100%';
                clonedBtn.style.background = 'none';
                clonedBtn.style.border = 'none';
                clonedBtn.style.fontSize = '18px';
                clonedBtn.style.padding = '0';
                clonedBtn.id = 'sticky_place_order';

                clonedBtn.addEventListener('click', function (e) {
                    e.preventDefault();
                    placeOrderBtn.click();
                });

                document.querySelector('.scb-sticky-btn').appendChild(clonedBtn);
            }
        });
    </script>
<?php endif; ?>

Explanation:

• Clone the Button: We target the existing “Place Order” button using document.querySelector('#place_order') and clone it using cloneNode(true).
• Styling the Cloned Button: We make the cloned button stretch to full width (width: 100%), remove its background and border, and adjust the font size for consistency with the sticky button.
• Click Handler: We add an event listener to the cloned button, ensuring that when it’s clicked, it triggers the original “Place Order” button’s action.

Step 4: Testing and Implementation

Once the code is in place, you should see a sticky button appear at the bottom of your cart and checkout pages:

• Cart Page: The sticky button will display a link saying “Proceed to Checkout.”
• Checkout Page: The sticky button will show a clone of the existing “Place Order” button, making it easily accessible no matter how far the user scrolls.

Conclusion

This sticky button feature is a great way to ensure that your customers always have quick access to critical actions, such as proceeding to checkout or placing an order. It improves the shopping experience by making navigation seamless, especially on mobile devices, where screen real estate is limited.