How to Add a Custom “Sticky Add to Cart Bar” in WooCommerce Using Hooks

A sticky add-to-cart bar keeps the purchase button always visible while users scroll.
This reduces friction and helps customers buy faster, especially on mobile devices.

In this tutorial, you will learn how to create a sticky add-to-cart bar in WooCommerce using hooks and a bit of JavaScript.

Why Sticky Add to Cart Improves Sales

Many users scroll through product pages without finding the buy button again.
A sticky bar solves this problem instantly.

• Keeps purchase button always visible
• Improves mobile conversion rates
• Reduces scrolling frustration
• Increases impulse purchases

The WooCommerce Hook We Will Use

We will use:

wp_footer

This hook allows us to inject a sticky bar at the bottom of the page.

Step 1: Add Sticky Bar HTML

Add this code to your theme’s functions.php file or a custom plugin:

add_action('wp_footer', 'sticky_add_to_cart_bar');

function sticky_add_to_cart_bar() {

    if (!is_product()) {
        return;
    }

    global $product;

    if (!$product) {
        return;
    }

    echo '
';

    echo '' . $product->get_name() . '';

    echo 'Add to Cart';

    echo '
';
}

Step 2: Hide Bar on Scroll (Optional Enhancement)

You can improve UX by hiding the bar when user reaches the original add-to-cart button:

add_action('wp_footer', 'sticky_atc_scroll_script');

function sticky_atc_scroll_script() {

    if (!is_product()) {
        return;
    }

    echo '';
}

How It Works

• Displays sticky bar on product pages
• Keeps add-to-cart button always visible
• Optional scroll logic improves UX

Customization Ideas

• Add quantity selector in sticky bar
• Show product price dynamically
• Add AJAX add-to-cart functionality
• Hide bar for out-of-stock products