Want updates & exclusive offers?

Hey there!

Show custom fields in the Divi shop module

Show custom fields in the Divi shop module

Show custom fields in the Divi shop module

 

By default, the Divi shop module will display your product featured image, star rating, title, and price. But what if you also want to show custom fields you’ve created using a plugin like ACF?

In this tutorial I’m going to show you how.

You can jump to each section of the tutorial by clicking the links here:

 

You can see an example in my own Shop. The yellow font under the product titles is a custom field!

Also, as the shop module hooks into the WooCommerce product loop, this will work for both the module, and default Woo loops.

Let’s get started.

Use a child theme.

We need to add a PHP function to grab our custom field and insert it into product loops, so for this tutorial you must be using a Child Theme. If you don’t already have one you can download a very basic one below for free.

Get Child Theme

 

Add a custom field to the shop module.

I’m going to assume you’re using ACF (Advanced Custom Fields) as it’s the most popular custom field plugin for WordPress. If you’re not, that’s fine, this will still work.

How to use ACF is beyond the scope of this tutorial, and there are a ton of resources online to help with the plugin, but below is what you should expect to see in ACF as a minimum when creating a text format custom field.

Show custom fields in the Divi shop module

The value we are interested in is the Field Name, as this is the value we will use in our PHP function.

In my example you can see I’ve called it product_subtitle.

Here is the code you need to copy and paste into your child theme functions.php file.

function bb_product_subtitle() {
global $product;
       if(get_field('product_subtitle')) {
	   echo '<p class="bb-product-subtitle">' . get_field('product_subtitle') . '</p>';
       }
}
add_action( 'woocommerce_after_shop_loop_item_title', 'bb_product_subtitle',  10, 0 );

If you called your custom field something else, change all instances of product_subtitle to the name of your own field.

I’ve chosen to use a paragraph element to hold my product subtitle, but you can change it to a heading, span, or other html element if you wish.

Make sure you save your functions.php (and upload if you aren’t working within Appearance > Theme Editor) and then check your shop module on the front end. As long as you have content within the custom field in your products, you should now see that field within the shop module and any other Woo product loops.

However, it might not look great and you want to style it, or maybe you want your fields to show in a different order. We’ll cover that with CSS.

 

Styling the custom field.

You will see from the PHP code I gave my new subtitle field a custom class of bb-product-subtitle, so I can reference it and style with CSS.

In the code below, I’ve changed the display of the product details to use Flexbox, so I can order the elements any way I wish.

/*Set product details to flex*/

.woocommerce ul.products li.product a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


/*Product image*/

.woocommerce ul.products li.product a .et_shop_image {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
}


/*Product title*/

.woocommerce ul.products li.product a .woocommerce-loop-product__title {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}


/*Product subtitle (custom field)*/

.woocommerce ul.products li.product a .bb-product-subtitle {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}


/*Product rating*/

.woocommerce ul.products li.product a .star-rating {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3
}


/*Product price*/

.woocommerce ul.products li.product a .price {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4
}

This code will order the elements as follows:

  1. Product image
  2. Product title
  3. Product subtitle (custom field)
  4. Product rating
  5. Product price

In the CSS declaration commented with  /*Product subtitle (custom field)*/ you can add additional CSS properties to style the font, colour, size etc to match your brand.

 

Have more custom fields to add to the loop?

Not a problem!

Once you’ve added your custom field with ACF, grab the field name and create a second function to call that field.

function bb_custom_field() {
global $product;
       if(get_field('custom_field')) {
	   echo '<p class="bb-custom-field">' . get_field('custom_field') . '</p>';
       }
}
add_action( 'woocommerce_after_shop_loop_item_title', 'bb_custom_field',  10, 0 );

Simply change each instance of custom_field to the name of your second field and paste into functions.php. Also, don’t forget to change the CSS class to something else so you can include some CSS to position and style it.

That’s it, all done!

Michelle x

 

Bonus code!

Do you want to include an Add to Cart button in the shop module?

Here is an extra function to do just that. Copy and paste the code below into your child theme functions.php file.

// Include "Add to Cart" button in product loops
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

By default, the add to cart button will show underneath all the other product elements.

Pro Pass Membership

Want access to all current and future Divi child themes, theme kits, and Canva kits for one low annual price?

Learn how to create Divi Child Themes that sell

Divi child theme course - Reloaded!
  • Use your existing industry knowledge to define and harness your niche
  • Productise your business with affordable website solutions for clients
  • Add a new revenue stream to your business that pays while you sleep
Find out more
Divi Child Theme Course
Are you

Struggling with Divi?

Struggling with Divi?

Hey! I want to make sure the content I create is helpful to the wider Divi community. If there's something you always find difficult to do when creating Divi sites, or a styling option you wish Divi had, complete the Divi tutorial request form and tell me all about it. I don't guarantee I'll be able to create something that solves the issue, but I'm smarter than your average bear so you never know!

P.S. - This is NOT a support request form and you won't be subcribed to any email lists. If you have an issue with one of our products, you can get help here.



First
Why? I might have questions, and if I create a solution I'll let you know.

Want a website like ours?

More posts

You might like!

How to replace the Divi search button with an icon

3 ways to use anchor links in Divi

Anchor links are used to navigate to specific content on a page rather than simply between pages themselves, and mastering anchor links in Divi is actually very simple. In this tutorial, I’m going to show you three ways to use anchor links.

You have Successfully Subscribed!