Custom Button next to “ADD TO CART” button of WooCommerce based on Product Type

Change

the_field('url_demo');

to

 get_field('url_demo');

For some reason LoicTheAztec's answer did not do it for me.

Here is what worked:

function wc_shop_demo_button() {
    echo '<a class="button demo_button" href="'.get_field( "url_demo" ).'" target="_blank">View Demo</a>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button' );

Hope that helps someone in their journey.

I am using another way to do it: WooCommerce hooks.

You don't need anymore the jQuery script and also the javascript located in your header.php file, so you can erase them.

Using get_field() instead of the_field (thanks to Deepti chipdey) to get only the value concatenated in the echoed string.

Paste this code snippet in your function.php file located in your active child theme or theme folder:

function wc_shop_demo_button() {
    echo '<a class="button demo_button" style="padding-right: 0.75em;padding-left: 0.75em;margin-left: 8px; background-color: #0ebc30;" href="'.get_field( "url_demo" ).'" target="_blank">View Demo</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'wc_shop_demo_button', 20 );
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_demo_button', 20 );

I have target the hooks used to display Add to cart button on shop page and in single product pages, to display your View demo button after it, buy lowering the priority.