How to sell tickets with Woocommerce?

In this tutorial I’m going to show you how to set up a ticket selling system with Woocommerce for free. It is fairly easy and is probably going to take you 10-15 minutes to accomplish that. Take a look at the screenshot here below to get better understanding what is it we are going to do. So, let’s dive in.

This is the end result

Video: How to sell tickets with Woocommerce?

First, you need to create a product which you will sell as a tour or event.

If this solution here below is too technical for you, then see this video here which allows you to sell tickets with Woocommerce with the help of the Eventin Plugin. You can grab this plugin with 20% discount here (SAVE 20% coupon is WPSH20)

Here’s a video tutorial on how to use this plugin.

Set it up virtual product for your tour

Pay attention that it has to be set as “virtual product”, otherwise Woocommerce checkout page will ask you to set up shipping methods. So, be sure to select the “Virtual” in the product options.

Next, you can set up both variable or simple products. In this example I am setting up a variable product and I will call it “Ski tour”. It has two attributes:

• I have my own skis (125€)
• I will rent skis (155€)

Enable stock management at product level

Since I offer only 10 places to this tour I have to enable stock management and since I am using variable product I enable stock management at product level. This will ensure that for both variations together there is only 10 tickets available.

Nothing else but description and gallery images to add and save it and no you’re basically good to go.

Add a custom text field to Woocommerce products

I want my tours to show the event date on archive pages and single product pages. Therefore, I will create a custom field I can fill up while setting up a product. Therefore, I will add this small code snippet using either Code Snippets plugin or inside your child theme’s functions.php file. I would suggest you to use the Code Snippets plugin though.

// Show custom field in single product editing page
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

// Save custom field values
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {
  global $woocommerce, $post;
  echo '<div class="options_group">';
	
// Add text field inside single product editing tab
woocommerce_wp_text_input(
	array(
		'id'          => '_text_field',
		'label'       => __( 'Tour date', 'woocommerce' ),
		'placeholder' => 'Enter relevant dates',
		'desc_tip'    => 'true',
		'description' => __( 'For example 12.02.2022', 'woocommerce' )
	)
);

  echo '</div>';
}
// Save from admin side
function woo_add_custom_general_fields_save( $post_id ){

// Show it on the single product

	$woocommerce_text_field = $_POST['_text_field'];
	if( !empty($woocommerce_text_field ) ){
		update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) );
	} else {
	  $woocommerce_text_field = null;
		update_post_meta( $post_id, '_text_field', esc_attr( $woocommerce_text_field ) ); 
	}
}
// Show the value in frontend single product page
add_action( 'woocommerce_single_product_summary', 'display_custom_field_value', 1 );
function display_custom_field_value(){
  $textfield=get_post_meta( get_the_ID(), '_text_field', true );
  if(!empty($textfield)){
    echo '<div class="woocommerce-message">'.$textfield.'</div>';
  }
}
// Show the value on archive pages
add_action( 'woocommerce_after_shop_loop_item', 'display_custom_field_value1', 1 );
function display_custom_field_value1(){
  $textfield=get_post_meta( get_the_ID(), '_text_field', true );
  if(!empty($textfield)){
    echo '<div class="customfield">'.$textfield.'</div>';
  }
}

This will create a custom text box on your product page. See the screenshot.

If you fill the text box then the value will appear on the archive page and single product page. Now I’m going to customize the appearance of the archive page text box with this CSS here below. Add it to the Customizer >> Additional CSS.

Pay attention though that you probably have to customize this CSS code to suit your themetheme.

.woocommerce ul.products li.product .customfield {
display: inline-flex ;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 13px;
    font-weight: 600;
    line-height: 0;
    text-transform: uppercase;
    color: #000;
    background-color: #ffcc00
}

Change Woocommerce XX in stock text

Since Woocommerce shows “10 in stock” instead of “Total tickets available” I have to tweak it a bit. Therefore, create a new Code snippet and add this small snippet here below.

// Change XX in stock text
add_filter( 'woocommerce_get_availability_text', 'quantity_text', 99, 2 );
  
function quantity_text( $availability, $product ) {
   $stock = $product->get_stock_quantity();
   if ( $product->is_in_stock() && $product->managing_stock() ) $availability = '<strong>Total tickets available:</strong> ' . $stock;
   return $availability;
}

This will replace the Woocommerce “10 in stock” text wit “Total ticket available” text.

Change the Woocommerce “out of stock” text

Next thing I have to deal with is the Woocommerce out of stock text. Instead of it I want to show “Sold out” text. So, I’ll add another Code snippet.

// Change out of stock text
add_filter('gettext', 'translate_strings');
add_filter('ngettext', 'translate_strings');
function translate_strings($translated) {
$translated = str_ireplace('Out of stock', 'Sold out', $translated);
return $translated;
}

Add “Select the number of tickets” text above the quantity selector

Take a look at the screenshot here and see the text above the Quantity field. The code snippet below will make this happen.

add_action( 'woocommerce_before_add_to_cart_quantity', 'toote_teade222' );
function toote_teade222() {
echo 'Select the number of tickets';
}

Add Total Price Calculation to your WooCommerce Product Page

Did you notice the “Total price: €125” on the screenshot above? This will calculate subtotal on quantity increment and in order to add it add this code snippet here below.

// Add total price under qty selector

add_action( 'woocommerce_after_add_to_cart_button', 'woocommerce_total_product_price', 31 );
function woocommerce_total_product_price() {
    global $woocommerce, $product;
    // let's setup our divs
    echo sprintf('<div id="product_total_price" style="margin-bottom:20px;">%s %s</div>',__('Total price:','woocommerce'),'<span class="price">'.$product->get_price().'</span>');
    ?>
        <script>
            jQuery(function($){
                var price = <?php echo $product->get_price(); ?>,
                    currency = '<?php echo get_woocommerce_currency_symbol(); ?>';
                $('[name=quantity]').change(function(){
                    if (!(this.value < 1)) {
                        var product_total = parseFloat(price * this.value);
                        $('#product_total_price .price').html( currency + product_total.toFixed(2));
                    }
                });
            });
        </script>
    <?php
}

Change Woocommerce notification location on single product page

Now, there is one more thing to fix. If someone adds more tickets to the cart than there is available then the Woocommerce shows error notification, which unfortunately appears on top of the page and can be easily missed. Therefore, I’m going to change Woocommerce notification location on single product page with this small code snippet here.

remove_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_after_add_to_cart_form', 'woocommerce_output_all_notices', 10 );

This will move the error notification below the add to cart button.

Replace variation dropdown with radio buttons

It looks much better if instead of the dropdowns the attributes are shown as radio buttons (see the first screenshot above). This I can achieve with the help of free Product Variations Swatches for WooCommerce plugin by Villa theme. Just install it and set the default display type to Radio.

Replace quantity selector with dropdown

This allows customers easily to choose the right amount of tickets without the need to click them one by one. So, I will install free All in One Product Quantity for WooCommerce plugin by WPWhale. Next, go to Woocommerce >> Settings >> Product quantity >> general and enable it.

Now go to Quantity Dropdow tab and activate this also.

Change the Woocommerce single product layout with Blocksy theme

Alternative Method with WooCommerce to Sell Event Tickets

If you’re looking to sell event tickets with WooCommerce and are interested in trying the alternative method, check out this tutorial for a detailed guide on how to set it up.

Useful Woocommerce tips