Enabling a sticky add to cart button is a great way to ensure that your customers can easily add a product to the cart from anywhere on a WooCommerce product page.
The button also nudges undecided visitors toward buying your products.
Since WooCommerce doesn’t offer a native sticky add to cart feature, you need to use a plugin or a theme to add that functionality to your store.
In this tutorial, I’ll show you how to add sticky add to cart buttons to your WooCommerce website using either the Merchant Pro plugin or the Botiga theme.
Before we dive into the tutorial, it’s worth noting that the Merchant Pro plugin is compatible with all WooCommerce themes and it’s the primarily recommended method. However, if you are also looking for a new theme, then Botiga is the way forward.
Let’s get started.
Add Sticky Add To Cart Buttons Using the Merchant Pro Plugin
To display sticky add to cart buttons in your WooCommerce store using Merchant Pro, you need to take the following steps:
1. Install and Activate the Free Merchant Plugin
You will need both the free and premium Merchant plugins to enable the add to cart functionality.
The free Merchant plugin is a powerful WooCommerce tool offering the ability to add a ton of features to your store, including a Buy Now button, an animated add to cart button, quick view modals, payment logos, trust badges, and more.
However, to add sticky add to cart buttons to your WooCommerce pages, you’ll need the Merchant Pro plugin. As it relies on the free plugin, you need to have the free Merchant plugin installed before activating the Pro plugin.
To get the free Merchant plugin, open this page and hit the Free Download option. The plugin will be downloaded into your local computer.
Install and activate the plugin by opening your WordPress dashboard and going to Plugins → Add New → Upload Plugin:
2. Install and Activate the Merchant Pro Plugin
The Merchant Pro plugin comes at an annual cost of $79 for a single license. Purchase the plugin, download it to your local computer, and install and activate it in your store in the same way you installed the free plugin in the previous section.
After installation, a Merchant option should appear in the sidebar of your WordPress admin area. Select it, then go to Merchant Settings → License Activation and enter your license code to activate the premium plugin.
The license code can be found in your aThemes account or in the welcome email sent by aThemes to your registered email address:
3. Enable Sticky Add To Cart Module
To enable the Sticky Add to Cart module, go to Merchant → Convert More → Sticky Add to Cart:
Inside the Sticky Add to Cart module, you should see a blue Enable button on top of the page. Click it to enable the module:
4. Preview and Configure Your Sticky Add To Cart Button
After enabling the module, you can preview what the sticky add to cart button looks like on your product pages by clicking the Preview option located next to the Enabled button:
If you don’t like what the button looks like, modify its style and settings from the module’s page.
Under Settings, you can change the position of the button, set display rules, display the button only on desktop, mobile, or table, and hide the product images, titles, and prices — among other things:
Under Style, you can change the colors (such as border, background, content, and title colors) of the sticky add to cart buttons:
Be sure to save your configurations using the Save button located at the top of the page before exiting the module.
And — that’s it. You have now added sticky add to cart buttons to your WooCommerce product pages using the Merchant Pro plugin:
Add Sticky Add To Cart Buttons Using the Botiga Theme
To enable the add to cart functionality using the Botiga theme, you need to take the following steps:
1. Install and Activate the Free Botiga Theme
Botiga is a free WooCommerce theme while Botiga Pro is a premium plugin that extends the theme with advanced functionalities.
You will need both the theme and the plugin to enable the sticky add to cart WooCommerce buttons on your site.
Our Botiga theme is one of the most popular free WooCommerce themes in the market. You can download it from here or find it in the official WordPress theme repository.
Then, open your WordPress dashboard and go to Appearance → Themes → Add New → Upload Theme.
Click the Choose File button to upload the theme, then hit the Install Now button. Once the theme is installed, click the Activate button:
Alternatively, you can go to Appearance → Themes → Add New, enter “Botiga” into the search bar, and click the Install and Activate buttons:
2. Install and Activate the Botiga Pro Plugin
Botiga Pro is a premium WordPress plugin that adds extra functionalities to the free Botiga theme.
It gives you access to many impressive features, including size charts, audio and video galleries, mega menus, pre-designed starter sites, sticky add to cart buttons, and more.
Since Botiga Pro is a premium plugin, you need to purchase it here before uploading it to your WordPress site (pricing starts at $79 a year).
Once you have the plugin, go to your WordPress dashboard and navigate to Plugins → Add New → Upload Plugin. Use the Choose Files option to upload Botiga Pro, then click the Install and Activate buttons to install the plugin on your site.
Next, the license key has to be activated.
Copy the license key from your Botiga account at athemes.com, then go to Botiga → Settings → General. Enter the license key and click the Save Changes button to activate the plugin:
3. Import a Starter Site (optional)
Starter sites are ready-made websites that you can import into your WooCommerce store. Botiga Pro offers a number of well-designed, powerful starter sites for various eCommerce niches.
Although importing a Botiga starter site is optional, I recommend that you install one because it will give your WooCommerce store a professional look that you can further customize to meet your needs.
Preview the starter sites by going to Botiga → Starter Sites and clicking the Preview button below the starter site of your choice.
When you find a website that you like, hit the Import button:
As soon as you do that, a popup will appear showing you the elements (e.g. content, widgets, Customizer settings, etc.) that the demo installer will add to your WooCommerce website. You have the option to deselect any of the elements, but I recommend keeping them all.
You can also choose between importing the entire starter site (including the content, images, etc.) or just a placeholder (i.e. the layout of the site):
It will take a few minutes for the demo installer to complete the import process.
4. Enable the Product Sticky Add to Cart Module
After installing the plugin and importing the starter site, it’s time to add the sticky add to cart buttons to your WooCommerce product pages.
The Sticky Add to Cart module is disabled by default and needs to be enabled manually.
In your WordPress dashboard, go to Botiga → Home → Product Sticky Add to Cart and activate the module by clicking the Activate button:
That’s it. Now, you should be able to see a sticky add to cart button on each of your WooCommerce product pages.
The sticky add to cart button will appear at the bottom of the product page along with a few other details such as a thumbnail image, the price, the available colors, a product counter, and more:
5. Configure the Add To Cart Button
If you don’t like the design of the button, you can configure it according to your needs from the WordPress Customizer.
Click the Customizer link in the Product Sticky Add to Cart module or access it by navigating to Appearance → Customize → Single Product → Sticky Add to Cart:
In the Customizer, you can modify the following options:
Position: By default, the add to cart button appears at the bottom of the screen, but you can change its position to the top using this option.
Elements: As mentioned above, the add to cart button appears along with a number of other elements such as the product thumbnail image, price, color, and a product counter. To exclude any of these elements, click the eye icon next to the element you want to remove.
Elements Spacing: Here, you can define the horizontal spacing between the elements inside the sticky add to cart bar.
Hide When Scroll To Top: This option allows you to hide the sticky add to cart button when a visitor views the top of the product page (as there’s another add to cart button there).
Allow Third-Party Plugins Content: Here, you can enable Botiga to display content from third-party plugins inside the sticky add to cart bar.
Visibility: This option allows you to show the button on only desktop devices, only mobile devices, or all devices.
And — that’s it. You have now enabled the sticky add to cart button functionality in WooCommerce using the Botiga theme.
Conclusion
Adding a sticky add to cart button to your WooCommerce store is not a difficult task as long as you have access to the right tools.
Both Merchant Pro and Botiga Pro are powerful tools that can be used to add a ton of features, including stylish sticky add to cart buttons to your product pages.
Both tools are easy to use and offer several customization options so that you can modify the available features to match your site’s design.
And, both tools are built with the idea of helping websites load faster.
Get Merchant Pro or Botiga Pro and boost your store’s conversion rate today!
If you have any questions about how to add a sticky add to cart button to your WooCommerce store, let me know in the comment section below.
