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.
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.
Note:
- Please ensure to enable the Bullets option (Pricing Tables Settings -> Content -> Elements -> Show Bullet).
- 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 (-).
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.
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.
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.