• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

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

June 26, 2016 by Sallie Goetsch 1 Comment

This entry is part 7 of 13 in the series Modern Tribe Tutorials
Pricing info field in 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.

Pricing info field in ACF

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.

pricing info field in event edit screen

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.

Additional pricing info shown immediately after cost on single event

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.

additional pricing info 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.

additional price info displayed on the event widget

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 >>

Related Items

  • Events Calendar Pro list widget showing list date and featured image
    Removing the List Date from Events Calendar Pro List Widget
  • screenshot: final output of [tribe-events-list] shortcode on Livresque du Noir
    Horizontal Output for Events Calendar Pro Shortcode
  • detail of Events Calendar Pro widget on Dit Gentofte website
    Displaying Multiple Rows of Events in Events Calendar Pro Widget

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: Using WordPress Tagged With: Tutorial, Events Calendar Pro, ACF

Reader Interactions

Comments

  1. Gomez says

    July 24, 2018 at 6:35 am

    Just wanted to say thanks for this walkthrough.

    The inability to display more than one price without a ticketing add-on has been bugging me for a while. I’ve finally found the time to sort it with the aid of your instructions.

    I can just tweak it now to better fit my styles.

    Thanks again

    Reply

Leave a Reply Cancel reply

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

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)


More in this series:

  • Creating a Horizontal List Widget with Featured Images in Events Calendar Pro
  • Change Photo View in Events Calendar Pro to Equal-Height Grid with Venue & Location
  • Horizontal Output for Events Calendar Pro Shortcode
  • Displaying Multiple Rows of Events in Events Calendar Pro Widget
  • Defining Event Image Size in The Events Calendar by Modern Tribe
  • Removing the List Date from Events Calendar Pro List Widget
  • Adding Non-Standard Pricing Info in The Events Calendar Using ACF
  • Moving the Gcal and iCal Links in The Events Calendar
  • Horizontal Events Widget for Events Calendar Pro — Now with Flexbox!
  • CSS Grid Layout for Event List Widget with Flexbox Fallback
  • How to Change Event Image Size in The Events Calendar without Modifying Templates
  • CSS Grid Layout for Events Calendar Pro Widget Shortcode
  • Update: Moving the Events Calendar iCal and Gcal links in 2018

Follow Sallie on Twitter

    Sorry, no Tweets were found.

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact