WooCommerce Product Preview Link

WooCommerce product page link to a custom url


There are no pre-requisites in order for you to be able to implement this solution.

How To Implement This Solution?

Simply copy the pre-coded solution to your active theme’s functions.php or preferably the Code Snippets Plugin.

About this Solution

Long story short, this solution shows a button on the single product template which links to a URL of your choice. If you leave the custom field empty, the button will not show. Now, we’re a big fan of Advanced Custom Fields (ACF) but we try to minimise the amount of plugins per solution. This particular solution introduces a new custom field in the product editor without the use of a plugin like ACF which allows you to enter a URL. This URL is where the user will go when they click the new View Demo button they’ll see on the single product template. If you sell music, this solution will be useful if you want to link to a short snippet of it. It may good if you sell an ebook and want to link to a preview chapter. If you sell templates for websites, this button will allow users to see a preview before buying. After implementing the code snippet, enter the appropriate URL in the product data metabox, then take a look at the product page…see where the View Demo button takes you.

 * Snippet Name:     WooCommerce Custom Product Data Metabox For Custom Button Link
 * Snippet Author:   ecommercehints.com

add_action ('woocommerce_product_options_advanced', 'ecommercehints_product_data_metabox');
function ecommercehints_product_data_metabox() {
   echo '<div class="options_group">';
   woocommerce_wp_text_input (array (
      'id'                => 'demo_url',
      'value'             => get_post_meta (get_the_ID(), 'demo_url', true),
      'label'             => 'Demo URL',
      'description'       => 'The button link'
   echo '</div>';

add_action ('woocommerce_process_product_meta', 'ecommercehints_save_field_on_update', 10, 2);
function ecommercehints_save_field_on_update ($id, $post) {
      update_post_meta ($id, 'demo_url', $_POST['demo_url']);

function ecommercehints_content_after_add_to_cart_form() {
   global $product;
   $demo_url = $product->get_meta ('demo_url');
   echo '<a class="button" href="' . $demo_url . '" target="_blank">View Demo</a>';

add_action ('woocommerce_after_add_to_cart_form', 'ecommercehints_content_after_add_to_cart_form', 10, 0);

Snippet Benefits

  • Allow users to view a preview of your product before buying.
  • Send users to a custom, product-unique url from the single product page.
WooCommerce Conversion Rate Optimisation (CRO) eBook
100 WooCommerce Conversion Rate Optimisation Tips

Leave a Reply

If you are going to write code in the comments, please wrap it between code tags.

Your email address will not be published. Required fields are marked *

Other Recent Guides

Subscribe To Emails

Get exclusive WooCommerce tips that I only share with email subscribers

Join hundreds of other subscribers