[Vinay]

Hi,

I have a shop setup using wocommerce variable product and when I loaded tempera and tempeara-wocommerce child theme, lightbox functionality is broken. I am using ‘Featured Image’ only and NOT using product images. so I got only one image for each product and once I click on that image, normally it opens up in new big window, it works with default theme 2015 but once I load tempera it stoped.
I noticed it’s adding extra anchor tag

********************************** Broken sample code ********************

<div class="images">

<a href="http://localhost/wordpress/wp-content/uploads/2015/05/20141225-Albury-3.jpg" itemprop="image" class="woocommerce-main-image zoom" title="" data-rel="prettyPhoto">

<a href="http://localhost/wordpress/product/first-photo/" title="first photo" alt="first photo">
<img width="600" height="200" src="http://localhost/wordpress/wp-content/uploads/2015/05/20141225-Albury-3-600x200.jpg" class="attachment-shop_single wp-post-image" alt="20141225-Albury-3" title="20141225-Albury-3" /></a>  =======================>  I guess this anchor tag is culprit, but don't know how this is getting formed.
</a>
	
</div>

	<div class="summary entry-summary"><code>====> end to identify in code....</code>
**********************************  Broken sample ends ********************

**********************************  Working sample ********************
	

<div class=”images”>

</div>
<div class=”summary entry-summary”>`

********************************** Working sample ends ********************

Please help to point out how can I fix it?

[Vinay]

oops looks like my image got leaked….sorry, I don’t know how image got posted instead of code…
Admin, request you to delete the image.

Versions used :
Wordpress – 4.2.2
WooCommerce – 2.3.9
Tempera – 1.2.8
Tempera WooCommerceVersion: 0.1-20140212

Below is working code.

<div class="images">
	<a href="http://localhost  /wordpress /wp-content/uploads/2015/05 /20141225- Albury-3.jpg" itemprop="image" class="woocommerce-main-image zoom" title="" data-rel="prettyPhoto"><img width="600" height="200" src="http://localhost/wordpress/ wp-content/uploads/2015/05/20141225- Albury-3-600x20.jpg" class="attachment-shop_single wp-post-image" alt="20141225-Albury-3" title="20141225-Albury-3" /></a>
	
</div>
	<div class="summary entry-summary">

Thanks

[Vinay]

I am able to fix the issue by adding below code to function.php of tempera theme

************************ code starts **************************************

function fix_woocommerce_single_product_image_html($html) {
$regexp = “<a\s[^>]*href=(\”??)([^\” >]*?)\\1[^>]*>(.*)<\/a>”;
preg_match_all(“/$regexp/siU”, $html, $matches, PREG_SET_ORDER);

$image_link = $matches[0][2];

$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;

$image = ‘</img>’;

$str = ‘‘ . $image . ‘‘;

return $str;
}

add_filter(‘woocommerce_single_product_image_html’, ‘fix_woocommerce_single_product_image_html’, 99, 1); // single image
add_filter(‘woocommerce_single_product_image_thumbnail_html’, ‘fix_woocommerce_single_product_image_html’, 99, 1); // thumbnails

************************ code ends **************************************

I hope it will help to someone who is facing similar issue.

[Author]

Posts