Filtering the output of Divi Module Fields

Written by Dan Mossop

Divi uses the values entered in a module's settings to generate the HTML output for the module. While Divi provides filters to modify the module setting values before they are used, it doesn't typically provide a way of modifying the values as they are finally used in the HTML. As such, it's not possible to make changes to the way Divi processes these values. For example, if you want to include some HTML in a field (perhaps adding a span tag to allow styling of part of a module title), Divi will encode the HTML so that it is displayed to the user, rather than included as part of the page structure, and offers no easy way to change this behavior. Here's what to do about it.

Filter the Output of Module Fields using Divi Shortcode Enabler

Divi Shortcode Enabler allows you to use shortcodes in a variety of module fields, where it's not normally possible to do so. The shortcode output is placed into the module field prior to Divi generating the HTML of the page. This normally works well and allows for dynamic pages and easy integration with a many plugins. However, if the shortcode being used includes HTML in its output, as many do, this HTML will usually be displayed to the user rather than being included in the page structure as would be expected. 

To address this I've started adding a feature in Divi Shortcode Enabler which enables filtering of the final output of fields. This allows, for example, HTML in a field to be decoded in the final module output so that it becomes part of the module HTML structure, rather than just text displaying HTML tags.

Here are examples of the PHP code needed to decode HTML in various fields.

I've only added this filtering to a limited number of fields at the moment – if you need it on another field, let me know in the comments. Note that with Divi Shortcode Enabler installed, you can use these output filters, even if you aren't using shortcodes in your fields.

Accordion Module

add_filter('dbsce_accordion_item_title', 'html_entity_decode');

Button Module

add_filter('dbsce_button_button_text', 'html_entity_decode');

Contact Form Module

add_filter('dbsce_contact_form_success_message', 'html_entity_decode');

CTA Module

add_filter('dbsce_cta_button_text', 'html_entity_decode');

Pricing Table Module

add_filter('dbsce_pricing_table_button_text', 'html_entity_decode');
add_filter('dbsce_pricing_table_price', 'html_entity_decode');
add_filter('dbsce_pricing_table_frequency', 'html_entity_decode');
add_filter('dbsce_pricing_table_currency', 'html_entity_decode');
add_filter('dbsce_pricing_table_subtitle', 'html_entity_decode');
add_filter('dbsce_pricing_table_title', 'html_entity_decode');

Toggle Module

add_filter('dbsce_toggle_title', 'html_entity_decode');

We may earn a commission when you visit links on our website.

Unlock the Full Potential of Shortcodes in Divi!

Empower your Divi site with the Divi Shortcode Enabler. This plugin allows shortcodes to run effortlessly in various Divi module fields, enhancing functionality and customization across your site.

Latest Posts

Center the Lightbox Image Count in the Divi Gallery Module

Centering the image count in a gallery lightbox creates a cleaner, more balanced presentation and makes it easier for visitors to see where they are in the image set. This simple visual tweak can enhance readability, especially with larger images and longer captions,...

Style the Divi Gallery Module Lightbox Image Count

Tailor the appearance of the image counter in the Divi Gallery module lightbox to match your brand and improve readability. By customizing the counter’s color and typography, you ensure it displays clearly and suits your design. In this guide we show you how to style...

Customize the Lightbox Image Background Color in the Divi Gallery

Control the color that appears behind your images when users open in the gallery lightbox, including support for semi-transparent hues. This helps improve contrast for transparent images, align the experience with your brand palette, and create a more polished viewing...

Style the Divi Gallery Lightbox Close Button

Give your gallery lightbox a clear, on-brand close button by customizing its color and size. This improves visibility and usability against varying image backgrounds and ensures the button renders at full opacity for a consistent experience. In this guide we show you...

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.