How to make a Sticky Footer for WooCommerce sites

how to make a sticky footer

Do you want a sticky footer on your WooCommerce site? Yeah, that’s a good idea. Like a sticky header, once you build a sticky footer, it is always in view regardless of whether visitors scroll up/down or move through the store.

If you can create a sticky footer bar in WooCommerce, this feature will be so meaningful for your store. It is regarded as a useful way to improve website navigation. Apart from reducing bounce rate, designing such a footer will help increase conversion rates, improve customer experiences, and boosts sales.

You find that your WooCommerce store needs a simple sticky footer and wants to learn how to build it. Oh, you have come to the right place.

Some of you will think of Elementor Sticky Footer that can help you create a sticky footer using Elementor. But it is not the solution we want to mention here.

Right here, we will introduce you to how to make a WooCommerce sticky footer with Woostify Sticky Footer Bar. It requires you just some simple steps.

Let’s scroll down to get it in detail!

This feature does exactly what it says on the tin. It is the footer designed to stick to the bottom of the page. Your customers will see this sticky footer bar at the bottom of the screen at all time. The purpose of building that kind of footer is to draw the attention of customers and make them click on the elements displaying on the bar to move to another page of your site.

That being said, it is noted that a sticky footer for WooCommerce is a bit different from the ones for other WordPress sites. A regular WordPress sticky footer displays aimed at building an email list or driving users to other blog posts for more traffic while a WooCommerce sticky footer is often used for the purpose of sales.

Here’s an example of the sticky footer in WooCommerce.

what is a sticky footer

All the sticky bars play very important roles in website navigation. Especially, they work very well on actionable websites The sticky footer bar also does the same task.

As the owner of a WooCommerce store, you will want to use this footer bar to:

  • suggest a list of products from the shop page
  • show customers their wishlist
  • encourage customers to search more products
  • let customers see what they are having in their cart

Here are some popular things you can make with a sticky footer bar. Despite being different ways to encourage customers to action, all of them are for the purpose of introducing more products and improving customer experiences. After all, the final goal is to increase conversion rates and sales.

As you can see, a sticky footer bar can help a lot. So now, certainly you will want to ask how can you create such a powerful footer for WooCommerce. Of course, there will be some tools that can do it for you.

Elementor is a very popular WooCommerce page builder that provides users with numerous customization options. Therefore, many WooCommerce store owners consider the Elementor Sticky Footer feature the best choice that helps build the footer bar sticking to the bottom of their WooCommerce pages.

In fact, Elementor offers powerful functionalities of customizing WooCommerce headers and footers and creating sticky headers. Most users seem very satisfied with these features.

The option to build a standard Elementor Sticky Footer is also available for use. That being said, it is not regarded as the best choice for creating a sticky footer bar for WooCommerce because it requires you to take a lot of steps. Then, it will take you much time to complete your expected footer.

We bet that you won’t love this inconvenience, right?

Anyway, don’t worry. Now in this article, we will show you only one time-saving method to stick the footer to the bottom of the WooCommerce page.

Let’s come to the main part to learn how to make it!

To help WooCommerce store owners bring their customers better shopping experiences, the Woostify team has released a new great feature called Sticky Footer Bar.

With this feature, a responsive sticky footer bar will be displayed on any pages of your WooCommerce store. Here you also find the suggested elements for display at the bottom of your site. Once clicking on them, your customers will be navigated anywhere through your WooCommerce store, including shop page, single product page, cart page, or checkout page.

Therefore, a sticky floating footer bar like that will considerably contribute to improving site navigation. Thanks to it, you can make your customers stay longer in your store and lead them to the targeted place. If you can identify customer habits to build the target link properly for the footer, your customers certainly will feel excited to go around your store, which helps increase the conversion rate.

Main features

  • Enable or disable the feature with only one click
  • Offer numerous customization and design options
  • Select any WooCommerce pages to hide the sticky footer bar
  • Suggest specific items to show on the footer bar
  • Give a list of item icons to choose from
  • Insert target links to navigate your customer’s journey

Pros and cons

Like any other WooCommerce add-ons and plugins, Woostify Sticky Footer Bar comes with both advantages and disadvantages. You should consider them carefully to use the add-on properly.

Please have a look at the table below:

