Divi Woo modules

Divi’s Woo modules: Sticky Bars continue to be a popular element of web design. They’re great for boosting conversions by keeping calls to action cutting-edge 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’ll create a sticky bar that includes the “Add to Cart” button so that it stays visible when the user scrolls down the page. Additionally, we are also going to create a cart notification 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 drive conversions by keeping those crucial CTA’s insight.

Divi Woo modules

Divi’s Woo modules

Part 1: Designing the Adhesive Bar on a Product Page

We are going to use a simple simulated product for this example, so you need to create a new product or edit an existing product. Product information is not important for this tutorial. Make sure you have the basics like product title, price, description, picture, etc.

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

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

Line parameters

Before adding modules, update the row parameters as follows:

  • Background Color: # 333333
  • Use a custom gutter width: YES
  • Gutter width: 1
  • Width: 100%
  • Padding: 0px Top, 0px Bottom

Make the line sticky

To make the line sticky, add the following custom CSS code to the main desktop element:

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

Then add the following CSS code to the same main element for the tablet display:

top: 0px;

If you are unfamiliar with the “position: sticky” CSS property, this is sort of a mix between the fixed position and the relative position where the element (in this case the line) will scroll with its container until it reaches a designated position at the top or bottom of the page (or the specified offset). In this example, we set the offset to 50px from the top of the browser window (leaving room for the height of a default fixed header on the desktop). Then, on a tablet, the offset is changed to “top: 0px” to correct the adhesive line/bar at the top of the browser on mobile.

Note: Ignore any errors you see when you add CSS to the box.

The code will work fine. After you CSS, update the Z index as follows:

  • Z index: 10

Now the line will become sticky as the user scrolls through the product page.

Custom CSS column

Before we start to fill the row with content, we need to make sure that 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;

It takes care of our sticky line design. Now we need to fill the row with content.

Add Woo Title

Add a new Woo title module to the sticky row column.

Then update the settings as follows:

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

Add price woo

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

Then update the Woo Price settings as follows:

  • Price Text size: 28px (desktop), 20px (tablet), 16px (phone)
  • Width: 30%
  • Padding: 2vw on top, 2vw on bottom, 2vw on the left, 2vw on the right
  • Right border width: 1px
  • Right border color: # 777777
  • Left border width: 1px
  • Left border color: # 777777

Add a module Add to cart

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

Then update the settings as follows:

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

  • Show quantity field: OFF (tablet)
  • Show Stock: OFF
  • Text alignment: right
  • Use custom styles for Button: YES
  • Button text size: 18px (tablet), 14px (phone)
  • Button Text Color: #ffffff
  • Button background color: # 0c71c3
  • Button border width: 0px
  • Width: 40%
  • Padding: 2vw on the left, 2vw on the right

Part 2: Create a cart notification bar

Creating an adhesive cart notification bar involves a few simple steps, but the result can be extremely effective. As you may already know, the cart notice only appears when a user clicks the “Add to cart” button. But it’s the next crucial step in the buying process that takes users to the checkout page. Thus, when the cart notice appears as an adhesive bar at the bottom of the window, it is more visible to the user.

To create the cart notification 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

Make the line sticky by adding the following custom CSS to the main element:

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

Note: As we did previously, you can ignore the errors that appear when adding the position: sticky property.

The row will stay glued to the bottom of the window when scrolling up.

Then update the z index to keep it in the foreground, like so:

  • Z index: 10

Read more: How to create a responsive accordion slider in Divi

Add the cart notification module

Once you’ve created the row, add the Woo Cart Reviews module to the row and update the settings as follows:

  • Text size (phone): 15px
  • Margin: 0em down

That’s it! Whether or not you want to remove the default cart warning item at the top of the page is up to you, but it might be a good idea to leave it for better conversions.

Final thoughts on Divi’s Woo modules

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

 

For website maintenance service contact us.

Leave a comment

echo "";