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.

Important, please read first

These snippets are provided as a courtesy and do not form part of the FooEvents product offering. They are considered customizations and are not officially supported by FooEvents. As such, we do not provide support for snippets and customizations as per our Terms of Service. Please use at your own risk.

Show attendee name and email in the New Order admin email

Add the following code snippet to your theme’s functions.php file. 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){
    echo "<h3>Attendee Details</h3>";
    $WooCommerceEventsOrderTickets = get_post_meta($order->get_id(), 'WooCommerceEventsOrderTickets', true);
    foreach($WooCommerceEventsOrderTickets as $event) {
        foreach($event as $ticket) {
            echo "<p>";
            echo '<strong>First Name</strong>: '.$ticket['WooCommerceEventsAttendeeName'].'<br />';
            echo '<strong>Last Name</strong>: '.$ticket['WooCommerceEventsAttendeeLastName'].'<br />';
            echo '<strong>Email Address</strong>: '.$ticket['WooCommerceEventsAttendeeEmail'].'<br />';
            echo "</p>";
        }
    }
}

Show all custom attendee fields without labels in the New Order admin email

Add the following code snippet to your theme’s functions.php file. 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){
    echo "<h3>Attendee Details</h3>";
    $WooCommerceEventsOrderTickets = get_post_meta($order->get_id(), 'WooCommerceEventsOrderTickets', true);
    foreach($WooCommerceEventsOrderTickets as $event) {
        foreach($event as $ticket) {
            echo "<p>";
            echo '<strong>First Name</strong>: '.$ticket['WooCommerceEventsAttendeeName'].'<br />';
            echo '<strong>Last Name</strong>: '.$ticket['WooCommerceEventsAttendeeLastName'].'<br />';
            echo '<strong>Email Address</strong>: '.$ticket['WooCommerceEventsAttendeeEmail'].'<br />';
            foreach ($ticket['WooCommerceEventsCustomAttendeeFields'] as $caf) {
                 echo $caf.'<br />';
            }
            echo "</p>";
        }
    }
}

Show custom attendee fields with labels in the New Order admin email

Add the following code snippet to your theme’s functions.php file. You can change the email that this is displayed in by using a different hook. Make sure to replace “ovsxtmynwagotamjqieq” and “ruzwhgbuhzuzzdwnnaxe” in the example code with your specific custom attendee field code. You can find this information if you edit a ticket and look for each custom attendee field in the “Custom Fields” section. You would need to add each custom attendee field and its label individually.

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){
    echo "<h3>Attendee Details</h3>";
    $WooCommerceEventsOrderTickets = get_post_meta($order->get_id(), 'WooCommerceEventsOrderTickets', true);
    foreach($WooCommerceEventsOrderTickets as $event) {
        foreach($event as $ticket) {
            echo "<p>";
            echo '<strong>First Name</strong>: '.$ticket['WooCommerceEventsAttendeeName'].'<br />';
            echo '<strong>Last Name</strong>: '.$ticket['WooCommerceEventsAttendeeLastName'].'<br />';
            echo '<strong>Email Address</strong>: '.$ticket['WooCommerceEventsAttendeeEmail'].'<br />';
            echo '<strong>Birthday</strong>: '.$ticket['WooCommerceEventsCustomAttendeeFields']['fooevents_custom_ovsxtmynwagotamjqieq'].'<br />';
            echo '<strong>Favorite song</strong>: '.$ticket['WooCommerceEventsCustomAttendeeFields']['fooevents_custom_ruzwhgbuhzuzzdwnnaxe'].'<br />';
            echo "</p>";
        }
    }
}

Display event start time on the 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_front_page() || 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 registered attendees in a table format

Add the following code snippet to your theme’s functions.php file to output all registered attendees to your event in a table grid format. After adding the code snippet, create a new page where you echo the ‘fooevents_display_attendees()’ function.


