Topics

  1. Home
  2. Docs
  3. Topics
  4. Code Snippets

Code Snippets

This is a Developer-level document. If you are unfamiliar with code/templates and resolving potential conflicts, please engage with a developer who is familiar with FooEvents and/or WooCommerce. These snippets are provided as a courtesy and are intended as a starting point to assist any specific customization needs. We are unable to provide support for customizations under our Terms of Service.

Show attendee details in the New Order email

Add the following code snippet to your theme’s functions.php file. Please be sure to modify the field names as needed and test the code on your staging site to be safe. Go to Tickets > View Ticket > Custom Fields to view the field names.

You can change the email that this is displayed in by using a different hook.

add_action( 'woocommerce_email_customer_details', 'fooevents_display_attendee_details_in_new_order_email', 10 , 4);
function fooevents_display_attendee_details_in_new_order_email($order, $sent_to_admin, $plain_text, $email){
   
    $foo_order_id = $order->get_id(); 
    $args = array(
        'posts_per_page'  => 50,
        'post_type' => array( 'event_magic_tickets' ),
        'meta_query' => array(
            array(
                'key' => 'WooCommerceEventsOrderID',
                'value' => $foo_order_id,
                'compare' => '==',
            ),
        ),
    );

    global $post;
    $the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();
            echo '<ul>';
            echo '<li><strong>Ticket: '.get_the_title().'</strong></li>';
            echo '<li>'.get_post_meta($post->ID, 'WooCommerceEventsPurchaserFirstName', true).' '.get_post_meta($post->ID, 'WooCommerceEventsPurchaserLastName', true).'</li>';
            echo '<li>About: '.get_post_meta($post->ID, 'fooevents_custom_about', true).'</li>'; // Example custom attendee field
            echo '<li>Product Name: '.get_post_meta($post->ID, 'fooevents_custom_product_name', true).'</li>'; // Example custom attendee field
            echo '<li>T-Shirt Size: '.get_post_meta($post->ID, 'fooevents_custom_t-shirt_size', true).'</li>'; // Example custom attendee field
            echo '</ul>';
        }
    }
    wp_reset_query();

}

Display event start time on event listing

Add the following code snippet to your theme’s functions.php file. Style the display of the time by adding CSS for the class ‘fooevents-date’.

Change the placement of the time by using a different hook.

function fooevents_display_time_in_shop_listing() {
global $post;
if (is_home() || is_shop() || is_product_category() || is_product_tag()) {
echo '<div class="fooevents-date">';
echo get_post_meta($post->ID, 'WooCommerceEventsHour', true).':';
echo get_post_meta($post->ID, 'WooCommerceEventsMinutes', true). ' ';
echo get_post_meta($post->ID, 'WooCommerceEventsPeriod', true);
echo '</div>';
}
}
add_filter( 'woocommerce_after_shop_loop_item_title', 'fooevents_display_time_in_shop_listing', 35 );

Display the event date before the title on the product page

Change the placement of the date by using a different hook.

function fooevents_display_date_on_single() {
 global $post;
 $product = wc_get_product( $post->ID );
 $fooevents_time = $product->get_meta( 'WooCommerceEventsDate' );
 if( $fooevents_time ) {
 printf(
 '<h3>%s</h3>',
 esc_html( $fooevents_time )
 );
 }
}
add_action( 'woocommerce_single_product_summary', 'fooevents_display_date_on_single' );

Display aisles between seats on the seating chart

Modify the following CSS code snippet according to the position where you would like aisle(s) to display and add it to your theme’s custom CSS file. Change the number in brackets i.e. “(1)” to the seat number after which an aisle needs to be displayed.

#fooevents_seating_dialog .row_container span:nth-child(1) {
  margin-right: 30px;
}

Use the following CSS code snippet if you would like to display an aisle between seats in a specific row only. Change the first number in brackets i.e. “(3)” to the number of the row that you would like to target plus 2 and the last number in brackets i.e. “(1)” to the seat number after which an aisle needs to be displayed in that row.

#fooevents_seating_dialog .row_container:nth-child(3) span:nth-child(1) {
  margin-right: 30px;
}

Replace the seat icon on the seating chart with a different image

Modify the following CSS code snippet by adding the URL to a different image that you would like to replace the default seat image for all seats. Add the modified code snippet to your theme’s custom CSS file.

#fooevents_seating_dialog .fooevents_seating_chart_view_row span {
  background-image: url(../images/seat.svg);
}

Show a calendar grid on desktops and a calendar week list on mobile

Add two calendar shortcodes on the page or post where you want to display your calendar. The first shortcode will display a calendar grid and should look like this:

[fooevents_calendar id="desktop"]

The second shortcode will display a calendar week list and should look like this:

[fooevents_calendar id="mobile" defaultView="listWeek"]

Add the following CSS code snippet to your theme’s custom CSS file. Make sure that the CSS ID selector value is the same as the value of the “id” attribute that you’ve specified in the shortcode. You can adjust the “max-width” property to the screen size where you want the calendar week list to show and the calendar grid to be hidden.

#desktop_fooevents_calendar {
  display: block;
}
    
#mobile_fooevents_calendar {
  display: none;
}
    
@media screen and (max-width: 600px) {
  #desktop_fooevents_calendar {
    display: none;
  }
    
  #mobile_fooevents_calendar {
    display: block;
  }    
}

Change the position of the Copy Purchaser’s Details icon

The following snippet will align the copy button to the right of the first name label:

.fooevents-copy-from-purchaser {
	float: right; 
	margin-bottom:-1.7em
}

If you are not using label but rather input placeholders, please use the following code snippet:

.fooevents-copy-from-purchaser {
	float: right; 
	margin-top:-2em
}

Show the “Event Details” tab first on the event page

Add the following code snippet to your theme’s functions.php file.

add_filter( 'woocommerce_product_tabs', 'reorder_tabs', 98 );
function reorder_tabs( $tabs ) {

    $tabs['woocommerce_events']['priority'] = 1; 
    return $tabs;

}
Tags , , , , , , , , , ,
Was this article helpful to you? Yes No