Add Live Demo Button To Single Product in WooCommerce

Updated July 9, 2019     38 Comments
Originally posted April 2, 2013

WordPress Code Snippets

If instead you want to enter a custom demo URL for each product, jump down to that example.

This function adds a button to link to a live demo of your digital product. This link will be inserted on the single product page when using the WooCommerce plugin.

By default, this is set up to work if you keep your demos at:

http://yourdomain.com/product-title-slug

If you keep your demos elsewhere, modify the $demourl on line 11. See comments below for examples of other demo URLs.

See below if you want to limit this to only show the live demo button for a certain category.

PHP code goes in your functions

/**
* add live demo button to single product page
*/

function isa_before_add_to_cart_form() {

	global $post;

	$demoslug = $post->post_name;

	$demourl = get_bloginfo('url').'/'.$demoslug.'/';

        $demotitle = esc_attr($post->post_title);

	echo '<p><a href="'.$demourl.'" title="'.$demotitle.'" id="livedemo" class="button" target="_blank">Live Demo</a></p>';

}
add_action('woocommerce_before_add_to_cart_form','isa_before_add_to_cart_form');

Show Live Demo Button Only For Certain Categories

If you want to show the Live Demo button, using the code above, but you only want it to show up for certain categories, or only one category, this is how to do that.

You will specify which product categories you want to show the button for.

First, decide if you want to specify the product categories using their “slug” or their category ID number. You use only one of the next two snippets. Choose only one.

By Category Slug

If you want to use their “slug” then use this first snippet.

Just insert this code snippet into the top of the function above. That is, right inside the function, so into line 6 of the code above.

You must edit line 7 below to change product-cat-1 and product-cat-2 to your own product categories. These are the categories that you want the Live Demo button to show on. Be sure to list your category slugs with single quotes around them, and separated by comma if you list more than one.

	/****************************************************
	*
	* BEGIN - limit to certain categories
	*
	****************************************************/
	
	$my_category_slugs = array( 'product-cat-1', 'product-cat-2' );

	global $product;
	$show = 0;
	$current_product_cat_slugs = array();
	foreach( $product->get_category_ids() as $id ) {
		// get the slugs
		$current_product_cat_slugs[] = get_term( $id )->slug;
	}
	foreach( $my_category_slugs as $my_slug ) {
		// if my slug matches any of the current product cat slugs, show the demo button
		if ( in_array( $my_slug, $current_product_cat_slugs ) ) {
			$show = 1;
			break;
		}
	}
	if ( ! $show ) {
		return;
	}

	/****************************************************
	*
	* END - limit to certain categories
	*
	****************************************************/

By Category ID Number

If you want to specify your categories with just the category ID number instead of the slug, then use this next code instead of the above.

Why would you want to use the category ID number instead of the slug? Because it is more efficient. Not a noticeable difference for tiny shops, but for larger shops with many product categories, definitely go with IDs instead of slugs.

So, you would insert this next code snippet into the top of the function above (the first function at the top of the page). That is, right inside the function, so into line 6 of the first function on this page.

You must edit line 7 below to change 123 and 456 to your own product category IDs. These are the categories that you want the Live Demo button to show on. Be sure to list your category IDs without any quotes around them. Separate them by comma if you list more than one.

	/****************************************************
	*
	* BEGIN - limit to certain categories
	*
	****************************************************/
	
	$my_category_ids = array( 123, 456 );

	global $product;
	$show = 0;
	$current_product_cat_ids = $product->get_category_ids();
	foreach( $my_category_ids as $my_id ) {
		// if my id matches any of the current product cat ids, show the demo button
		if ( in_array( $my_id, $current_product_cat_ids ) ) {
			$show = 1;
			break;
		}
	}
	if ( ! $show ) {
		return;
	}

	/****************************************************
	*
	* END - limit to certain categories
	*
	****************************************************/

Add a Custom Live Demo Link For Each Product in Admin Panel

This is a completely separate example from anything above.

This is how to add a custom Demo link for each product when you are creating or editing a product in the admin panel. It is actually very easy and quick. This is different from the above code because this lets you manually enter a demo link for each product individually. You will do this in your admin panel.

This will add a new “Demo URL” field in the WooCommerce “Product data” box, right under the price fields. In that field, you can enter a demo URL for the product. Then, when a visitor looks at that product page, they will see the link to view the Live Demo. The link will only appear if you have entered the Demo URL for that product. Remember that you have to click “Update” to save your changes after you edit your product.

