FooEvents for WooCommerce

Updated 30 August 2017

FooEvents adds seamless event and ticketing functionality to WooCommerce. The plugin adds additional event specific fields and options to the existing WooCommerce products which allows you to create branded event tickets that can be sold on your own web-site.

Installing WordPress

What is WordPress?

WordPress is open source software you can use to create a beautiful website, blog, or app. WordPress is a well trusted solution and powers 28% of the worlds websites, from hobby blogs to the biggest news sites online. Extend WordPress with over 45,000 plugins to help your website meet your needs. Add an online store, galleries, mailing lists, forums, analytics, and much more.

Do I need to use WordPress?

Yes! FooEvents is a WordPress extension and adds event and ticketing functionality to WordPress.

WordPress Installation Instructions

If you do not already have a working WordPress installation you will first need to install WordPress on your web server: https://codex.wordpress.org/Installing_WordPress

What else do I need?

You will also need to install WooCommerce which is an ecommerce system designed for WordPress. You can find out more about it here.

Installing Woocommerce

What is WooCommerce?

WooCommerce is a WordPress plugin. FooEvents is an extension plugin that adds additional event and ticketing functionality to WooCommerce.

Why do I need to install WooCommerce?

FooEvents extends the ecommerce functionality provided by WooCommerce and adds ticketing and event capabilities. Before installing FooEvents you must FIRST install WooCommerce

WooCommerce Installation Instructions

If you are new to WooCommerce it is recommended that you go through the WooCommerce documentation: http://docs.woothemes.com/documentation/plugins/woocommerce/getting-started/

Installing FooEvents

Requirements

  1. WordPress Website
  2. WooCommerce plugin installed
  3. Valid FooEvents license
  4. FooEvents Plugin files

Installation Steps

  1. Ensure that WordPress and WooCommerce are installed (see above requirements)
  2. Download the FooEvents for WooCommerce plugin (From FooEvents.com or CodeCanyon)
  3. Login to your WordPress Admin Area
  4. Upload the FooEvents plugin. There are two ways you could upload the plugin files:
    1. Go to Plugins > Add New in the main menu. Upload the FooEvents plugin zip file
    2. Using an FTP client, upload the plugin zip file to the following location on your web server: /wp-content/plugins/
  5. Click on ‘Plugins’ in the main menu
  6. Find the FooEvents for WooCommerce plugin and activate it
  7. Congratulations! The plugin is now installed and ready to be configured for your event

Setup an Event Product

Overview

FooEvents essentially extends WooCommerce products and add event and ticketing functionality. FooEvents adds an event tab to the WooCommerce product settings. The event tab provides various fields that can be used to configure your event and ticket.

Instructions

  1. To create and event, go to Products > Add Product in the main menu
  2. Complete the title, body, description, tags, categories, featured image and gallery as needed
  3. Go to the Product Data tab set and select ‘Events’
  4. To activate event functionality set the ‘Is this product an event?’ dropdown to ‘yes’. Doing so will reveal additional fields that can be used to create your event
  5. Complete the event tab fields by entering your events information

Event settings

Date The date that the event is scheduled to take place
Start time The time that the event is scheduled to start
End time The time that the event is scheduled to end
Venue The venue where the event will be held
GPS Coordinates The venue’s GPS coordinates
Google Maps Coordinates The GPS coordinates used to determine the pin position on the Google map that is displayed on the event page. NB: Please ensure you use the following GPS format:
Directions Text directions explaining how to find the venue
Phone Event organizer’s landline or mobile phone number
Email Event organizer’s email address
Ticket logo The logo which will be displayed on the ticket in JPG or PNG format
  • Minimum width - 200px
  • Minimum height - N/A
Ticket border color The color of the ticket border
Ticket buttons colour The color of the ticket button
Ticket button text colour The color of the ticket button’s text
Include purchaser / attendee details on ticket? Selecting this will display the purchaser or attendee details on the ticket
Display 'Add to calendar' on ticket? Selecting this will display an 'Add to calendar' button on the ticket. Clicking this will generate a .ics file.
Display date and time on ticket? Selecting this will display the time and date of the event on the ticket
Display barcode on ticket? Selecting this will display the barcode on the ticket
Display price on ticket? Selecting this will display the ticket price on the ticket
Capture individual attendee details? Selecting this will add attendee capture fields on the checkout screen
Capture attendee telephone? Selecting this will add a telephone number field to the attendee capture fields on the checkout screen
Capture attendee company? Selecting this will add a company field to the attendee capture fields on the checkout screen
Capture attendee designation? Selecting this will add a designation field to the attendee capture fields on the checkout screen
Email tickets? Selecting this will email the tickets to the attendee once the order has been completed NB: Once you have completed these fields please make sure that you save your post before proceeding!

