Tutorial: Easy Digital Downloads & Advanced Custom Fields

In this tutorial I will show you how I use the plugin Advanced Custom Fields to enhance my Easy Digital Downloads powered shop.

For example, I use Advanced Custom Fields to add live demo links and badges to the products. This way, I only have to use the [downloads] shortcode with different parameters. All the set custom fields will appear everywhere the products are called.

Some templates will have to be edited to make the content of the custom fields appear on the front end. The theme I use for the shop is a child theme of Vendd, created by EDD team. The theme structure I will mention below is based on Vendd. Other themes might organize the EDD templates differently.

Setting up the custom fields

1. Download and install the free version of Advanced Custom Fields.

2. A Custom Fields menu will appear on the WP Dashboard. Click Add New next to Field Groups.

Advanced Custom Fields

3. Give the group a name, then click on the + Add Field button. New options will appear.

Advanced Custom Fields

4. Edit the field’s label and name. I prefer to add the edd_ prefix to avoid a possible future conflict. Leave type to Text.

Advanced Custom Fields

5. In Location set the Post type to download.

Advanced Custom Fields

6. In Options change Style to Standard (WP metabox).

Advanced Custom Fields

7. The first field is ready. Go up and click Publish.

Advanced Custom Fields

8. You can add more fields to the group, according to your needs. For ex, I’ve added fields for badges like Free or Sale.

Advanced Custom Fields

They will appear in the same metabox when you add/edit a download.

Advanced Custom Fields

9. Since I use the same pattern for the live demo links in premades, I’ve also added a default value in the custom field.

Advanced Custom Fields

It will appear in the metabox when you add/edit a dowload.

Advanced Custom Fields

Adding the custom fields to the theme

10. For the live demo and inline badge (I use it for the New product label), I ‘ve added the codes in edd_templates -> shortcode-content-title.php. I’ve posted them inline with the download title.

<h3 itemprop="name" class="edd_download_title">
<a title="<?php the_title_attribute(); ?>" itemprop="url" href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <?php if ( get_field ( 'edd_inline_badge' ) ) : ?><span class="edd_inline_badge"><?php the_field ( 'edd_inline_badge' ); ?></span><?php endif; ?>

<?php if ( get_field ( 'edd_live_demo' ) ) : ?><span class="edd_live_demo"><?php the_field ( 'edd_live_demo' ); ?></span><?php endif; ?>

