Snippet: Display the Product Title & Price in the Divi WooCommerce Shop Module with CSS & jQuery

COMPLEXITY

Easy

TIME

10 Minutes

ASSUMPTIONS

Basic knowledge on Divi and WooCommerce.
Divi and WooCommerce are already installed and configured.
You have some products with assigned categories in WooCommerce.

VERSIONS

Divi 4.9.4
WooCommerce 5.2.2

So we’ve all seen those Shopify and SquareSpace product cards that show you the Product Title and Product Price as a cool overlay when you hover over them. Well, in this tutorial I’m going to show you how to create a Product Title and Price Overlay for your Shop Page in Divi and WooCommerce using some CSS and jQuery. It is going to look great, and your clients will love this option.

Why add the Product Title and Price as an Overlay to the Divi Shop Module?

So, let’s ignore the fact that this Divi overlay looks awesome on our WooCommerce loops, there is a deeper reason than just eye candy. Doing this focuses the users’ attention on the product image which in turn creates value and attachment before they know the price. Psychologically we have now primed our user to make the purchase even before the price is revealed. This is a great tool for products that have a greater visual impact such as art or other high-end products.

Additionally, it adds a layer of interactivity for the user which further engages them on the page. The more engaged, the more likely you are to convert with your Product Title Overlay on your Divi WooCommerce Shop Module.

Now feel free to follow along with the video, or skip to the text instructions at the bottom.

Preview:

How to create a Product Title and Price Overlay for your Shop Page in Divi and WooCommerce

Video Tutorial

Text Instructions

If you prefer to quickly copy and paste the text and settings for this tutorial, please scroll down and you will see everything as it relates to the steps found in the video tutorial.

Step 1) Create a new Page and add a Divi Shop Module

Add a Single Column Row

Add a Shop Module

Shop Module

Design Tab

Overlay

Overlay Icon Color: #0fe5a8
Overlay Background Color: rgba(84,48,206,0.75)

Title Text

Title Font: Poppins Title Font Weight: Semi-Bold Title Font Style: Uppercase Title Text Alignment: Centered Title Text Color: White Title Text Size: 18px Title Text Shadow: Option 1

Price Text

Price Font: Poppins Price Font Weight: Light Price Text Alignment: Centered Price Text Color: White Price Text Size: 18px Price Text Shadow: Option 1

Step 2) Add jQuery Code

Add a Code Module below the Shop Module

Code Module

Content Tab

Text

Code: Copy and Paste the text below into this box

PRO-TIP: To learn more about jQuery detach, check out the documentation.

Step 3) Add CSS Code

Add a Code Module below the jQuery Code Module

Code Module

Content Tab

Text

Code: Copy and Paste the text below into this box

Step 4) Add the CSS Class to the Shop Module

Let’s go back to our Divi Shop Module and head to the Advanced Tab

Shop Module

Advanced Tab

CSS ID & Classes

CSS Class: divi-engine-custom-overlay

All done!

Conclusion

That was super easy, right? Adding a Product Title and Price to your overlay in Divi WooCommerce couldn’t have been easier. Now you can go and take it a step further and modify the code to change the position of the Divi WooCommerce Product Title or Text, or you can use it as is. Things like this give you another tool in your belt and another option for your clients to help differentiate their site from the competition. For another great tutorial on adding functionality using jQuery, check out our post on How to add a CSS class to Divi on scroll with some real case examples.

Thanks for checking this Tutorial out and we will catch you in the next one!

Do you ❤️ posts like this?

Stay in the know with our latest tutorials, snippets, and valuable articles by signing up for our newsletter!

3 Comments

ghostbird on October 23, 2023 at 11:10 am

Icon Hover Color, Hover Overlay Color, Hover Icon Picker they don’t work for me. Someone help ?
Log in to Reply
Jaroslaw Golawski on February 22, 2023 at 9:48 pm

Hi, how to modify this ajax code to use using Bodycommerce ARP Product Loops instead Divi Shop module? It is possible to use it in this way also?
Log in to Reply
Eugene on March 14, 2022 at 3:29 pm

Hello, it works, but whenever filter is used, ajax, all styling drops back to the original position below the image.
Log in to Reply

Submit a Comment Cancel reply

You must be logged in to post a comment.

Explore more from Divi Engine

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Find out more

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Find out more

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Find out more

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Find out more

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Find out more

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Find out more

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active