Ticket types and variations

You can create various ticket types using WooCommerce's attributes and variations functionality. To do this please follow these instructions:
  1. Go to the ‘Attributes’ tab in the Product Data panel
  2. Create a new attribute called ‘Ticket Type’. It’s very important that the attribute is called this as this is the name that is used to reflect the ticket type on the actual ticket
  3. Add the name of each ticket type under values and separate them with the pipe symbol ‘|’ e.g. VIP | General | Early Bird
  4. Make sure that you select ‘Visible on the product page’ and ‘Used for variations’
  5. Save the attributes
  6. Click on the ‘Attributes’ tab in the Product Data panel
  7. Add a variation for each ticket type and specify the relevant ticket criteria (price, in stock etc.)
  8. Make sure that you select ‘Enabled’
  9. We recommend that you select ‘Virtual’ if you do not want the shipping information to be displayed on the checkout screen
  10. Save/update the post once all variations have been added
  11. The ticket type variations will now display as ticket options when purchasing a ticket
Once your product is published it will appear in your WooCommerce store and users will be able to purchase tickets for your event

Global settings

FooEvents provides various global settings that can effect the behavior of your events and tickets. You can also customize the appearance of the FooEvents Pro app via these settings.
  1. Go to WooCommerce -> Settings
  2. Click on the 'Events' tab
  3. Change the default event settings as required
  4. Save changes

Event Settings

Global ticket border Sets the color of the border around the ticket
Global ticket button Sets the color of the button on the ticket
Global ticket button text Sets the color of the button text on the ticket
Global ticket logo URL to ticket logo file
Change add to cart text Changes "Add to cart" to "Book ticket" for event products
Hide event details tab Hides the event details tab on the product page
Hide unpaid tickets in app Hides the unpaid tickets in the iOS and Android apps
Email tickets to attendees Sends tickets to attendees rather than the purchaser. Make sure "Capture individual attendee details?" is enabled in your products
Hide unpaid tickets Hides unpaid tickets in ticket admin
Google Maps API key nable JavaScript API on Google Maps and copy the API key here

Event Settings

The following settings can be used to customize the appearance of the FooEvents Check-ins Pro app once you have logged in. You will find more information on the pro app and a download link here: http://www.fooevents.com/apps/pro
App logo URL to the image that will display on the app's sign-in screen. A PNG image with transparency and a width of around 940px is recommended
Color Used for the app's top navigation bar and sign-in button
Text color Used for the text in the app's top navigation bar and sign-in button
Background color Used for the sign-in screen's background
Sign-in screen text color Used for the text beneath the logo on the app's sign-in screen

Barcode and ticket theme directories

FooEvents stores barcodes and ticket theme within the /wp-content/uploads/fooevents directory.

Modifying ticket theme templates

  1. In your WordPress theme create the following directory structure: fooevents/templates
  2. Copy the template files that you would like to modify from the wp-content/plugins/fooevents/templates directory to the directory that you created in Step 1
  3. Modify the template files as required

Adding a purchased FooEvents HTML ticket theme

  1. Navigate to Tickets > Tickets Themes in your WordPress Admin Area
  2. Click the 'Browse' button and navigate to the .zip theme folder that you downloaded from the FooEvents website
  3. Click the 'Upload Ticket Theme' button
  4. The themes you purchased will now be available for use in your event products

Sending an HTML ticket preview

  1. Navigate to Tickets > Tickets Themes in your WordPress Admin Area
  2. Click the theme that you wish to preview. The default FooEvents ticket theme is named “Default”
  3. In the text input box, enter the email address where you would like to send the preview and click the “Send Ticket Preview” button
  4. The ticket will then be sent to the email address you specified
  5. Please Note: The ticket data is pre-populated test data and it is not from one of your valid events. Tickets sent via the preview option will not scan using the 'FooEvents Check-ins' app, nor will they match any of your generated tickets

Modifying a ticket theme template

  1. Copy the theme you wish to overwrite in wp-content/uploads/fooevents/themes/[FOOEVENTS-THEME-NAME] TO wp-content/themes/[WORDPRESS-THEME]/[FOOEVENTS-THEME-NAME]
  2. Make changes as required to the theme that you copied across