Work well with Woostify themeDon’t work well with other themes
Allow customizing built-in elementsCannot add more elements to your sticky footer bar
Deliver good performance on different devices

In this part, we will show you how to create a sticky footer for WooCommerce from A to Z. But before exploring this process, please check out what you should do with a sticky footer first.

To make your sticky footer awesome in the eyes of customers and bring sales success, you need to:

  • focus on the necessary elements that can help navigate through the website and bring great value to customers;
  • make the sticky bar appealing: consider design the appropriate colour, size, icon, and space for the bar and the elements so that they blend together perfectly and match other sections of the page;
  • ask customers for feedback on the feature or track the user behavior with a research tool

It is advisable to keep these points in mind while building the sticky footer bar for WooCommerce. Then, you can obtain considerable benefits from it.

Next, go to the step-by-step guide to creating a WooCommerce sticky footer.

Step 1: Become a Woostify user

As mentioned above, Sticky Footer Bar is the feature offered by the Woostify team. Therefore, only when you become a user of Woostify theme can you use this feature.

Simply go to the website of Woostify, then download the theme for free.

alternative to Elementor sticky footer

After upgrading the theme to Woostify pro, you enable the feature.

In your dashboard, select Appearance > Customize.

how to make a sticky footer

After being taken to the customizer interface like that, you select Layout.

how to stick footer to bottom of page

Continue to select Sticky Footer Bar.

sticky footer plugin

And enable the feature. Then, you will see the screen as below:

WooCommerce sticky footer

After clicking on Enable button, you can start to build a sticky footer bar.

In the General tab, there are several options to hide the footer. They are:

  • Hide when scroll
  • Hide on Product Single Page
  • Hide on Cart Page
  • Hide on Checkout Page
alternative to Elementor sticky footer

If you select any of them, your footer bar will act as the option says. For example, you can select Hide on Cart Page and Hide on Checkout Page if you find that these two pages are not ideal places for a sticky footer to work.

Next, you can choose the types of device you want your sticky footer to display on. The feature offers three options:

  • Desktop
  • Mobile
  • Desktop +Mobile

As usual, we will want both of them, meaning select Desktop + Mobile.

Be still in the General tab, you go to the Items section to build your sticky footer bar.

There will be 4 items available for you to add to your sticky footer bar, including Shop, Wishlist, Search, and Cart. If you want any of them invisible, then click on the eye icon in the small square located on the left of the item.

For each item, you will have several options to customize:

  • Type: select the type of the item from 4 options: Custom (often used for the Shop item), Wishlist (used for the Wishlist item), Cart (used for the Cart item), Search (used for the Search item), and Shortcode (used for the Shortcode item).
  • Icon: click on the Select button and simply select the icon for the item. And click on the Clear button if you want to remove it
  • Name: type the name of the item
  • Link: add your navigation link. You only can change the link if you select the Custom type for the item.

Move to the Design tab. Here you can change the appearance of the footer as you like.

  • Background color
  • Icon color
  • Icon hover color
  • Text color
  • Text hover color
  • Icon size
  • Icon spacing
  • Text font size
  • Text font weight
  • Spacing

It is noted that you need to ensure the appropriate contrast between text, icon, background, and the whole page to highlight the bar. Besides, the size of all the elements and space between them need calculating properly for a balance in design.

This is the last step. After completing the footer customization, you check how the sticky footer bar display on desktop, tablet, and mobile. Especially, you should take notice of your priority device. If the footer bar does not display as you want, then customize and check it again.

If you feel satisfied with the bar, click the Publish button to save your changes.

Finally, see how the sticky footer works on your WooCommerce store.

sticky footer example

For a final word,

Like other sticky elements, a sticky footer is so useful for your WooCommerce store. Built with special features, this bar makes it easy to navigate the site, thus improving customer experience and sales conversion rates.

If you want to find a sticky footer plugin that helps you make a responsive sticky footer bar in WooCommerce, then consider using the Woostify add-on. It can be regarded as the best alternative to Elementor sticky footer. Hope that our step-by-step guide can help you a lot.

Thanks for spending time on our article. If you have any ideas or queries, please let us know. We are so happy to hear from you.

Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x

stay informed!

Subscribe to receive exclusive content and notifications