How to display Tickera specific data in WooCommerce specific areas
Ever since we introduced Bridge for WooCommerce add-on, we have numerous questions from our customers asking whether it is possible to display various information from Tickera events on WooCommerce specific pages and emails. For instance, customers often ask if it is possible to display event title and date on WooCommerce's checkout page or in the table sent by WooCommerce after order is placed. Of course, all of these questions are entirely valid and we completely understand the need for this and so far we have created numerous custom add-ons for all sorts of scenarios like these and supplied them to our premium customers.
Hooking into WooCommerce
WooCommerce has been around for more than a decade now and as such is very mature piece of software, used by hundreds of millions over the years and actively being used on at least five million websites. So, it is not that hard to imagine that there's a good reason for this and apart from the fact that it is free to use, another major factor for its popularity is certainly a myriad of hooks and filters it has which make it relatively easy to modify its functionality in any way imaginable. All these actions and filters are very well documented and listed in their documentation here but in this post, we will focus on the ones that are most useful for you as Tickera user.
Hooks to the rescue! With a few lines of code, you can display event title and date/time in many WooCommerce specific areas.
Solutions we offer here will be based on php snippets which are reasonably easy to add to your website. However, if you're unsure on how to do this, we have an awesome in-depth guide covering several methods here.
Display event title on WooCommerce shop page
Let's say that you're selling tickets on your website and display all of the available ticket types on WooCommerce's default shop page. This is very common use case among our customers and while it is perfectly fine and sufficient to run it as it is, the problem becomes apparent if you're selling tickets for multiple events at the same time and each event has the same ticket types (Regular, VIP, etc.). In this case, WooCommerce shop page will list all of these ticket types (created as WooCommerce products) but users will have no idea which event these ticket types belong to.
Looks nice, right?
To get this to work, we will need to hook into woocommerce_shop_loop_item_title action and then pull event title based on the product. Without going to deep or getting too technical, all you need to do to get this is to paste the following as php snippet to Code Snippets plugin:
add_action('woocommerce_shop_loop_item_title', 'tc_display_event_data_woo_shop');
function tc_display_event_data_woo_shop() {
$product_is_ticket = get_post_meta(get_the_ID(), '_tc_is_ticket', true);
$event_id = get_post_meta(get_the_ID(), '_event_name', true);
$event_title = get_the_title($event_id);
if ($product_is_ticket === 'yes') {
?>
<td class="ticket-event">
<?php echo $event_title;?>
</td>
<?php
}
}
I want event date/time as well. Thanks.
No worries... at all... Instead of using a previous snippet, all we need to do is to pull this information and append it to the event title like this:
add_action('woocommerce_shop_loop_item_title', 'tc_display_event_data_woo_shop');
function tc_display_event_data_woo_shop() {
$product_is_ticket = get_post_meta(get_the_ID(), '_tc_is_ticket', true);
$event_id = get_post_meta(get_the_ID(), '_event_name', true);
$event_title = get_the_title($event_id);
$event_date_time_raw = get_post_meta($event_id, 'event_date_time', true);
$event_date_formatted = date_i18n( get_option( 'date_format' ), strtotime( $event_date_time_raw ) );
$event_time_formatted = date_i18n( get_option( 'time_format' ), strtotime( $event_date_time_raw ) );
if ($product_is_ticket === 'yes') {
?>
<td class="ticket-event">
<?php echo $event_title . '<br/><span style="font-size: 0.8em; line-height: 1.5em;">' . $event_date_formatted . ' @ ' . $event_time_formatted; ?>
</span></td>
<?php
}
}...and the result will be this:
Now, the beauty of all this is that you can easily change the place where this information is displayed quite easily just by using a different hook and a great visual guide of which hook displays information at which position in WooCommerce shop page can be found here.
All this but on the WooCommerce's single product page
Similarly to the previous approach, we can also display this information easily on the single product page like this
To get this to work, you can use the following snippet:
add_action('woocommerce_single_product_summary', 'tc_display_event_data_woo_single');
function tc_display_event_data_woo_single() {
$product_is_ticket = get_post_meta(get_the_ID(), '_tc_is_ticket', true);
$event_id = get_post_meta(get_the_ID(), '_event_name', true);
$event_title = get_the_title($event_id);
$event_date_time_raw = get_post_meta($event_id, 'event_date_time', true);
$event_date_formatted = date_i18n( get_option( 'date_format' ), strtotime( $event_date_time_raw ) );
$event_time_formatted = date_i18n( get_option( 'time_format' ), strtotime( $event_date_time_raw ) );
if ($product_is_ticket === 'yes') {
?>
<td class="ticket-event">
<?php echo $event_title . '<br/><span style="font-size: 0.8em; line-height: 1.5em;">' . $event_date_formatted . ' @ ' . $event_time_formatted; ?>
</span></td>
<?php
}
}For the observant ones amongst you, it is probably easy to notice that the function used here is pretty much exactly the same as the one used to display this information on the shop page and that is entirely true as the information is pulled the same way. The only difference is hook that allows us to display this information on the single product page. Similarly to the shop page, single product page also has multiple places you can hook into and visual guide to which hook is responsible for what can be found here.
What about the Cart page?
Since we already have now displayed event title and event date and time on the shop page and single product page, it is perfectly fine to expect this on the cart page as well. This one works a bit differently than shop page and single product page but we won't be wasting your time with all the nitty gritty technical stuff but instead will provide you with a snippet that simply works:
add_filter( 'woocommerce_cart_item_name', 'tc_event_title_date_in_woo_cart', 99, 3 );
function tc_event_title_date_in_woo_cart( $item_name, $cart_item, $cart_item_key ) {
$product = $cart_item['data'];
$type = $product->get_type();
$product_id = $product->get_id();
$variation_id = $product->get_parent_id();
$is_ticket = get_post_meta($product_id, '_tc_is_ticket', true);
$is_ticket_var = get_post_meta($variation_id, '_tc_is_ticket', true);
if ($type === 'simple' && $is_ticket === 'yes') {
$event_id = get_post_meta($product_id, '_event_name', true);
$event_title = get_the_title($event_id);
$event_date_time_raw = get_post_meta($event_id, 'event_date_time', true);
$event_date_formatted = date_i18n( get_option( 'date_format' ), strtotime( $event_date_time_raw ) );
$event_time_formatted = date_i18n( get_option( 'time_format' ), strtotime( $event_date_time_raw ) );
if(empty($event_title)) return $item_name;
$item_name .= '<br/><small class="product-sku">' . $event_title . '<br/>'.$event_date_formatted.' @ '.$event_time_formatted.'</small>';
return $item_name;
}
else if ($type === 'variation' && $is_ticket_var === 'yes' ) {
$event_id = get_post_meta($variation_id, '_event_name', true);
$event_title = get_the_title($event_id);
$event_date_time_raw = get_post_meta($event_id, 'event_date_time', true);
$event_date_formatted = date_i18n( get_option( 'date_format' ), strtotime( $event_date_time_raw ) );
$event_time_formatted = date_i18n( get_option( 'time_format' ), strtotime( $event_date_time_raw ) );
if(empty($event_title)) return $item_name;
return $item_name .= '<div style = "width: 100%;float:left;"><small class="product-sku">' . $event_title . '<br/>'.$event_date_formatted.' @ '.$event_time_formatted.'</small></style>';
}
else {
return $item_name;
}
}...which looks like this:
...and emails?
When customers purchase tickets as WooCommerce products, they will receive an email with the table which will contain ticket download links for each of the purchased tickets. However, an email that is sent to website admin to notify them about new purchase on their website, will contain just WooCommerce's default table of purchased items which, by default, won't contain any information about events but rather only information about products. In some cases, this might be mildly annoying, especially if you're selling tickets that have the same titles but are for different events. So, if you want to display event title and date/time in WooCommerce's default email table like this
...you can utilize the following snippet:
add_action('woocommerce_order_item_meta_end', 'event_title_in_woo_email_content', 10, 4);
function event_title_in_woo_email_content($item_id, $item, $order = null, $plain_text = false) {
$product_id = $item->get_product_id();
$event_id = get_post_meta($product_id, '_event_name', true);
$event_title = get_the_title($event_id);
$event_date_time = get_post_meta($event_id, 'event_date_time', true);
$event_date_formatted = date_i18n(get_option('date_format'), strtotime($event_date_time));
$event_time_formatted = date_i18n(get_option('time_format'), strtotime($event_date_time));
$product_is_ticket = get_post_meta($product_id, '_tc_is_ticket', true);
if (isset($product_is_ticket) && $product_is_ticket == 'yes') {
echo $event_title.'<br/>'.$event_date_formatted.' @ '.$event_time_formatted;
}
}
Conclusion
Although we did our best to explain in the plainest and simplest way possible what to do with these snippets, we completely understand that this might not be your forte and that only look on all of this code might get your hair raise. If that is the case but you still need any of this functionality, you are more than welcome to contact us and we will be more than willing to help you out implement this to your website. One question we feel you might have is whether it is safe to use these snippets and is there are room for some errors. And the simplest answer is, yes, adding any code snippets to your website makes room for errors. However, this is another reason why we have recommended, right at the beginning, to add these snippets to your website using Code Snippets plugin as this plugin will make sure not to let you save the snippet if it causes fatal errors which is super nice fallback in case you have pasted incomplete code for example. Surely, there are other ways of implementing this to your website (using functions.php file, making custom plugins, etc.) but Code Snippets is the most safe way of doing this, especially if you're not experienced with this sort of things. In any case, we encourage you to try it out yourself and learn something new... it's great feeling.