if ( get_field and endif; makes sure the code in between will be displayed only if the field is not empty.

11. Then we style the fields:

.edd_live_demo {
font-size: .8rem;
line-height: 1rem;
display: inline-block;
float: right;
margin: 0 1rem 0 0;
color: #999;
}

.edd_live_demo:before {
font-family: FontAwesome;
font-size: .85em;
margin: 0 4px 0 0;
content: '\f002';
}

.edd_live_demo a {
color: #555;
}

.edd_live_demo a:hover {
color: #999;
}

.edd_inline_badge {
font-family: Roboto,sans-serif;
font-size: .6rem;
font-weight: 400;
line-height: 1.8em;
display: inline-block;
margin: 0 0 0 4px;
padding: 0 6px;
vertical-align: top;
color: #fff;
border-radius: 2px;
background: #7ab55c;
}

Advanced Custom Fields

Using the custom fields in multiple templates

12. Other custom fields I’m using:

– The Free and Sale badges: in edd_templates -> shortcode-content-image.php.

<div class="edd_download_image">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php
$product_image = apply_filters( 'vendd_crop_product_image', true ) ? 'mnd_product_image' : 'full';
echo get_the_post_thumbnail( get_the_ID(), $product_image );
if ( get_field ( 'edd_free_badge' ) ) : ?><span class="edd_free_badge"><?php the_field ( 'edd_free_badge' ); ?></span><?php endif;
if ( get_field ( 'edd_sale_badge' ) ) : ?><span class="edd_sale_badge"><?php the_field ( 'edd_sale_badge' ); ?></span><?php endif;
?>
</a>
</div>

Advanced Custom Fields

– I’ve also added the Free and Sale badges in the product page: content -> content-download.php.

<div class="post-thumbnail">
<?php
if ( get_field ( 'edd_free_badge' ) ) : ?><span class="edd_free_badge"><?php the_field ( 'edd_free_badge' ); ?></span><?php endif;
if ( get_field ( 'edd_sale_badge' ) ) : ?><span class="edd_sale_badge"><?php the_field ( 'edd_sale_badge' ); ?></span>
<?php endif; ?>

Advanced Custom Fields

– The single price field for the products without variable prices: in sidebar-download.php.

<div id="shop-1" class="widget widget_edd_product_details">
<?php
if ( edd_has_variable_prices( get_the_ID() ) ) :
elseif ( '0' != edd_get_download_price( get_the_ID() ) && ! edd_has_variable_prices( get_the_ID() ) ) :
?>
<div class="edd_single_price">
<input checked="checked" type="radio"></input> <?php the_field ( 'edd_single_price' ); ?> – <?php edd_price( get_the_ID() ); ?>
</div>
<?php else : ?>
<div class="edd_single_price">
<input checked="checked" type="radio"></input> <?php the_field ( 'edd_single_price' ); ?> – Free
</div>
<?php endif; ?>

Advanced Custom Fields

The Vendd theme displays a grid of products on the empty checkout page.

Advanced Custom Fields

The custom fields appear also in the bundle product pages.

Advanced Custom Fields

Wrap up

The Advanced Custom Fields plugin can make the life of a WordPress user much easier. There are many type of fields that can be added, from text areas, to checkboxes and color pickers.

For more on what this plugin can do, check out their official documentation.

22 responses... add one

Hi Monica,

This article is beyond helpful and couldn’t be more timely! Thank you!

Using the Advanced Custom Fields and EDD, can I create a field that allows the input of a shortcode on a product page?

Looking to use a plugin on specific product pages and it works by inserting a simple shortcode.

Looking forward to hearing from you. Would love to connect and learn more about you and what you do!

Sincerely,

Dayna

Hi Monica, I need your help again. Can you help to add related downloads item without plugin for Vendd?

Waiting for your response.
Best Regards,
Rabby

Hi Monica,

Thanks for your informative responsive. Basically I need like this feature which you have http://prntscr.com/jgwaoi

I’ve used relative download plugins. They have own design and structure for relative downloads. But i need relative download item as my current layout. Current layout http://prntscr.com/jgwb3v
Is there any way?

Regards,
Rabby

Hi Rabby!

Sorry for the late reply.
The code I’m using is the ‘Related Posts For Custom Post Type by Custom Taxonomy’ from my previous response.
Add this code in footer.php before </div><!– #content –> https://anotepad.com/notes/bqhira

Monica

Hi Monica

I’ve added following code in my website template. Then WOW. I got the same feature as I wanted. Thanks you very much my friend. I really appreciate that. You are the best. You are very helpful. I have crashed on your kindness 🙂 Good luck for you my friend.

King Regards,
Rabby

Hi Monica

I’ve added following code in my website template. Then WOW. I got the same feature as I wanted. Thanks you very much my friend. I really appreciate that. You are the best. You are very helpful. I have crashed on your kindness 🙂 Good luck for you my friend.

King Regards,
Rabby

I can’t get this to work (Annoyingly)

This bit:

edd_templates -> shortcode-content-title.php

Def goes in template and not in the plugin which does have shortcode-content-title.php?

Ignore my previous comment. I found the file within the theme exactly as explained. However, even copying and pasting exact like in this guide, nothing displays. Not sure why :/

Hi Silver!

The only time the code doesn’t display anything is when there’s nothing added in the meta field. Also, check the database -> wp_postmeta -> check
1) in the ‘meta_key column’ that a row/rows with your field name exists (edd_live_demo in my tutorial)
2) your content appears in the ‘meta_value’ field
Screenshot https://i.postimg.cc/nr8533RK/Clipboard-1.png

Monica

Hi Monica,

Thanks for the reply 🙂

So everything seems to be set up right, and I have data in the meta box. It just doesn’t display on the front end of the website.

All I’m trying to do is to have ‘free’ and ‘premium’ like your ‘new’

To make sure there was no mistakes, I copied your guide exactly (eventually) and in the meta box where you put ‘new’ I put ‘free’ – sadly this doesn’t display anything.

I’ll check phpmyadmin to confirm the table exists once back on the PC.

I’ve found the template file (different in my theme) 🙂

But sadly, I cant copy and paste the code into it as it doesnt work. I’m sure its the right file though as it says at the top:

* Customize -> Homepage Settings while viewing this page template.
*
* @package Checkout
* @since Checkout 1.0
*/
get_header(); ?>

Would the code need modifying if its going in a different template file or would it still be a copy and paste job?

Hi Monica!
I have been looking for a solution to my problem for a long time but nowhere can I get an answer.
I use EDD FES (Easy Digital Downloads Frontend Submission), in which there is Submission Form.
Do you know how to add the Custom Fields option via the Advanced Custom Fields plugin?

Adds a screen to what exactly I mean: https://prtsc.pl/images/submissionformedd.png

Hi i did as you show in the tutorial and working well when open products but on the home page not showing same custom field on the same products

Hi reba,

If you’re using the Vendd theme, the custom field should show.

If you’re not using the Vendd theme, or are using a modified version, ask the creators of your theme what template is responsible for the home page product display and add the code there.

Monica

Leave a Reply

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