How to Design Sticky Bars for Product Pages with Divi’s Woo Modules

October 15, 2019

Sticky Bars continue to be a popular element in web design. They are great for boosting conversions by keeping CTAs at the forefront without being as intrusive as popups.

In this use case, we are going to design a sticky bar for WooCommerce products using Divi’s Woo Modules. The sticky bar can include any Divi module. For this tutorial, we are going to create one sticky bar that includes the “Add to Cart” button so that it remains visible as the user scrolls down the page. Plus, we will also create a sticky cart notice bar so that users will always see the “view cart” button once the “Add to Cart” button is clicked.

These sticky bar elements will help boost conversions by keeping those crucial CTAs in view.

Let’s get started!

Sneak Peek

Here is a quick look at what we will be designing in this use case tutorial.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules Theme Builder Layout

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules Theme Builder Layout

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-1 Theme Builder Layout

Download the Sticky Bars Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.

Let’s get to the tutorial shall we?

What You Need to Get Started

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme installed (or the Divi Builder Plugin if not using the Divi Theme).
  2. Install and activate the WooCommerce plugin. If it is the first time setting up WooCommerce, you will need to run through the basic setup wizard to get your store ready. Once done, you are ready to add your new products.
  3. Create a few products if you don’t have any yet. For more info on how to add a new product, check out this tutorial.

After that, you will have a blank canvas to start designing in Divi.

Part 1: Designing the Sticky Bar on a Product Page

We are going to use a mock simple product for this example, so you need to create a new product or edit an existing product. The product information isn’t important for this tutorial, just make sure you have the basics like Product Title, Price, Description, Image, etc…

Once you have a simple product ready, click to edit the product on the backend and deploy the Divi Builder on the product page. Under Divi Page Settings, select “Fullwidth” for the Page Layout and then click “Build On the Front End”.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules Theme Builder Layout

The product page should look similar to this.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-1 Theme Builder Layout

Under the first row containing the breadcrumbs and the cart notice, add a new row with a one-column layout.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-2 Theme Builder Layout

Row Settings

Before adding any modules, update the row settings as follows:

  • Background Color: #333333
  • Use Custom Gutter Width: YES
  • Gutter Width: 1
  • Width: 100%
  • Padding: 0px Top, 0px Bottom

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-3 Theme Builder Layout

Making the Row Sticky

To make the row sticky, add the following custom CSS to the Main Element for Desktop:

position: -webkit-sticky !important; position: sticky !important; top: 50px; 

Then add the following CSS to the same Main Element for Tablet display:

top: 0px; 

If you aren’t familiar with the “position: sticky” css property, basically it is kind of a blend between the fixed position and the relative position where the element (in this case the row) will scroll along with its container until it reaches a designated position at the top or bottom of the page (or the offset specified). In this example, we are setting the offset to be 50px from the top of the browser window (leaving room for the height of a default fixed header on desktop). Then on tablet, the offset is changed to “top: 0px” in order to fix the row/sticky bar at the top of the browser on mobile.

NOTE: Ignore the errors that you see when adding the CSS to the box. The code will work fine.

After you the CSS, update the Z Index as follows:

  • Z Index: 10

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-4 Theme Builder Layout

Now the row will become sticky as the user scrolls down the product page.

Column Custom CSS

Before we start filling the row with content, we need to make sure the module inside our one-column row will align horizontally instead of vertically. We can use a simple CSS trick to do this with the flex property. Open the column settings and add the following custom CSS to the main element:

display:flex; align-items:center; 

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-5 Theme Builder Layout

That takes care of our sticky row design. Now, we need to fill the row with some content.

Add Woo Title

Add a new Woo Title Module to the column of the sticky row.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-6 Theme Builder Layout

Then update the settings as follows:

  • Title Text Color: #ffffff
  • Title Text Size: 28px (desktop), 20px (tablet), 16px (phone)
  • Width: 30%
  • Padding: 2vw top, 2vw bottom, 2vw left, 2vw right

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-7 Theme Builder Layout

Add Woo Price

