How to show demo button to an external link?

Hi there,

You should be able to use a hook for that: woocommerce_after_add_to_cart_button

Where would the URL come from for the button?

The URL will be inside the single product page - more exactly in the Header element where I will include the short description with the Add to cart button. If you could provide a code snippet to display the live demo link for each product on the shop/product archive page, it would be super awesome. Thank you so much for all of your help!

So that URL would likely need to come from a custom field.

Then you could try this:

add_action( 'woocommerce_after_add_to_cart_button', function() {
    $url = get_post_meta( get_the_ID(), 'your_custom_field_key', true );

    if ( $url ) :
    ?>
        <a class="button" href="<?php echo $url; ?>">Your button text</a>
    <?php
    endif;
} );

Hi Tom,

Unfortunately, this didn't work. I created a custom field with the name product_demo_link, then added the URL in the Value field and updated the Header element with the {{custom_field.product_demo_link}} tag. Also, I replaced your_custom_field_key with product_demo_link in the code above but it shows nothing. Have I done something wrong?

Update: now I triple checked and it seems that your code adds the button on the single product page rather than on shop or archive product pages. How can I show it on the shop pages where all the products are listed?

I added it using woocommerce_after_shop_loop_item_title hook. Yay! Thank you so much, you are awesome!

One more question: is there a way to echo the short product summary with the stars rating and add to cart button in the hero content? At the moment I'm hiding the product summary (and use custom fields instead) and I'm afraid that it will affect the SEO of my site.

I helped with some of that here: https://generatepress.com/forums/topic/i-want-to-add-product-details-to-the-header-element/

I'm not sure about the star ratings/add to cart button currently, but hopefully WooCommerce support can help with some functions we can use.

Ah, too bad that the short description cannot be replicated, this could have saved a lot of time. Thank you anyways :)

No problem :)

Hello,

I've managed to style the product summary the way I wanted and removed the Header element but now the demo button doesn't appear anymore (since there are no custom fields). How can I show the demo button inside the short product description on the shop/category pages? Sorry for bugging you again :(

Edit: Nevermind, I added the value for the custom field again and now it works.

Hi there.

I added this code because I need to display the buttons inside the inside-wc-product-image container:

add_action( 'woocommerce_before_shop_loop_item_title', function() {
    $urlr = get_post_meta( get_the_ID(), 'product_demo_url', true );
    if ($urlr) :
    ?>
    <span><a class="button demo-btn" href="<?php echo $urlr; ?>" target="_blank" rel="nofollow">View Demo</a></span>
    <?php
    endif;
} );

And I noticed that the html code is not properly formatted - see the arrows: https://ibb.co/TLc3Yrw

The product titles also don't display as links... just plain text. Can somebody help me solve this issue? Thank you.

Hi there,

That HTML seems fine. Does the formatting issue go away if you disable that function?

Yes, Tom. If I disable the function, the hyperlink wraps the product title as it should. If I activate it back, it creates three HTML codes with links containing no text or code that makes sense or has any purpose. It doesn't look right to me at all.

And if you remove the <span> element?

I'm not seeing any reason for that to happen.