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.

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

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.

5. In Location set the Post type to download.

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

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

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.

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

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.

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

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_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;
}

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>

– 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; ?>

– 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; ?>

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

The custom fields appear also in the bundle product pages.

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.