Wocommerce lightbox broken once tempera activated

  • Author
  • #31903


    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.
    	<div class="summary entry-summary"><code>====> end to identify in code....</code>
    **********************************  Broken sample ends ********************
    **********************************  Working sample ********************

    <div class=”images”>


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

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

    Please help to point out how can I fix it?


    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 class="summary entry-summary">



    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 = ‘' . $image_caption . '</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.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Wocommerce lightbox broken once tempera activated’ is closed to new replies.