How to Supercharge ACF Repeater Fields inside Divi Modules

Recently when working on a client’s website I needed to use the ACF repeater fields on a WordPress site that was built on Divi. After doing a quick google search and reading a few articles it seemed normal ACF fields on Divi’s modules work flawlessly but when it comes to the repeater fields there seem to be technical issues and after a search on ACF support, it looks like I was not the only one with the same problem.

So I’ve created a custom page template for the custom post type because how else am I going to get the repeater fields showing up on the page, I completed the page and nonetheless the client ends up asking for the content to be put into tabs. I initially thought of adding bootstrap for it’s tabbed featured and quickly remembered and realized that it may conflict with Divi and that Divi had its own built-in tab module.

Inserting Divi Modules into the templates

Instead of rebuilding the own page on a Divi, I decided to use the page template but somehow integrate the Divi tab module into my page template. So after a quick google search, I ended up on a post about how to integrate Divi section into a page template, so after skimming through the article I ended finding the piece of code I needed;

<?php echo do_shortcode('[et_pb_section global_module="198"][/et_pb_section]'); ?>

Using the Divi library you can create a section with any module and using the shortcode above you can insert into any page template you’ll need the module on.

With that, I created the tab module with a few test tabs and sure enough the module loaded onto the page where I had inserted the line of code, now to get the ACF repeater field working on the module.

In comes ACF Repeater

I know I needed PHP for the ACF repeater fields to work properly so from my older work I’ve learned using shortcodes to run code is a neat little trick and works almost everywhere in WordPress and could get anything done and it’s in the functions.php file so it can run PHP!

Using the WordPress shortcode API and ob_start(); I’ve created a simple solution to the problem with displaying ACF repeater fields in Divi modules.

Just place inside your functions.php file and add your ACF repeater fields coding inside, then add the shortcode (in this case [foobar]) to the Divi module

function foobar_func( $atts ){
//ACF fields here
return ob_get_clean();
add_shortcode( 'foobar', 'foobar_func' );

Let me know in the comments before if it works for you or if you have another way to add the ACF repeater fields to the Divi modules

Painless Solution for WooCommerce Cart Icon with Item Count on the Divi Theme

Today I was trying to look for how to add an item count to the shopping cart on the Divi theme, I couldn’t find exactly what I was looking for although I did manage to find a few examples on StackOverflow and other websites that work with woocommerce on other themes but on divi it did not work at all.

After searching the divi support forum and documentation I did manage to find a few articles that were exactly what I was looking for however the articles are for members only. Being a freelancer I may have to work with any themes or plugins my clients may have on their website as it was in this case.

So instead of contacting my client and going through email hell for my client and myself, I started taking a look into the header.php file in the Divi Theme – thankfully one of my first tasks when taking on the client was to create a child theme.

Searching for the Divi Item Count Solution

After looking for a minute I finally found what I was looking for and luckily it was a very simple change to display the item count on the shopping cart icon on the menu.

Painless Solution for WooCommerce Cart Icon with Item Count on the Divi Theme 1

First, you’ll need to copy the header.php file from the divi theme into your divi-child theme then on or around Line 285 you’ll find an array with:

'no_text' => true,

You’ll need to change the true to false

'no_text' => false,

Save the header.php file.

Making the change on the child theme is important so any future updates to the divi theme won’t overwrite any changes previously made.

After this small change, you’ll see the number of items next to the cart icon on the main navigation menu, you may have to style the icon and text a little bit, but for the most part its there.

Let me know if this worked out for you or you have another way around this in the comments below!