Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Display shortcode over image thumbnail woocommerce WordPress

  • SOLVED

Hello I am looking to add a shortcode to display over product image thumbnail but the code I am using is not working correctly.

I want the code below to display if product category is led shoes. I have attached thumbnail for example.

add_action('woocommerce_after_single_product_summary', 'html_below_thumbnails', 9);
function html_below_thumbnails() {
echo do_shortcode('[su_lightbox src="https://www.youtube.com/watch?v=qJK3hi9cPzo"]<img class="size-full wp-image-543930 alignnone" src="https://brightledshoes.com/wp-content/uploads/2019/05/playbtn.png" alt="" width="125" height="24" />[/su_lightbox]');
}


You may see website here https://brightledshoes.com/shop/gold-high-mens/

Answers (2)

2019-05-09

Rempty answers:

change the add_action parameters , function and add the css

add_action('woocommerce_before_single_product_summary', 'html_below_thumbnails', 9);
function html_below_thumbnails() {
echo do_shortcode('[su_lightbox src="https://www.youtube.com/watch?v=qJK3hi9cPzo"]<div class="image_video_thumb"><img class="size-full wp-image-543930 alignnone" src="https://brightledshoes.com/wp-content/uploads/2019/05/playbtn.png" alt="" width="125" height="24" /></div>[/su_lightbox]');
}


the styles
.image_video_thumb{
position: absolute;
left:0;
z-index:10
}


George Sprouse comments:

Hi this works great. Do you know how to make code display only in specific product category?


Rempty comments:

Something like this
add_action('woocommerce_before_single_product_summary', 'html_below_thumbnails', 9);
function html_below_thumbnails() {
global $post;

if ( has_term( 'Categoryname', 'product_cat', $post->ID ) ) {
echo do_shortcode('[su_lightbox src="https://www.youtube.com/watch?v=qJK3hi9cPzo"]<div class="image_video_thumb"><img class="size-full wp-image-543930 alignnone" src="https://brightledshoes.com/wp-content/uploads/2019/05/playbtn.png" alt="" width="125" height="24" /></div>[/su_lightbox]');
}
}


replace "Categoryname" with the category name

2019-05-10

Arnav Joy answers:

you can try this
add_action('woocommerce_before_single_product_summary', 'html_below_thumbnails', 9);
function html_below_thumbnails() {
global $post;

if ( has_term( 'simulation', 'product_cat', $post->ID ) ) {
echo do_shortcode('[su_lightbox src="https://www.youtube.com/watch?v=qJK3hi9cPzo"]<div class="image_video_thumb"><img class="size-full wp-image-543930 alignnone" src="https://brightledshoes.com/wp-content/uploads/2019/05/playbtn.png" alt="" width="125" height="24" /></div>[/su_lightbox]');
}
}