Replacing DJ Intelligence with WooCommerce

Friday Next builds a new Event Management System for Future Sounds DJ Service Back to Portfolio

Original MySQL Basic DB

I have been working with Chris Koval since June of 2015 on his website, Future Sounds. When I first met with him, his site was built from scratch with PHP and a MySQL database.

It worked, but without regular updates, more and more of the PHP functions became deprecated, and the site faced quite a few regular Fatal Errors that required constant fixes. After meeting with Chris, we decided to rebuild the site in WordPress and set up a system much easier to maintain and keep updated.

Future Sounds Conversion - Basic PHP to Responsive WordPress

Original PHP Website Converted to WordPress

The new site brought many improvements to the efficiency of Future Sounds, leveraging the power of Gravity Forms to process quote requests and payments (with Stripe).

When a Quote Request was submitted, a Custom Post Type Event would be generated, where clients could enter details about their events, additional contacts, schedules, itineraries, and even select music for their event.

Adding the Power of WooCommerce

It became obvious that this system could be massively improved by automating with WooCommerce. We rebuilt the quote / member / payment system using the following plugins:



WC Bookings

WooCommerce Bookings is used to ensure Chris never gets double-booked.



Checkout Field Editor

Grabs extra Event Information from clients during checkout.



WC Deposits

Paying a Deposit will confirm the Booking for a selected Event Package.

o

WC Product Add-ons

Extra event options can be selected for each Product Package.



WC Social Login

Clients can create accounts / log in with / link social profiles.



WC Stripe Gateway

Securely receive payments from clients directly to a Stripe account.

l

GF Signature Add-on

The Gravity Forms Siganture add-on allows clients to sign their event contracts.



GravityPDF

Completed client contracts are saved beautifully in PDF form, for easy future access.

Site Flow

View the automation process in this slider

01 Packages Pricing Table - Future Sounds DJ - Friday Next WordPress Development

1) Pricing Table

Users browse Package Pricing on the Pricing Table Page and select the Package they want for their event.

02 Package Product Page Availability Check - Future Sounds DJ - Friday Next WordPress Development

2) Availability

Clients are then able to check availability for each Package (using WC Bookings), so that Chris doesn’t get double-booked.

Some custom code on the back-end means they can select their start time in 30-minute increments.

3) Product Add-ons

Event Extras can be selected on the Product page with Product Add-ons.

Users also enter the Event Venue Zip Code, and a travel fee is dynamically calculated and added to the Cart Item Meta (using WC Hooks and Google Maps API).

4) Checkout

Event Details are gathered with Checkout Field Editor. The user either pays a $500 deposit, or event total. Either will confirm the event date in WC Bookings.

A Contract Number is automatically generated based on the event date and added to the Order / Event, and added to the Event meta / WC Order meta / WC Booking meta.

5) Admin Event

An ‘Event’ custom post type is automatically generated from the WC Order. Details from checkout populate the Custom Fields in this event.

In the WordPress Admin, this ‘Event’ contains a side meta box with links to the corresponding WC Booking and all related WC Orders.

6) Front End Event

Users can now log in to a custom-styled Account Dashboard to pay off their remaining balance order, view other orders, and update event details in a tabbed interface, using the Advanced Custom Fields framework.

07 Front End Event Custom Post Type - Future Sounds DJ - Friday Next WordPress Development

7) Event Details

Site Admins can now print out a table view of Event details to take to the Event for reference. Users can also update a variety of details for their event.

8) Custom Styles

Users can now sign a dynamically created Event Contract (with Gravity Forms), and save a beautifully designed PDF, generated from the ‘Contract’ form submission (using GravityPDF).

Dynamically Generated Contracts

No more need to manage and send manual documents with Word/Excel macros!

While Chris normally had to manage an Excel Spreadsheet with his clients’ information in order to generate a Word file Contract for them to sign, this site update brings along enhancements that will save him time and money, by automatically generating a Client Contract based on their filled-out Event Details.

The system will not allow a user to sign the contract unless all the required fields have been saved on their event (contact info, venue info, etc). Once they do sign the contract, they are presented with a beautiful PDF version of the contract, containing not only their digital signature, but also Chris’.

This digital version of their contract is now available for download from their Event dashboard at any time!

Code Snippets

Here are a couple snippets of code that made this integration really shine.

Getting Started

Hooking into woocommerce_checkout_update_order_meta, I was able to grab everything I needed from the Order Details, and create my Custom Post Type with its unique Custom Fields. This is what most of the integration is built on.

Saving Checkout Values

Checkout Field Editor makes it pretty easy to grab its values from the order meta, which is just what I did to save them in an array that would later be filtered into individual Post Custom Meta Fields for the ‘Event’ Custom Post Type.

Dynamic Travel Fee Calculator

The user enters the zip code of their Event Venue on the product page, and after tabbing out of that field, they will immediately see their travel fee. This fee will also be displayed as a line item on the checkout page.

One Item per Cart

As a starting point, only one product is allowed in the cart at a time. The most common purchase on this site will be for only one Booking anyway, but in the future, we might upgrade the system to allow more than one Event to be purchased at a time.

Ease of Navigation

Custom Info Meta Box - Future Sounds DJ - Friday Next WordPress Development To make it easier for Chris to navigate his site’s admin area, I created this meta box that shows up on on the side of an ‘Event’ Custom Post Type, making it very easy to get to the corresponding Booking / Order(s) tied to the currently viewed Event.

This also makes it easy to see if a customer is paid up or not, without needing to leave the ‘Event’ admin page.