Next, add a woo price module by clicking the gray plus icon that appears when hovering over the woo title module you just created.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-8 Theme Builder Layout

Then update the Woo Price settings as follows:

  • Price Text Size: 28px (desktop), 20px (tablet), 16px (phone)
  • Width: 30%
  • Padding: 2vw top, 2vw bottom, 2vw left, 2vw right
  • Right Border Width: 1px
  • Right Border Color: #777777
  • Left Border Width: 1px
  • Left Border Color: #777777

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-9 Theme Builder Layout

Add Woo Add to Cart Module

For the last piece of content, add a Woo Add to Cart Module right after the Woo Price module.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-10 Theme Builder Layout

Then update the settings as follows:

Simplify the Add to Cart element by hiding the stock amount and the quantity field on mobile.

  • Show Quantity Field: OFF (tablet)
  • Show Stock: OFF

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-11 Theme Builder Layout

  • Text Alignment: Right
  • Use Custom Styles for Button: YES
  • Button Text Size: 18px (tablet), 14px (phone)
  • Button Text Color: #ffffff
  • Button Background Color: #7ac5af
  • Button Border Width: 0px

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-12 Theme Builder Layout

  • Width: 40%
  • Padding: 2vw left, 2vw right

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-13 Theme Builder Layout

Result

Now let’s check out what it looks like on the live page.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-2 Theme Builder Layout

And here it is on mobile.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-3 Theme Builder Layout

Part 2: Creating a Cart Notice Sticky Bar

Creating a cart notice sticky bar actually involves just a few simple steps, but the result can be extremely effective. As you may already know, the cart notice only appears after a user clicks the “Add to Cart” button. But it is the next crucial step in the buying process that leads users to the checkout page. So when the cart notice pops up as a sticky bar at the bottom of the window, it is more noticeable to the user.

To create the cart notice sticky bar, first create a new one-column row at the bottom of the product page. Then update the row settings as follows:

  • Width: 100%
  • Padding: 0px top, 0px bottom

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-14 Theme Builder Layout

Then make the row sticky by adding the following custom CSS to the main element:

position: -webkit-sticky !important; position: sticky !important; bottom: 0px; 

NOTE: As we did earlier, you can ignore the errors that popup when adding the position: sticky property.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-15 Theme Builder Layout

This will make the row stick to the bottom of the window when scrolling upward.

Then update the z index to keep it at the forefront as follows:

  • Z Index: 10

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-16 Theme Builder Layout

Add the Cart Notice Module

Once you have created the row, add the Woo Cart Notice Module to the row and update the settings as follows:

  • Text Text Size (phone): 15px
  • Margin: 0em bottom

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-17 Theme Builder Layout

That’s it! It’s up to you whether or not you want to erase the default cart notice element at the top of the page, but it might be a good idea to leave it for better conversions.

Final Result

Here is the final result with the two sticky bars in place.

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules Theme Builder Layout

Desktop

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules Theme Builder Layout

Mobile

how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules-1 Theme Builder Layout

Final Thoughts

Hopefully this post will help us understand how to create sticky bars for our product pages in Divi. We covered how to create a sticky bar that includes a product title, price, and add to cart button. And we also showed how to create a cart notice sticky bar. Both of these should help the buying process and boost conversions. And we don’t even need a plugin!

Feel free to explore new ways to use product page sticky bars on your own site.

We look forward to hearing from you in the comments.

Cheers!


Source

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

4-elements-of-a-successful-promotional-video Theme Builder Layout

4 Elements of a Successful Promotional Video

Promotional videos are nothing new. Television ads have been running since the early 1940s. The format and delivery channels might have changed, but this marketing technique is still all about brand awareness and sales. If you incorporate the right elements, you can...

movable-type-vs-wordpress-in-2019-a-detailed-comparison Theme Builder Layout

Movable Type vs WordPress in 2019: A Detailed Comparison

WordPress has evolved a lot since its early days. The last two years, in particular, have brought massive changes including the Block Editor. Other platforms, such as Movable Type, have stuck to their roots of accessibility and ease of use for bloggers. With that in...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.