Managing tickets

Every ticket that is attached to a completed WooCommerce order will appear in the ‘Tickets’ admin menu.

To resend a ticket

  1. Open the ticket and specify the email address that the ticket should be resent to in the resend option box
  2. Click the resend button

Tickets statuses

Tickets will have one of the following ticket statuses:
  • “Not checked in”
  • “Checked in”
  • “Canceled”
You can check someone in by changing their status in the Ticket Status box to “Checked in”. The “Canceled” status can also be used to mark tickets that are no longer valid.

Manually creating tickets

There are two ways to manually create tickets:

1. From the WordPress Admin Area

  1. Click on the “Add new” button which you will find under "Tickets"
  2. Select the event name for the specified event
  3. Fill out the ticket form and click the “Publish” button to create the ticket
  4. Please Note: Tickets are NOT automatically sent out after creating the ticket. If you would like to email the ticket to the attendee, click on the 'Resend'”' button on the ticket information screen.

2. From your website

  1. Complete the purchase process on the front-end of your website
  2. Once you reach the payment screen, DO NOT make payment, instead go to the WooCommerce orders screen and mark the order as completed
  3. Tickets will be sent out using this method depending on your events settings

Barcodes

What is a barcode?

A barcode is a machine-readable code in the form of numbers and a pattern of parallel lines of varying widths, printed on a commodity and used especially for stock control.

How does FooEvents use barcodes?

Every ticket that is generated contains a unique barcode that is rendered using the barcode code 128 standard. If you own a scanner that can read ordinary 1D barcodes then you have the option of scanning tickets to find them quickly. We created the FooEvents Attendee Check-ins plugin to provide a better experience when using a 1D barcode scanner. The 'FooEvents Check-ins' apps can also be used to check-in people at events on your tablet or smartphone device.

Using the Event Check-ins Pro Auto check-in

If you’ve purchased the unbranded pro version of the FooEvents Check-ins app, you can make use of the auto check-in functionality by enabling it in the app’s settings panel. Auto check-in significantly speeds up the check-in process by checking in attendees automatically when their ticket is scanned instead of first opening the ticket and requiring you to tap on the ‘Confirm’ button to check in that attendee. If the ticket is unpaid, canceled or already checked in, you will be notified as you scan the ticket. You can still tap to open the ticket if you need to see its details. 

Customizing the Event Check-ins Pro app’s branding

If you’ve purchased the unbranded pro version of the FooEvents Check-ins app, you can customize the look of it to suit your brand. By changing the settings of your FooEvents for WooCommerce plugin, you are able to specify various colors and provide a URL to a logo that should display in the app. You can upload your logo in the WordPress Media library and then insert the generated URL to the image file in the settings panel input for your logo. A PNG image with transparency and a width of around 940px is recommended. You are able to change the colors of the following:
  • the top navigation bar and sign-in button
  • the text that appears in the top navigation bar and sign-in button
  • the sign-in screen’s background
  • the text that appears on the sign-in screen
When opening the pro app for the first time, it will display the default coloring and logo, but once you sign-in successfully, the interface will update with all the specified color values and uploaded logo. These values are stored on the device and will show instead of the default coloring and logo each time you open the app. The values are updated upon each successful sign-in, so if you need to make a change to any of the colors or the logo, you can just save the new settings in the FooEvents for WooCommerce plugin, sign out of the app and sign back in to get the updated values stored on the device.

Using the FooEvents Check-ins app

  1. Download the 'FooEvents Check-ins' app from either the Play Store (Android) or iTunes (iOS) http://www.fooevents.com/apps/
  2. Enter the following details on the login screen:
    1. URL - Your website URL (e.g. www.YOURWEBSITE.com)
    2. Username & Password - The access details of one of your WordPress users (e.g. 'admin')
Please Note: Access to the app is restricted to the following user roles: 'administrator', 'editor', 'author', 'contributor' and 'shop_manager'.

Download CSV attendees list

Click on the button labelled "Download CSV of Attendee" which will appear when you edit your product in the “Event” settings tab in your WordPress/WooCommerce Admin Area. This will generate a list of attendees who have been allocated tickets for that particular event.

Modifying the ticket template

  1. In your WordPress theme create the following directory structure: fooevents/templates/email
  2. Copy the template files in the wp-content/plugins/fooevents/templates/email directory to the directory that you created in Step 1
  3. Modify the template files as required