Do you know that many customers get lost reading the product details on a single product page and never scroll back to the add to cart button to add that product?
They do it because scrolling back up feels like a chore. Therefore, store owners, specifically owners with WooCommerce stores, lose potential sales.
However, store owners won’t face this kind of situation if they have a sticky add to cart bar on their WordPress shops. If you have a store, consider adding this feature.
That said, keep reading this article if you need to know how to add sticky add to cart bar for WooCommerce.
Why Use a Sticky Add to Cart Bar?
A sticky add-to-cart bar helps WooCommerce store owners in many ways. It enhances user experience, increases dwell time, and boosts conversions.
As you know, shoppers sometimes browse long, single-product pages filled with descriptions, images, or reviews, and the default “Add to Cart” button might get lost as they scroll down. Most of those shoppers might not scroll back to the add to cart button and click on it.
In this case, a sticky add-to-cart bar can solve this problem by keeping the add-to-cart button in front of potential customers’ eyes as they scroll down the single pages past the default add-to-cart button.
A sticky add-to-cart bar is beneficial for mobile users who make up over 50% of e-commerce traffic. How? Scrolling on smaller screens can sometimes feel cumbersome. A sticky bar ensures the ‘Add to Cart’ button always remains within reach, reducing the cart abandonment rate.
These are the primary reasons many store owners use a sticky add-to-cart bar on their online shops. You need to have this feature on your WordPress store if you want to improve user experience, engagement, and conversions.
👉 Good Read: How to Add Live Sales Notification for WooCommerce
How to Add Sticky Add to Cart Bar for WooCommerce
You can easily add this feature to your store using one of the two methods we’ll be showing in this comprehensive article. However, before we begin, we would like to inform you that one method is suitable for all WordPress store owners, regardless of their level of technical knowledge.
The other method, on the other hand, is ideal for advanced WordPress users, particularly those with technical expertise. Hence, let’s get started with these methods to add a sticky’ Add to Cart’ bar to your WooCommerce store.
Method 1: Include a Sticky Bar on Your WooCommerce Shop with a Plugin
This method requires you to find and install the best plugin to integrate a sticky add-to-cart bar in your WooCommerce shop. Here is a step-by-step guide.
Step 1: Select the Best Plugin to Include a Sticky Add to Cart Bar
Now the big question is, how do you know which is the best plugin for your job when there are many plugins in the WordPress plugin repository?
Yes, it’s challenging to get such a plugin. However, you can make this job easier if you consider the criteria below when searching for one.
- Ensure the plugin you select integrates seamlessly with your theme and other plugins
- It should support the latest versions of WordPress and WooCommerce
- Your chosen plugin must support instant cart updates
- It should offer you to place the sticky bar according to your preferred position
- Make sure the plugin works with both simple and variable products
- Check if it gives you extra features
- Examine customer reviews, customer support, and developer reputation
- Lastly, consider the pricing if it comes paid
As you can see, there are several factors to consider when selecting a plugin to add a sticky bar to your e-commerce store. So, if you want to avoid this hassle and need a recommendation, pick ShopBuilder.
It not only meets the criteria we mentioned above, but also offers many more features to help you easily create top-grade WooCommerce stores that drive conversions. Let’s install it.
Step 2: Install and Activate the ShopBuilder WooCommerce Store Builder
ShopBuilder is available in both free and paid versions. While its free version offers many features to level up your store, you need to opt for its premium version if you want to use its sticky ‘add to cart’ feature.
So, get it: download the premium version’s zipped file and follow the steps below for installation.
- Go to your WordPress Admin Dashboard. Then, click Plugins > Add Plugin.
- Press the “Upload Plugin” button.
- Then, click the “Choose File” button and upload the ShopBuilder Pro zipped file that you received after purchasing the plugin via email.
- Now, press “Install Now” button and wait.
- Finally, click “Activate Plugin” button to activate the pro version of ShopBuilder.
Note that you’ll see a notification prompting you to install the free version of ShopBuilder if you haven’t already done so. The pro version requires the free version to function.
So, click “Install ShopBuilder” button on that notification.
Finally, hit “Activate Plugin” button to activate the free version of ShopBuilder.
Note: Your WooCommerce store must have Elementor pre-installed to work with the ShopBuilder plugin.
Now, you need to insert the plugin license key to use all ShopBuilder’s features without any hassle. So, navigate to your WordPress Admin Panel. Afterward, go to ShopBuilder > License.
Now, put your license key in the “Licence key” field and press “Activate Licence” button.
You’re now all set to utilize the sticky add-to-cart bar and other remarkable features of this plugin.
Step 3: Enable and Customize the Sticky Add-To-Cart Module
Now comes the fun part. We’ll now integrate the sticky add-to-cart bar in our WooCommerce store. To do so, we’ll head to our WordPress Admin Dashboard > ShopBuilder > Settings.
Hit ‘Modules‘ tab.
You’ll now see all ShoBuilder’s modules. Click “Sticky Add-To-Cart” module.
A pop-up will appear. Toggle on “Enable Sticky Add-To-Cart?” switch to view this module’s settings.
You’ll now notice the settings of the sticky add to cart bar.
Using them, you can adjust the sticky bar’s position, determine when it should appear, customize the sticky bar’s animation, rename the ‘Add to Cart’ button label, control the cart element’s visibility, and modify the colors and fonts of the sticky bar and its content according to your preferences.
Therefore, explore these settings and refer to the documentation if necessary. Once you’re done with the customization, click “Save Changes” button.
Now, visit a single product page and scroll down to see the effect.
That’s how easily you can display a sticky add to cart bar on your WooCommerce store with ShopBuilder.
Method 2: Add a Sticky Add to Cart on Your WordPress Store Without a Plugin
This method is suitable for advanced WordPress users who prefer not to use a plugin to display the sticky bar on their WooCommerce store.
Before you begin with this technique, we recommend taking a full backup of your store and familiarizing yourself with using a child theme. Let’s get started.
Step 1: Access Your Child Theme’s Functions File
Since we’ll be using a custom code snippet to display a sticky ‘Add to Cart’ bar on our store, we need to implement this code in our child theme’s functions file so that it is not lost when the main theme file is updated.
Thus, to access the functions file of a child theme, we need to use the “Theme File Editor” submenu, which can be found under the “Appearance” menu. However, you can spot that submenu under the ‘Tools‘ menu if you use a block theme.
We use a classic theme. That’s why we navigate to WordPress Admin Panel > Appearance > Theme File Editor.
Then, hit the “functions.php” file on the right side panel.
Now copy the code snippet below, paste it inside the theme file editor box, and hit “Update File” button.
Here’s the code snippet.
// Add sticky Add to Cart button on single product pages by RadiusTheme
add_action('wp_footer', 'custom_sticky_add_to_cart_button');
function custom_sticky_add_to_cart_button() {
if (is_product()) {
global $product;
if (!$product) return;
// Get product details
$product_id = $product->get_id();
$product_type = $product->get_type();
$button_text = __('Add to Cart', 'woocommerce');
$ajax_class = $product->supports('ajax_add_to_cart') ? 'ajax_add_to_cart' : '';
// Output sticky button HTML
?>
<div id="sticky-add-to-cart" class="sticky-add-to-cart" style="display: none;">
<div class="sticky-product-info">
<span class="sticky-product-title"><?php echo esc_html($product->get_name()); ?></span>
<span class="sticky-product-price"><?php echo $product->get_price_html(); ?></span>
</div>
<?php if ($product_type === 'simple') : ?>
<button type="button"
class="button alt sticky-add-to-cart-button <?php echo esc_attr($ajax_class); ?>"
data-product_id="<?php echo esc_attr($product_id); ?>"
data-quantity="1">
<?php echo esc_html($button_text); ?>
</button>
<?php elseif ($product_type === 'variable') : ?>
<a href="#product-<?php echo esc_attr($product_id); ?>"
class="button alt sticky-add-to-cart-button select-options">
<?php _e('Select Options', 'woocommerce'); ?>
</a>
<?php endif; ?>
</div>
<style>
.sticky-add-to-cart {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
display: flex;
align-items: center;
z-index: 1000;
max-width: 600px;
width: 90%;
}
.sticky-product-info {
flex: 1;
margin-right: 20px;
}
.sticky-product-title {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
.sticky-product-price {
color: #777;
}
.sticky-add-to-cart-button {
background: #0073aa;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
text-decoration: none;
}
.sticky-add-to-cart-button:hover {
background: #005177;
}
@media (max-width: 768px) {
.sticky-add-to-cart {
flex-direction: column;
text-align: center;
}
.sticky-product-info {
margin-right: 0;
margin-bottom: 10px;
}
}
</style>
<script>
jQuery(document).ready(function($) {
// Show/hide sticky button based on scroll position
const originalButton = $('.single_add_to_cart_button');
const stickyButton = $('#sticky-add-to-cart');
if (originalButton.length && stickyButton.length) {
$(window).on('scroll', function() {
const buttonOffset = originalButton.offset().top;
const scrollPosition = $(window).scrollTop();
const windowHeight = $(window).height();
if (scrollPosition > buttonOffset - windowHeight + 100) {
stickyButton.fadeIn();
} else {
stickyButton.fadeOut();
}
});
}
// Handle AJAX add to cart for simple products
$('.sticky-add-to-cart-button.ajax_add_to_cart').on('click', function(e) {
e.preventDefault();
const $this = $(this);
const product_id = $this.data('product_id');
const quantity = $this.data('quantity');
$this.addClass('loading');
$.ajax({
url: wc_add_to_cart_params.ajax_url,
type: 'POST',
data: {
action: 'woocommerce_ajax_add_to_cart',
product_id: product_id,
quantity: quantity
},
success: function(response) {
if (response.success) {
$(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $this]);
}
},
complete: function() {
$this.removeClass('loading');
}
});
});
// Scroll to variations for variable products
$('.sticky-add-to-cart-button.select-options').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
});
});
</script>
<?php
}
}
// Enqueue WooCommerce AJAX scripts
add_action('wp_enqueue_scripts', 'enqueue_woocommerce_ajax');
function enqueue_woocommerce_ajax() {
if (is_product()) {
wp_enqueue_script('wc-add-to-cart', plugins_url('/woocommerce/assets/js/frontend/add-to-cart.min.js'), ['jquery'], WC_VERSION, true);
wp_localize_script('wc-add-to-cart', 'wc_add_to_cart_params', [
'ajax_url' => admin_url('admin-ajax.php'),
'wc_ajax_url' => WC_AJAX::get_endpoint('%%endpoint%%'),
]);
}
}
?>That’s it! You can now visit a single product page to see the outcome.
Frequently Asked Questions (FAQs)
What Does “Sticky Add to Cart” Mean?
A “Sticky Add to Cart” button is a feature on a product page that stays fixed on the screen as you scroll. It allows you to quickly add items to your cart without having to scroll back up, making shopping extremely convenient.
Is Sticky Add to Cart Good?
Yes, a Sticky Add to Cart button is usually great! It makes shopping smoother by keeping the “Add to Cart” button right there as you scroll. No need to hunt for it, so you’re more likely to complete your purchase. It’s convenient on mobile, where scrolling can feel like a chore.
Do Sticky Bars Work with Variable Products?
Yes, sticky bars work with variable products. However, it depends on the WordPress plugin you use. Some plugins’ sticky bars work with variable products, while others’ sticky add-to-cart bars fail to function. Hence, wisely select your plugin.
Our Concluding Thoughts
Now you know how to add sticky add to cart bar for WooCommerce stores. This article explains two methods for accomplishing this task. One is a beginner-friendly way and the other is appropriate for experts.
Therefore, choose the method with which you are more comfortable. If you ask us, we recommend always using the first method, which involves adding a sticky bar to your WooCommerce store via a plugin. This method is easy to follow and ensures a guaranteed and positive outcome. So, go for it.
