WordPress – How to use shortcode in PHP files - php

Question

I set up WordPress with the WooCommerce Plugin and the products get looped out...all good till there.
I wanted to add the possibility that visitors are able to upvote a product. So I was looking for a plugin and found one.
But that's the actual problem! The plugin called "Like-Photo" offers me the WordPress shortcode function. If I insert the shortcode in the WordPress editor (before and after the image) all is working fine.
But I need to put that code in the PHP file (the one that loops out the products) itself.
So I tried using the PHP echo function for the shortcode as you can see below. It's not working at all. When I open up the inspector tools in my browser I only see the second shortcode part rendered out in text and it's supposed to create a div (what it does, when I paste in the shortcodes inside the WordPress post editor).
How can I fix this?
<?php echo do_shortcode('[add_voting]'); ?> <!-- shortcode beginning-->
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <!-- The loop for the items-->
<div class="image-box">
<div class="voteup_layer">
<div class="voteup_layer_triangle">
<div class="voteup_layer_triangle-inner"></div>
</div>
<p>CLICK 2 UPVOTE</p>
</div>
<div class="sb_title"><?php the_title(); ?></div>
<div class="arrow-up"></div>
<div id="num-id" class="count-num">20.453</div>
<a href="<?php the_permalink(); ?>">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
if ( has_post_thumbnail() ) {
//echo get_the_post_thumbnail( get_the_ID(), array(370,370) );
echo get_the_post_thumbnail( get_the_ID(), 'home-small-box' );
}
?>
</a>
</div>
<?php echo do_shortcode('[/add_voting]'); ?> <!-- shortcode end-->
I'm getting this HTML output:
<div class="home_small_box ">
<div class="image-box">
<div class="voteup_layer">
<div class="voteup_layer_triangle">
<div class="voteup_layer_triangle-inner"></div>
</div>
<p>CLICK 2 UPVOTE</p>
</div>
<div class="sb_title">FOSSIL <br> <span class="thin">Moon Explorer</span></div>
<div class="arrow-up"></div>
<div id="num-id" class="count-num">20.453</div>
<a href="http://online.com/product/fossil-moon-explorer/">
<img width="360" height="360" src="http://online.com/wp-content/uploads/2015/08/shopping-1-360x360.jpg" class="attachment-home-small-box wp-post-image" alt="shopping-1">
</a>
</div>
"[/add_voting]"
And want (this is how the HTML gets rendered once I add the shortcode inside the WordPress editor – it creates a div called "like-photo-wrapper" around the image where I placed the shortcode and adds the ability to vote):
<div class="like-photo-wrapper">
<a href="http://online.com/wp...2.jpg">
<img src="http://online.com/wp...300.jpg" alt="shopping-2" >
</a>
<div class="votes"><span class="currentVotes">Votes: 0</span>
vote on this image
</div>
</div>
The shortcode isn't working properly in my PHP code.

Answer 1

Check out the documentation for do_shortcode.
The gist of it is that the call to do_shortcode for a shortcode that wraps content should be like this
// In case there is opening and closing shortcode.
echo do_shortcode( '[iscorrect]' . $text_to_be_wrapped_in_shortcode . '[/iscorrect]' );
You can try something like this using output buffering to capture the output and pass it into your shortcode.
ob_start();
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?> <!-- The loop for the items-->
<div class="image-box">
<div class="voteup_layer">
<div class="voteup_layer_triangle">
<div class="voteup_layer_triangle-inner"></div>
</div>
<p>CLICK 2 UPVOTE</p>
</div>
<div class="sb_title"><?php the_title(); ?></div>
<div class="arrow-up"></div>
<div id="num-id" class="count-num">20.453</div>
<a href="<?php the_permalink(); ?>">
<?php
/**
* woocommerce_before_shop_loop_item_title hook
*
* #hooked woocommerce_show_product_loop_sale_flash - 10
* #hooked woocommerce_template_loop_product_thumbnail - 10
*/
do_action( 'woocommerce_before_shop_loop_item_title' );
if ( has_post_thumbnail() ) {
//echo get_the_post_thumbnail( get_the_ID(), array(370,370) );
echo get_the_post_thumbnail( get_the_ID(), 'home-small-box' );
}
?>
</a>
</div>
$out = ob_get_clean();
<?php echo do_shortcode('[add_voting] ' . $out . '[/add_voting]'); ?> <!-- shortcode end-->