Product image disappears when filtering WooCommerce function for Sale Flash Badge in ROEN theme

Question

I am trying to display how many percent the user saves on the sales badge in WooCommerce. To make this work without this overwriting the "Featured" sales badge, I had to add some filters to my functions.php. Everything works fine now, exept that the product image on the product page disappears and I can't for the life of me understand why. The "onsale featured" code in the theme file product-image.php is almost the same as the "onsale" code, and I can't understand why the image would disappear when a product is on sale, but not when it is featured?

My code in functions.php

add_filter('woocommerce_sale_flash', 'my_custom_sale_flash' );
function my_custom_sale_flash($text) {
    global $product;
    if($product->is_on_sale()){
        $percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
        return '<span class="onsale">SPAR '.$percentage.' %</span>';  
    }elseif($product->is_featured()){
    return '<span class="onsale featured">Utvalgt</span>';
    }else if(!$product->is_in_stock()){
        return '<span class="onsale">Utsolgt</span>';
    }else  if(!$product->get_price()){
        return '<span class="onsale">GRATIS</span>';
}
} 

The code in product-image.php in the ROEN theme

<?php
/**
 * Single Product Image
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.0.14
 */

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

global $post, $woocommerce, $product;

?>
<div class="images">

    <?php
        if ( has_post_thumbnail() ) {

            $image_title        = "";
            $image_link         = wp_get_attachment_url( get_post_thumbnail_id() );
            $image              = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array('title' => $image_title) );

            $attachment_count   = count( $product->get_gallery_attachment_ids() );

            if ( $attachment_count > 0 ) {
                $gallery = '[product-gallery]';
                $zoom = "";
            } else {
                $gallery = '';
                $zoom = 'zoom';
            }



            $html = '';

            if($product->is_featured()){
                $html = apply_filters('woocommerce_sale_flash', '<span class="featured onsale">'.__('Featured','ROEN').'</span>', $post, $product);
            }else if($product->is_on_sale()){
                $html = apply_filters('woocommerce_sale_flash', '<span class="onsale">'.__( 'Sale!', 'woocommerce' ).'</span>', $post, $product);
            }else if(!$product->is_in_stock()){
                $html = '<span class="outofstock">'.__('Out of Stock','ROEN').'</span>';
            }else  if(!$product->get_price()){
                $html = '<span class="free onsale">'.__('Free','ROEN').'</span>';
            }

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image '.$zoom.'" title="%s"  rel="prettyPhoto' . $gallery . '" data-url="%s">%s'.$html.'</a>', $image_link, $image_title, $image_link ,  $image ), $post->ID );
        } else {

            echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="Placeholder" />', woocommerce_placeholder_img_src() ), $post->ID );

        }
    ?>

    <?php do_action( 'woocommerce_product_thumbnails' ); ?>

</div>

I can't see why the problem arises? Featured products that are not on sale displays correctly both when viewed from a category and on the product page. Products that are on sale displays correctly when viewed from a category, but the image disappears on the product page.

Thank you for your time.

Answer 1

I got this fixed by changing

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image '.$zoom.'" title="%s" rel="prettyPhoto' . $gallery . '" data-url="%s">%s'.$html.'</a>', $image_link, $image_title, $image_link , $image ), $post->ID );

To

echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image '.$zoom.'" title="%s" rel="prettyPhoto' . $gallery . '" data-url="%s">%s%s</a>', $image_link, $image_title, $image_link , $image, $html ), $post->ID );

Turns out Wordpress did not like the percentage sign in my span that was going to show in the sales badge, because of the way the ROEN theme is coded.

I tell you man, lot's of weird code in that theme.