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

How to sell tickets with Woocommerce?

Video: How to sell tickets with Woocommerce?

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

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.

How to add a custom text field to Woocommerce products?

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 "Select the number of tickets" text above the quantity selector
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

How to sell tickets with Woocommerce?

So far, so good and basically everything is done. BUT since I am using awesome Blocksy Pro theme I can change the single product page in a way that it looks much better than regular Woocommerce product page. Take a look at the screenshot here on the left.

Click on the image to enlarge it.

Doesn’t it look good? So, if you are interested in Blocksy theme then see here.

If you already have a Blocksy Pro theme then go to Customizer >> Woocommerce >> Single product page and choose a suitable layout for you site. Currently, there is four different ones for you to choose.

Useful Woocommerce tips

Here are some of my favorite Wordpress tools

Thank you for reading this article. I hope you found it helpful as you build your own websites and e-commerce sites. Here are some tools I use as a Wordpress developer and enthusiast that I hope you’ll also find helpful.

These are affiliate links, so if you do decide to use any of them, I’ll earn a commission and this helps me create these tutorials and make Youtube videos. But in all honesty, these are the exact tools that I use and recommend to everyone, even my friends and family.

Themes: For the last couple of years I have two go-to themes which I use for every kind of projects. Those two themes are Blocksy theme and Kadence Theme. On this site and my Youtube channel you’ll see a lot of tutorials I have made about them. If you would like to get a 10% discount for both of them then:

Contact forms: There are hundreds of contact forms out there but Fluent Forms is the one I like the most. If you need a 20% discount then use this link (save 20% coupon is WPSH20).

Gutenberg add-ons: If I need a good Gutenberg blocks add-on then Kadence Blocks is the one I have used the most. You’ll get 10% discount with the coupon SIMPLEHACKS here.

Website migration: While building a website you probably need a good plugin that can help you with the migration, backups, restoration and staging sites. Well, WpVivid is the one I have used for the last couple of years. If you use this link along with the WPSH20 coupon you’ll get 20% discount.

Woocommerce extensions: There are a bunch of Woocommerce extensions that I really like but the one that stands really out is Advanced Dynamic Pricing. Once again, you’ll get a 20% discount if you use this link here (save 20% coupon is WPSH20)

Web Hosting: For getting started, I really like A2 Hosting. They have the dedicated and fast Wordpress hostinh and support has also been fast and responsive. If you’re more tech savvy and want to have a really fast managed cloud hosting then I recommend Cloudways. (Btw, this site is hosted in Cloudways.)

To see all my of most up-to-date recommendations, check out this resource that I made for you!

Do you want to thank me and buy me a beer?

Every donation is entirely welcome but NEVER required. Enjoy my work for free but if you would like to thank me and buy me a beer or two then you can use this form here below.

Choose amount

Best selling plugins

Default image
Janek T.
I am a Wordpress enthusiast who has been making websites since 2011. In this site I am offering simple to follow tips on how to use Wordpress and Woocommerce. If you want to be the first to be notified about the new tutorials then please subscribe to my Youtube channel here Follow me in Twitter here
Articles: 72