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.

9 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

Thank you very much. This tutorial is very helpful for me. Appreciated 🙂

Regards,
Rabby

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

Leave a Reply

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