function fooevents_display_attendees($attributes) {
 
  $product_id='';
  if(!empty($attributes['start'])) {
    $product_id = $attributes['product_id'];
  }

  $output ='';
  $args = array(
    'numberposts' => -1,
    'posts_per_page' => -1,
    'post_type'   => 'event_magic_tickets',
    'meta_query'  => array(
      'relation'    => 'OR',
      array(
        'key'   => 'WooCommerceEventsProductID',
        'value'   => $product_id,
        'compare' => 'LIKE'
      )
    )
  );  

   $the_query = new WP_Query( $args );

  if( $the_query->have_posts() ):
    while ( $the_query->have_posts() ) : $the_query->the_post();
    $postid = $the_query->post->ID;
     
      // output all findings - CUSTOMIZE TO YOUR LIKING
      $output .= "<tr>";
      $output .= "<td>".get_the_title()."</td>";
      $output .= "<td>".get_post_meta($postid, 'WooCommerceEventsPurchaserFirstName', true)."</td>";
      $output .= "<td>".get_post_meta($postid, 'WooCommerceEventsPurchaserLastName', true)."</td>";
      $output .= "</tr>";
         
    endwhile;
  endif;
  wp_reset_query();
  $output ="<table>".$output."</table>";
  return $output;
   
}
add_shortcode("fooevents_attendees", "fooevents_display_attendees");


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 );
  $start_date = $product->get_meta( 'WooCommerceEventsDate' );
  $end_date = $product->get_meta( 'WooCommerceEventsEndDate' );
  if ( $end_date ) {
    printf(
      '<h3>%s</h3>',
      esc_html( $start_date . ' - ' . $end_date )
    );
  } else if( $start_date ) {
    printf(
      '<h3>%s</h3>',
      esc_html( $start_date )
    );
  }
}
add_action( 'woocommerce_single_product_summary', 'fooevents_display_date_on_single' );

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);
}

Remove the seat icon on the seating chart so that seats display as boxes

#fooevents_seating_dialog .fooevents_seating_chart_view_row span {
  background-image: none;
}

Change the direction of the seat numbers on the seating chart

#fooevents_seating_dialog .fooevents_seating_chart_view_row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

Show odd-numbered seats on the right and even-numbered seats on the left

#fooevents_seating_dialog .fooevents_seating_chart_view_row > span:nth-of-type(even) {
  float: left;
}

Display seats in the middle of the seating chart

#fooevents_seating_dialog .fooevents_seating_chart_view_row_name,
#fooevents_seating_dialog .fooevents_seating_chart_view_row {
  text-align: center;
}

Let the seating chart scroll horizontally instead of displaying seats in the next row

This could be useful if you have many seats per row and you want them to display next to each other instead of on the next row if they do not fit on one line.

#fooevents_seating_dialog .fooevents_seating_chart_view_row {
  overflow-x: scroll;
  white-space: nowrap;
}

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

}

Direct all ‘Add to cart’ buttons to product pages

If a product is a simple product, by default, the ‘Add to cart’ button will automatically add a product to the customer’s cart. When using the FooEvents Bookings extension, you may require that your customers first go to the product page to select the booking date and slot. The following snippet will ensure that when the ‘Add to cart’ button is clicked for simple products, the user will be directed to the product page.

add_filter( 'woocommerce_loop_add_to_cart_link', 'fooevents_modify_add_to_cart_button_url', 10, 2 );
function fooevents_modify_add_to_cart_button_url( $button, $product ) {
    if (is_product_category() || is_shop()) {
        $button_text = $product->add_to_cart_text();
        $button_link = $product->get_permalink();
        $button = '<a class="button" href="' . $button_link . '">' . $button_text . '</a>';
        return $button;
    }
}

Display products and variations (tickets) in a table grid format

Add the following code snippet to your theme’s functions.php file in order to display products and variations in a table grid format on the event/product page instead of the default drop-down list. Each ticket option will be listed in a new row and have its own quantity picker.

/**
 * Display variations in a table format.
 */