The following code works as is. You don’t have to edit anything, however you may want to make the following optional changes.

Optional Changes

  • Edit the link text. The link text is “Live Demo” but you can change that on line 9.
  • Make it appear as a link instead of a button. By default, this makes it look like a button. You can make it look like a simple link by removing class="button" from line 8.
  • Make the Live Demo link appear also on the main Shop page. To do this, add this line of code at the bottom: 
    add_action('woocommerce_after_shop_loop_item','isa_before_add_to_cart_form');
  • Edit the textdomain in case you are distributing this code to the public in a theme or plugin. (Lines 9, 23, 26.)

That’s all of the optional changes. Now, here is the code. Again, it works as is, so just drop it in your functions, and start adding your Demo URLs to your products.

PHP code goes in your functions

/**
* Show a Live Demo button on single product page
*/
function isa_before_add_to_cart_form() {
 	global $product;
	$url = get_post_meta( $product->get_id(), '_isa_wc_product_demo_url', true );
	if ( $url ) {
	    echo '<p><a href="' . esc_url( $url ) . '" id="livedemo" class="button" target="_blank" rel="noopener">' .
	    __( 'Live Demo', 'textdomain') .
	    '</a><p>';
	}
}
add_action('woocommerce_before_add_to_cart_form','isa_before_add_to_cart_form');

/**
 * Display the Demo URL field in the Product Data metabox
 */
function isa_wc_product_add_demo_url_field() {
	echo '<div class="options_group">';
	woocommerce_wp_text_input( 
		array( 
			'id'          => '_isa_wc_product_demo_url',
			'label'       => __( 'Demo URL', 'textdomain' ), 
			'placeholder' => '',
			'desc_tip'    => 'true',
				'description' => __( 'Set a URL that will be displayed on the product page to link to a demo of this product. Full URL starting with "https://"', 'textdomain' )
		)
	);
	echo '</div>';
}
add_action( 'woocommerce_product_options_general_product_data', 'isa_wc_product_add_demo_url_field' );

/**
 * Save the Demo URL field value when the produc is saved
 */
function isa_wc_product_save_demo_url_value( $post_id ) {
	$val = trim( get_post_meta( $post_id, '_isa_wc_product_demo_url', true ) );
	$new = sanitize_text_field( $_POST['_isa_wc_product_demo_url'] );
	if ( $val != $new ) {
		update_post_meta( $post_id, '_isa_wc_product_demo_url', $new );
	}
}
add_action( 'woocommerce_process_product_meta', 'isa_wc_product_save_demo_url_value' );

See more:

We've 38 Responses

    • March 2nd, 2014 at 9:14 pm

      To add the Live Demo button appear also on the Shop page, add this line of code at the bottom:

      /**
* add live demo button to the Shop page (and shop category archives)
*/
add_action('woocommerce_after_shop_loop_item','isa_before_add_to_cart_form');
      Reply ↓
      Isabel

  2. March 1st, 2014 at 5:57 pm

    Hi,

    Thank you your post has been useful to us.I need some additional help for our site.How to add my live demo URL to each product.I am having different live demo URL for all products.Kindly suggest any idea.

    Thank you.

    Reply ↓
    Thanveer

  3. December 16th, 2014 at 8:52 am

    Nice post! I’m a rookie on PHP. I have my live demos on subdomains of one single domain. Each demo have a different subdomain.
    How can i use this?
    Thanks

    Reply ↓
    Ricardo

    • December 16th, 2014 at 10:48 am

      What is the structure of your subdomains for your demos? Are they like this:

      http://product-title-slug.yourdomain.com

      The subdomains have to be of some uniform structure for this to generate a link for each demo.

      Reply ↓
      Isabel

        • December 16th, 2014 at 9:40 pm

          Yes, thanks. So, you can just change line 11 (the demo url) in the snippet at the top of the page to this:

          // get just the domain without http
