Tutorial: Easy Digital Downloads & Advanced Custom Fields

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.

One response... 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

Leave a Reply

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