Adding Non-Standard Pricing Info in The Events Calendar Using ACF

Right now it’s not especially easy to show more than one event price using The Events Calendar or Events Calendar Pro, unless you use one of their event ticketing plugins to set different ticket prices. (Even then, showing the price range correctly seems to be somewhat complex.) There’s also no means to add additional pricing information beyond the actual cost.

Although the event ticketing plugins are great, there are reasons for not using them. In the case of the Radiant Body Yoga website, my client Kia Miller uses Gravity Forms to sell tickets to her own events because she needs participants to fill out detailed application forms.

By itself, that’s not a problem, but Kia offers early-bird pricing for her training sessions. You can use a combination of GP Conditional Logic Dates and GP Conditional Pricing from Gravity Wiz to set up early-bird pricing via Gravity Forms, but that doesn’t do a thing about displaying the price in The Events Calendar. (Also, when Kia decided just to charge the deposit with the application, we stopped using it.)

What The Events Calendar Displays: March 8, 2017 – March 20, 2017 | $2500

What We Need It to Display: March 8, 2017 – March 20, 2017 | $2500 before January 10th; $3000 thereafter

This is fairly easy to do using Advanced Custom Fields, which I already had installed on the site to handle the fields for the teacher directory. Since it’s only a simple text field, you could use the built-in custom fields for WordPress, but then you have to mess about with placing the metabox, and it’s easy to lose a metabox on the event edit screen in TEC. The Pro version of this plugin is absolutely worth buying, but the free version would work for this.

Create Your Additional Pricing Info Field

Go to Custom Fields | Add New to create a new field group. In this case, it only needs one field, a single-line text field. I called my field group “Event Fields”, but “Pricing Fields” would probably have been more accurate. The field label is “Additional Pricing Info” and the field name, which I need in order to retrieve the field, is additional_pricing_info.

Because there are so many metaboxes added by The Events Calendar, I set the Position for this field group to “High (after title)”. That makes it much more difficult to overlook. Ideally, I suppose, I would position it right next to TEC’s own “cost” field, but that’s just a bit above my pay grade.

Enter Your Additional Pricing Information

Before you can be sure your code to retrieve the field works, you need something to retrieve, so update an event with the additional event information before you move on to editing templates.

Modify the Single Event Template

If you haven’t yet done so for other templates or CSS, create a /tribe-events/ folder in your theme folder. Copy the single-event.php file from /wp-content/plugins/the-events-calendar/src/views/ into your /tribe-events/ folder. (Details about setting up new templates in The Events Calendar are contained in the Modern Tribe Themer’s Guide.) Open the file in your preferred editor and look for the tribe-events-cost span:

<div class="tribe-events-schedule tribe-clearfix">
  <?php echo tribe_events_event_schedule_details( $event_id, '<h2>', '</h2>' ); ?>
  <?php if ( tribe_get_cost() ) : ?>
  <span class="tribe-events-divider">|</span>
  <span class="tribe-events-cost"><?php echo tribe_get_cost( null, true ) ?></span>
  <?php endif; ?>
</div>

You want to add the code to retrieve the cost right before the close of the div, so that you have

<div class="tribe-events-schedule tribe-clearfix">
  <?php echo tribe_events_event_schedule_details( $event_id, '<h2>', '</h2>' ); ?>
  <?php if ( tribe_get_cost() ) : ?>
    <span class="tribe-events-divider">|</span>
    <span class="tribe-events-cost"><?php echo tribe_get_cost( null, true ) ?></span>
  <?php endif; ?>
  <?php $price2 = get_field("additional_pricing_info");
    if( $price2 ) { ?>
    <span class="tribe-events-cost">
    <?php echo $price2; ?>
    </span>
  <?php } ?>
</div>

Check Your Work: Event Header

That code results in an event header like this for single events.

Add the Additional Price Info to Event Details

The top of the event isn’t the only place that the cost is displayed in the single event view, but to modify the cost in the Event Details section, you need to edit a new file: details.php from the /modules/meta/ folder. (That means you need to create a /modules/meta/ folder in your /tribe-events/ folder, then copy the details.php file from the plugin to edit it.)

Near the top of the file (it’s line 50 for me, but YMMV), you’ll see the following variable: $cost = tribe_get_formatted_cost();. Immediately below that, you should add  $price2 = get_field("additional_pricing_info");. (Substitute your own variable and field name if you’re using different ones).

The actual code to insert the cost comes further down (line 120 for me). It looks like this:

<?php
// Event Cost
  if ( ! empty( $cost ) ) : ?>

  <dt> <?php esc_html_e( 'Cost:', 'the-events-calendar' ) ?> </dt>
  <dd class="tribe-events-event-cost"> <?php esc_html_e( $cost ); ?> </dd>
<?php endif ?>

This is where you add the code to retrieve your custom field, as follows:

<?php
// Event Cost
  if ( ! empty( $cost ) ) : ?>

  <dt> <?php esc_html_e( 'Cost:', 'the-events-calendar' ) ?> </dt>
  <dd class="tribe-events-event-cost"> <?php esc_html_e( $cost ); 
  if( $price2 ) { echo ' '.$price2; } ?> </dd>
<?php endif ?>

Don’t forget that blank space before the field.

Check Your Work: Event Details

The additional pricing information now appears directly after the cost under Event Details.

Adding Additional Price Info to the Event Widget

If you show cost information in the Events Widget, you’ll need to copy the single-event.php file that lives in /widgets/modules/ and move it into /widgets/modules/ in your /tribe-events/ folder. I’d already made some modifications to that template in order to remove the list date.

We’re not displaying cost in the widgets on the RBY site, but for completeness’ sake, here is the code to do so.

Look for

<?php if ( isset( $cost ) && $cost && tribe_get_cost() != '' ) : ?>
  <span class="tribe-events-divider">|</span>
  <div class="tribe-events-event-cost">
  <?php echo tribe_get_cost( null, true ); ?>
  </div>
<?php endif ?>

And change it to

<?php if ( isset( $cost ) && $cost && tribe_get_cost() != '' ) : ?>
	<span class="tribe-events-divider">|</span>
	<div class="tribe-events-event-cost">
	<?php echo tribe_get_cost( null, true ); 
	$price2 = get_field("additional_pricing_info");
	if( $price2 ) { echo ' '.$price2; } ?>
	</div>
<?php endif ?>

Check Your Work

For the sake of this tutorial, I temporarily elected to display price on the home page event widget (which I’ve just re-written with flexbox, but that’s another tutorial to come). It’s a little untidy-looking and I’d probably want to tweak the styling if I actually planned to display prices there, but it’s working.

I have a vague sense that some of these changes could be made via hooks without editing template files (which then sometimes need to be updated when the plugin has a major update), but I don’t know the hooks in TEC well enough.

Stay tuned for the Flexbox event widget tutorial!

Modern Tribe Tutorials Series Navigation

<< Previous PostNext Post >>