Search
Close this search box.

How to Replace Bullet in Divi Pricing Tables Module with an Icon

We have to admit it that the native Pricing Tables is lack of design options compared to the ones offered by third-party Divi plugins. For instance, there is no option to add custom icon. If it matters to you, then read on. In this article, we will show you how to replace the bullet in the Divi Pricing Tables module with an icon of your choice. Without involving a plugin. This will give your pricing table a more unique and attractive look.

The Pricing Tables module itself is great to showcase your products or services with different pricing plans. You can add this module to any area on your page. Let’s dive into how to add custom icon to the module.

Final result of the tutorial

Steps to Change Bullet in Divi Pricing Table Module with an Icon

Step 1: Add the Pricing Tables Module

Go to the Divi Builder by creating a new post type (page/post) or selecting the existing one. Afterward, add the Pricing Table module to the canvas area, and then you can tweak and style up your Pricing Table module as you like.

Pricing table example without icon

Note:

  • Please ensure to enable the Bullets option (Pricing Tables Settings -> Content -> Elements -> Show Bullet).
Enabling bullet option in Divi Builder
  • For this example, we add some excluded pricing items for specific plans (Light and Pro). This is important because we will change the bullets on the pricing items to icons (checklist or cross-mark) according to the availability of the features in the pricing plan. To add an excluded pricing item, simply start the text with a minus symbol (-).
Adding symbol to pricing table in Divi

Step 3: Add the CSS Class

Next, we will add the CSS class to the Pricing Tables module.

Go to the Advanced tab -> CSS ID & Classes in the module settings. Afterward, add wpp-pricing-icon to the CSS Class input field.

Adding CSS class in Divi Builder editor

Step 3: Add the CSS Snippet

Next, we will add the CSS snippet to your site. You can add the CSS snippet to your Divi Theme Options page (Divi -> Theme Options-> Custom CSS) or your current page from the Page Settings. For this example, we will put the code in the Page Settings.

Go to the Page Settings (⚙️) -> Advanced tab. Afterward, copy the simple CSS snippet below and paste it into the Custom CSS input field.

.wpp-pricing-icon ul {
    list-style-type: none!important;
    }
    
.wpp-pricing-icon ul li:before {
    content: '\e052'!important;
    color: #2cba6c;
    font-family: 'ETMODULES'!important;
    margin-right: 10px;
    margin-left: -14px;
    font-size: 1.2em!important;
    }

.wpp-pricing-icon ul li.et_pb_not_available:before {
    content: '\e051'!important;
    color: #e03574!important;
    font-family: 'ETMODULES'!important;
    margin-right: 10px;
    margin-left: -14px;
    font-size: 1.2em!important;
    }

The Code Explanation:

The CSS snippet changes the bullet in the Divi Pricing Tables module with an icon from the ETMODULES. ETMODULES is Divi’s built-in icon collection that uses specific Unicode characters to represent these icons and applies to styles like color and font weight to make them stand out.

Click& here to learn more about Divi’s built-in icon collection and how to insert Unicode into the CSS snippet.

The CSS snippet also sets the color, size, and margin of the icon according to the availability of the features in the pricing plan.

Adding custom CSS in Divi Builder editor

That’s it. As you can see from the image above, once you’ve added the CSS snippet to the page, the bullets in Divi Pricing Tables are changed to the icons (checklist and cross-mark) according to the availability of the features in the pricing plan.

The Bottom Line

This article shows how easily you can change the bullet on the Divi Pricing Tables module with the icon by using the power of custom CSS and a dash of creativity. Remember, the possibilities are endless! Experiment with different icons, colors, and sizes to create visually stunning pricing tables that perfectly reflect your brand and engage your web visitors.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to turn your WordPress knowledge into revenue? OF COURSE!

Leave a Comment

Share This
Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.