Set Divi Image Module Image from a Shortcode

The Divi Theme Image Module lets you upload and display an image in your page. But if you need to set the Image dynamically, here's how to use a shortcode to set the image URL. Step 1: Enable shortcodes in the image module URL field By default Divi doesn't support...

Open / Close All Accordion Toggles with the Click of a Button.

The Divi Accordion module doesn't come with a way to open / close all accordion toggles at once. Here's how to add a Divi Button module which will do just that. Step 1: Add a Button Module Begin by adding a button module to your layout. This will be the button that we...

WooCommerce Product Price Shortcode

Here's the PHP code for adding a custom shortcode to your site, which will output the price of a given WooCommerce product: add_shortcode('db_wc_product_price', 'db_wc_product_price'); function db_wc_product_price($atts) { if (!function_exists('wc_get_product') ||...

Disable WooCommerce Marketplace Suggestions

WooCommerce shows suggestions for products from its marketplace, within the WordPress admin area. If you'd like to disable these Marketplace Suggestions, here are several ways to do so. Disable Marketplace Suggestions from the WooCommerce Settings The Marketplace...

Change the Post Content Module Background Color

The Post Content module introduced by Divi 4.0 is a placeholder for the main content layout, within a theme builder template. It comes with a convenient option to set its background color / image. However, you might find that your chosen background doesn't show,...

Add Vertical Separator Bars to the Divi Menu Module

I've written before about how to add separator bars to links in the main header. This post covers how to achieve the same effect in the Divi menu module. Specifically, here's what we're trying to achieve: Here are several ways to add the vertical lines between the...

Displaying Projects in a Table

Here's an example of code for displaying projects in table format, with custom fields and links to the individual projects. I.e. this is what we're trying to achieve: Step 1: Set up Custom Fields To display custom fields for you projects, you can set them up using the...

Center or Right-Align the Footer Menu

The Divi Theme includes an option to add a menu to the footer, between the widget area and the bottom bar, like so (highlighted in orange): By default the links are on the left. This post covers ways to move then to the center (as shown below) or the right. Setting...

Creating Tabs using the Divi Show / Hide Button Module

The Divi Theme includes a tab module for creating tabbed content. However, if you want more flexibility, here's how you can use Divi buttons to create a tabs. Creating Tabs with the Divi Show / Hide Button Module I created the Divi Show / Hide Button Module as an easy...

Hide WooCommerce Cart Icon when Cart Empty

When WooCommerce is active on a site running the Divi theme, Divi will display a cart icon in the header. Clicking on this cart will take the the user to the checkout. If you don't want users clicking through to an empty checkout page, you can hide the cart icon while...

Styling the Search Box Close Icon

The main Divi header includes a search icon, which brings up a site-wide search box when clicked. This search box includes a grey "cross" icon which can be used to close the search box. If you're after something other than a grey cross, here's how to style the search...

Automatically Laid Out Blurb Modules

Here's how to achieve a simple 4 column layout with blurb modules that automatically shift over as new ones are added. The problem Say you want a page with monthly updates represented as blurb modules, that looks like this: An obvious way to achieve this is to create...

Changing the Position of the Section Background

If you want to shift the background on one of your Divi Theme sections, you can do with Divi's position settings. For example, suppose you have a section with a background, and some content (an accordion in this case), like so: You can shift the entire section up...

Hide the Header on a Single Post

If you need to hide the main header on a single post in the Divi theme, here's how to do it. 1. Open the Post settings 2. Switch to the "Advanced" tab 3. Enter the following Custom CSS: #main-header { display: none; } #page-container { padding-top: 0 !important; }...

Add Links Beside Mobile Menu Button

On mobile devices the Divi theme collapses the header menu items into a dropdown menu, accessible via the mobile menu button. Sometimes though, it's useful to be able to add a link or two next to the mobile menu button, separate from the mobile menu, as shown: This...

Add Second Button to Divi Slider Slides

Divi Booster lets you add a second button to your Divi Slider module slides. Adding a Second Slide Button With Divi Booster installed, you'll find the following options added to the Slide Settings: Slide Settings > General > Text > Button #2 Text Slide...

Remove Sidebar on Woocommerce Product Pages

By default, the Divi Theme will display a sidebar on Woocommerce product pages. Here's how you can hide / remove the sidebar. Hiding the Sidebar using CSS You can use the following CSS to hide the sidebar from your Woocommmerce product pages and center the product...

Make Slide-in Menu Top Level Items into Links

The Divi theme's Slide-In Menu displays menu links in a vertical bar which is revealed when you click the menu button. When opened, it displays a list of top level (parent) menu items. Normally, clicking on one of these menu items takes you to the linked page....