How to Add Sticky Add To Cart in WooCommerce in 2023

Adding a sticky add-to-cart button to your WooCommerce product pages is a great way to ensure that your customers can easily add a product to their cart from anywhere on the page. It also nudges undecided visitors toward buying your products. 

A sticky add-to-cart button could, therefore, boost your site’s customer satisfaction and conversion rates.

WooCommerce doesn’t offer a native sticky add-to-cart feature. However, you can use a plugin, such as Botiga Pro, to provide the functionality.

In this tutorial, I’ll show you how to add sticky add-to-cart buttons to your WooCommerce product pages. 

1. Install & Activate the Botiga WooCommerce Theme 

Botiga is a free WooCommerce theme while Botiga Pro is a premium plugin that extends the theme with advanced functionality.

You’ll need both the theme and the plugin to add sticky add-to-cart WooCommerce buttons to your site.

Our Botiga theme is one of the most popular free WooCommerce themes in the market.

You can download it 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:

Uploading the Botiga theme in WordPress, screenshot

Alternatively, you can go to Appearance > Themes > Add New, enter “Botiga” into the search bar, and click the Install, then the Activate buttons:

Installing and activating the Botiga theme

2. Install & Activate the Botiga Pro Plugin 

Botiga Pro is a premium WordPress plugin that adds extra functionality 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’ll need to purchase it here before uploading it to your WordPress site (pricing starts at $69 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, you’ll need to activate your license. Copy the license key from your Botiga account, then go to Botiga > Settings > General. Enter the license key and click the Save Changes button to activate the plugin:

Botiga Pro license key

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, and you can also choose to start designing your store from scratch using Botiga’s customization options, I recommend that you go ahead with it because it will give your WooCommerce store a professional look (that you can still further customize). 

You can check out the starter sites by going to Botiga > Starter Sites and preview each site using the Preview button. 

When you find a site that you like, hit the Import button:

Botiga Pro's starter sites in the WordPress dashboard

As soon as you do so, a popup will appear showing you the elements (e.g. content, widgets, Customizer settings, etc.) that the demo installer will add to your 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 (which refers to the layout of the site):

Importing a Botiga starter site

It will take a few minutes for the demo installer to complete the import process.

4. Enable the 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 Product Sticky Add to Cart feature is disabled by default and needs to be enabled manually.

In your WordPress admin area, go to Botiga > Home. Here, you’ll find the Product Sticky Add to Cart module in the Do more with Botiga Pro section. 

Activate the module by clicking the Activate button:

Activating Botiga Pro's Sticky Add to Cart module

That’s it. Now, you should be able to see a sticky add-to-cart WooCommerce button on each of your product pages.

The sticky add-to-cart button appears at the bottom of the product page next to a brief product summary, including a small thumbnail image, the price, the available colors, and the number of items, inside a full-width add-to-cart bar: 

Add-to-cart button on a WooCommerce product page

5. Configure the Add-to-Cart Bar

You can customize the appearance of the add-to-cart bar from the WordPress Customizer.

You can access the relevant Customizer options from the Product Sticky Add to Cart module.

Click the Customize link in the module’s box on the Botiga > Home admin page to open the module’s settings:

Customize link on the module's admin page

Alternatively, you can access the Customizer the regular way, from the Appearance > Customize menu:

Customizer menu location in theleft sidebar of the WordPress admin area

When the Customizer opens, go to the WooCommerce > Single Product > Sticky Add to Cart section where you can modify the add-to-cart bar using the available design and layout options: 

Sticky add-to-cart options in the WordPress Customizer

You get access to the following options: 

i. Position: By default, the add-to-cart bar appears at the bottom of the screen, but you can change its position to the top using this option.

ii. 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.

iii. Elements Spacing: Here, you can define the horizontal spacing between the elements inside the add-to-cart bar. 

iv. Hide When Scroll to Top: This option allows you to hide the add-to-cart bar when the visitor views the top of the product page (as there’s another add-to-cart button there).

v. Allow Third-Party Plugins Content: Here, you can enable Botiga to show content from third-party plugins inside the add-to-cart bar. 

vi. Visibility: This option allows you to show the button on only desktop devices, only mobile devices, or all devices.

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. 

Botiga is an excellent free theme and when coupled with the powerful Botiga Pro plugin, it provides you with many advanced eCommerce features, including stylish sticky add-to-cart buttons for your product pages.

Adding a sticky add-to-cart WooCommerce button to your site with Botiga Pro is as easy as hitting the Activate button.

Customizing the add-to-cart bar is also straightforward and can be done from the live Customizer so that you can see the changes you’re making in real time. 

Do you have any questions about how to add a sticky add-to-cart button to your WooCommerce store? Let us know in the comment section below. 

Share This Article:
Facebook Twitter

Leave a Reply

Your email address will not be published. Required fields are marked *