$home_url = home_url();
$find = array( 'http://', 'https://', 'http://www.', 'https://www.', 'www.' );
$domain = str_replace( $find, '', $home_url );
// put the new url together
if (is_ssl()) {
	$protocol = 'https';
} else {
	$protocol = 'http';
}
$demourl = $protocol . '://' . $demoslug . '.' . $domain;

          That will generate demo links to http://product-slug.domain.com. Hope that helps.

          Reply ↓
          Isabel

  5. December 29th, 2014 at 4:51 am

    Hi Isabel,

    I found your solution for live demo button but I need some more information. Which file should be modify to apply this? Is this article part of some particular plugin?

    Reply ↓
    Dawid

    • December 30th, 2014 at 7:20 pm

      It’s not part of a plugin. This can be added to any of several places:

      1. Your theme’s functions.php file (but it will be erased on theme updates).
      2. Your child theme’s functions.php file, if you’re using a child theme.
      3. You could easily make it into a plugin.

      Hope that helps.

      Reply ↓
      Isabel

  7. February 2nd, 2015 at 3:53 am

    Hi Isabel, Thanks for sharing a life saving snippet. Its work perfectly, but how I can do for: http://demo.siteyourl.com/product-title-slug ??

    Any help?

    Reply ↓
    Nazmoon Munnny

    • February 2nd, 2015 at 9:24 am

      Hello,
      It should work if you replace line 11 with this:

      // get just the domain without http
$home_url = home_url();
$find = array( 'http://', 'https://', 'http://www.', 'https://www.', 'www.' );
$domain = str_replace( $find, '', $home_url );
// put the new url together
if (is_ssl()) {
    $protocol = 'https';
} else {
    $protocol = 'http';
}
$demourl = $protocol . '://demo.' . $domain . '/' . $demoslug;

      I hope that helps.

      Reply ↓
      Isabel

  8. April 18th, 2015 at 4:38 pm

    Hi! Thanks, for this tutorial. I created the button succesfully, but the link is not working. My demos are productslug.mydomain.com, I used the second code you provided but the resulting URL is mydomain.com/shop/:/productslug.

    Any idea about what can I change in the code.

    Thanks!

    Reply ↓
    Maira

  9. September 28th, 2015 at 12:02 pm

    Hi,

    I tried your original code and the button shows up, but 2 questions:

    1. My demos are connected to the same URL as the website, but they appear as:
    http://mysite/demo/postname
    (the problem here is that the postname is actually a page slug name. So, basically, I created a page that has an iframe of the demo on it. How would this work, so that for example:

    1. I click on the individual product page for a product called “Test”.
    2. I click the “View Demo” button and want it to display: “http://mysite/demo/test”
    3. I click on another individual product page for a product called “Sample”.
    4. I click the “View Demo” button and want it to display: “http://mysite/demo/sample”.
    If this is possible, can you show a code example?

    And 2., Is it possible for the “View Button” to appear beside the “Add To Cart” button, and if yes, what would I change in the code?

    Thanks!

    Reply ↓
    Dab

    • September 29th, 2015 at 10:07 am

      Hi.
      1. For the link, change line 11 to this:

      $demourl = get_bloginfo('url').'/demo/'.$demoslug;

      2. To have the button appear next to the “Add To Cart” button, make the following change to line 18:

      Change this piece: woocommerce_before_add_to_cart_form

      to this: woocommerce_after_add_to_cart_button

      Depending on your theme’s styles, you may want to add some space between the 2 buttons with this CSS:
      #livedemo { margin-left:8px; }

      I hope that helps.

      Reply ↓
      Isabel

  10. June 12th, 2016 at 4:01 pm

    Thank You Isabel. Your demo button snippet has really helped me in my project. Thank you for sharing this knowledge with the world.

    Reply ↓
    Rowney Omondi

  12. August 4th, 2017 at 9:50 am

    Thank you Isabel, this code is wonderful. It works great. I am wondering if you can suggest a way to have this button show up on products that are ONLY in a certain category?

    Thank you.

    Reply ↓
    Sean Smith

  14. May 10th, 2018 at 5:07 am

    Hello Isabel,

    I am a new coding also. How can we add link to Live Demo button when we create product with woocommerce?

    Many thanks,

    Reply ↓
    Jonh

  15. May 17th, 2018 at 10:46 am

    How can you use this not for a dynamic element, but a static URL? For example, people can buy my products locally, and on my website. I want an additional button next to Add to Cart that says “Buy Local” and it takes them to /local

    Thoughts?

    Reply ↓
    Corey

    • July 10th, 2019 at 2:33 pm

      You can use this to add a link to a static URL on the single product page. You can change the URL on line 3, but this example goes to /local. You can change the visible text on line 4.

      function isa_before_add_to_cart_form() {
    
    $url = get_bloginfo('url').'/local';
    $text = 'Buy Local';
  
    echo '<p><a href="' . $url . '" id="livedemo" class="button" target="_blank">' . $text . '</a></p>';
}
add_action('woocommerce_before_add_to_cart_form','isa_before_add_to_cart_form');
      Reply ↓
      Isabel

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]