function woocommerce_variable_add_to_cart() {

	global $product, $post;

	// Enter a comma separated list of product ID's that should display variations in table format. Leave empty to display all product ( e.g array() )
	$products = array( ); 

	if ( in_array( $post->ID, $products ) || empty( $products ) ) {

		$variations = find_valid_variations();

		// Check if the special 'price_grid' meta is set, if it is, load the default template.
		if ( get_post_meta( $post->ID, 'price_grid', true ) ) {

			// Enqueue variation scripts.
			wp_enqueue_script( 'wc-add-to-cart-variation' );

			// Load the template
			wc_get_template(
				'single-product/add-to-cart/variable.php',
				array(
					'available_variations' => $product->get_available_variations(),
					'attributes'           => $product->get_variation_attributes(),
					'selected_attributes'  => $product->get_variation_default_attributes(),
				)
			);

			return;
		}
		// Cool, lets do our own template!
		?>
			<table class="variations variations-grid" cellspacing="0">
				<tbody>

			<?php
			$variation = 0;
			foreach ( $variations as $key => $value ) {
				if ( ! $value['variation_is_visible'] ) {
					continue;
				}
				if ( $variation != $value['variation_id'] ) {

					?>

					<tr>
						<td>
						<?php

						foreach ( $value['attributes'] as $key => $val ) {
							$val = str_replace( array( '-', '_' ), ' ', $val );
							printf( '<div class="attr attr-%s">%s</div>', $key, ucwords( $val ) );
						}
						?>
						</td>
						<td>
						<?php echo $value['price_html']; ?>
						</td>

						<?php if ( $value['is_in_stock'] ) { ?>
							<form class="cart"  action="<?php echo esc_url( $product->add_to_cart_url() ); ?>" method="post" enctype='multipart/form-data'>
								<td id="variation_<?php echo $value['variation_id']; ?>">
									<?php woocommerce_quantity_input(); ?>
									<?php
									$variation_minimum_quantity  = get_post_meta( $value['variation_id'], 'variation_minimum_allowed_quantity', true );
									$variation_maximum_quantity  = get_post_meta( $value['variation_id'], 'variation_maximum_allowed_quantity', true );
									$variation_group_of_quantity = get_post_meta( $value['variation_id'], 'variation_group_of_quantity', true );
									?>
									<?php if ( isset( $variation_group_of_quantity ) ) { ?>
										<script>
										jQuery(document).ready(function($){
											$( "#variation_<?php echo $value['variation_id']; ?> .qty" ).attr( "step", <?php echo $variation_group_of_quantity; ?> );
											$( "#variation_<?php echo $value['variation_id']; ?> .qty" ).attr( "value", <?php echo $variation_group_of_quantity; ?> );
											$( "#variation_<?php echo $value['variation_id']; ?> .qty" ).attr( "min", <?php echo $variation_minimum_quantity; ?> );
											$( "#variation_<?php echo $value['variation_id']; ?> .qty" ).attr( "max", <?php echo $variation_maximum_quantity; ?> );
										});
										</script>									
									<?php } ?>
								</td>
								<td>
									<?php
									if ( ! empty( $value['attributes'] ) ) {
										foreach ( $value['attributes'] as $attr_key => $attr_value ) {
											?>
											<input type="hidden" name="<?php echo $attr_key; ?>" value="<?php echo $attr_value; ?>">
											<?php
										}
									}
									?>
									<button type="submit" class="single_add_to_cart_button btn btn-primary"><span class="glyphicon glyphicon-tag"></span> Add to cart</button>
								</td>
								<input type="hidden" name="variation_id" value="<?php echo $value['variation_id']; ?>" />
								<input type="hidden" name="product_id" value="<?php echo esc_attr( $post->ID ); ?>" />
								<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $post->ID ); ?>" />
							</form>
							<?php } else { ?>
								<td colspan="2">
									<p class="stock out-of-stock"><?php _e( 'This item is currently out of stock and unavailable.', 'woocommerce' ); ?></p>
								</td>
							<?php } ?>
					</tr>
					<?php
					$variation = $value['variation_id'];
				}
			}
			?>
			</tbody>
			</table>


		<?php
	} else {

		// Enqueue variation scripts.
		wp_enqueue_script( 'wc-add-to-cart-variation' );

		// Load the template
		wc_get_template(
			'single-product/add-to-cart/variable.php',
			array(
				'available_variations' => $product->get_available_variations(),
				'attributes'           => $product->get_variation_attributes(),
				'selected_attributes'  => $product->get_variation_default_attributes(),
			)
		);
		return;
	}
}

function find_valid_variations() {
	global $product, $post;

		$variations   = $product->get_available_variations();
		$attributes   = $product->get_attributes();
		$new_variants = array();

		// Loop through all variations
	foreach ( $variations as $variation ) {

		// Peruse the attributes.

		// 1. If both are explicitly set, this is a valid variation
		// 2. If one is not set, that means any, and we must 'create' the rest.

		$valid = true; // so far
		foreach ( $attributes as $slug => $args ) {
			if ( array_key_exists( "attribute_$slug", $variation['attributes'] ) && ! empty( $variation['attributes'][ "attribute_$slug" ] ) ) {
				// Exists

			} else {
				// Not exists, create
				$valid = false; // it contains 'anys'
				// loop through all options for the 'ANY' attribute, and add each
				foreach ( explode( '|', $attributes[ $slug ]['value'] ) as $attribute ) {
					$attribute                                      = trim( $attribute );
					$new_variant                                    = $variation;
					$new_variant['attributes'][ "attribute_$slug" ] = $attribute;
					$new_variants[]                                 = $new_variant;
				}
			}
		}

		// This contains ALL set attributes, and is itself a 'valid' variation.
		if ( $valid ) {

			$new_variants[] = $variation;
		}
	}

		return $new_variants;
}

 

 

Tags , , , , , , , , , , , ,
Was this article helpful to you? Yes 3 No 2