How to show demo button to an external link?

Hi Tom,

It doesn't matter where I add the buttons. I tried with the woocommerce_after_shop_loop_item_title and woocommerce_shop_loop_item_title hooks but the issue persists. What do you mean with removing the span tags?

I mean doing something like this:

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

Sorry, I thought you were referring to the span tags with no content from my screenshot. I added the tags because I was hoping that this trick will solve this issue somehow. It makes no difference if I remove the span tags from my function :/ That's really weird and I don't know what I need to do. I don't like to have html lines with hyperlinks with no content... that doesn't look good from a SEO perspective either.

I wonder if it's an issue with the hook.

What if you just did this?:

add_action( 'woocommerce_before_shop_loop_item_title', function() {
    $urlr = get_post_meta( get_the_ID(), 'product_demo_url', true );
    if ($urlr) :
    ?>
    testing
    <?php
    endif;
} );

It works with text but doesn't work with hyperlinks and I need to add the link. It's not the first time I notice this behavior with links inside a function.

That means it's likely an issue with the hook.

Maybe try woocommerce_before_shop_loop_item instead?

I tried it and it's the same problem :(

I see the issue. That hook is already wrapped in a link, and you can't add a link within a link.

You would have to do something like this:

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

Oh god... you're right with the link inside the link, lol!!! But I still want to add the button inside the wc-product-image wrapper because I want to show the button when I mouseover the product image (it should appear inside the product image). Do you have any idea how can I do this or move the link to wrap only the image (img tag)? Thank you and sorry for bugging you with so many questions!

Not sure if this will work, but you can try moving the standard link:

remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 );
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 100 );

Hi Tom,

Thank you for the code but the link is still wrapping the wc-product-image container.

Any chance you can link me to the page?

Sorry but my site is under construction and I would prefer to leave it like that because I don't want my visitors to see a total disaster. I'm not sure why it is necessary to see it, it's the same theme and I didn't make any major changes to it. Only css coding here and there...

I want the demo link to appear like on this theme http://demo.megathe.me/skylab/ (you can see the view demo button on the hero section).

Hi there,

it's rare that Tom asks for access to the site, which means it must be important for him to help you achieve your requirements. Would you be willing to provide us with temporary login ? If so you can share the details via the Account Issue form here:

https://generatepress.com/contact/

Please add the URL for this topic to the form so it can be tracked.