• Hi,

    It’s seems many have had this issue and I have dug through the forum looking for a solution. The custom badge is appearing on my single product page but not on my shop pages.

    I have created a product here which has the badge turned on:
    https://dev.zhentea.ca/chinese-tea/amazing-new-tea/
    and here it is from the tea page:
    https://dev.zhentea.ca/tea/#SupremeTea

    I am using the Jupiter Theme and I have included the content-product.php that comes with Jupiter here. Any nudge in the right direction is greatly appreciated.

    <?php
    /**
    * The template for displaying product content within loops
    *
    * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
    *
    * HOWEVER, on occasion WooCommerce will need to update template files and you
    * (the theme developer) will need to copy the new files to your theme to
    * maintain compatibility. We try to do this as little as possible, but it does
    * happen. When this occurs the version of the template file will be bumped and
    * the readme will list any important changes.
    *
    * @see https://docs.woocommerce.com/document/template-structure/
    * @author WooThemes
    * @package WooCommerce/Templates
    * @version 3.0.0
    */

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

    global $product, $woocommerce_loop, $mk_options;

    // Store loop count we’re currently on
    if ( empty( $woocommerce_loop[‘loop’] ) ){
    $woocommerce_loop[‘loop’] = 0;
    }

    // Ensure visibility
    if ( empty( $product ) || ! $product->is_visible() ) {
    return;
    }

    // Increase loop count
    $woocommerce_loop[‘loop’]++;

    // declare variable in case if none of the conditions below meets
    $columns = ”;

    $grid_width = $mk_options[‘grid_width’];
    $content_width = $mk_options[‘content_width’];
    $height = $mk_options[‘woo_loop_img_height’];

    if(is_shop() || is_product_category()) {
    $columns = isset($mk_options[‘shop_archive_columns’]) && $mk_options[‘shop_archive_columns’] != ‘default’ ? $mk_options[‘shop_archive_columns’] : false;
    } else {
    if ( !empty( $woocommerce_loop[‘columns’] )){
    $columns = $woocommerce_loop[‘columns’];
    }
    }

    $layout = false;
    if(global_get_post_id()) {
    $layout = get_post_meta( global_get_post_id(), ‘_layout’, true );
    if (isset($_REQUEST[‘layout’]) && !empty($_REQUEST[‘layout’])) {
    $layout = esc_html($_REQUEST[‘layout’]);
    }
    if(is_singular(‘product’)) {
    $layout = $mk_options[‘woocommerce_single_layout’];
    $columns = false;
    }
    } else {
    $layout = get_post_meta(mk_get_shop_id(), ‘_layout’, true );
    }

    if($columns) {

    switch ($columns) {
    case 1:
    $grid = ‘mk–col–12-12’;
    break;
    case 2:
    $grid = ‘mk–col–1-2’;
    break;
    case 3:
    $grid = ‘mk–col–4-12’;
    break;
    case 4:
    $grid = ‘mk–col–3-12’;
    break;
    default:
    $grid = ‘mk–col–3-12’;
    break;
    }

    // Custom columns taken from Theme Options > Shop > General > Product Loop Image Size option.
    $classes = ‘item mk–col ‘.$grid;
    $width = absint($grid_width/$columns);
    $column_width = absint($grid_width/$columns);

    } else {
    if($layout == ‘full’) {
    $classes[] = ‘item mk–col mk–col–3-12’;
    $width = round($grid_width/4) – 28;
    $column_width = round($grid_width/4);
    } else {
    $classes[] = ‘item mk–col mk–col–4-12’;
    $width = round((($content_width / 100) * $grid_width)/3) – 31;
    $column_width = round($grid_width/3);
    }
    }

    ?>

    <article <?php post_class($classes); ?>>
    <div class=”mk-product-holder”>
    <div class=”product-loop-thumb”>
    <?php

    if($mk_options[‘woocommerce_catalog’] == ‘false’) {
    if ( ! $product->is_in_stock() ) {
    echo ‘<span class=”out-of-stock”>’.__( ‘OUT OF STOCK’, ‘mk_framework’ ).'</span>’;
    }

    if ($product->is_on_sale()) :
    echo apply_filters(‘woocommerce_sale_flash’, ‘<span class=”onsale”>’.__( ‘Sale’, ‘mk_framework’ ).'</span>’, $post, $product);
    endif;
    }

    $image_size = isset($mk_options[‘woo_loop_image_size’]) ? $mk_options[‘woo_loop_image_size’] : ‘crop’;

    if ( has_post_thumbnail() ) {

    echo ‘‘;

    $empty_var = apply_filters( ‘post_thumbnail_html’ );

    error_log( $empty_var );

    $featured_image_src = Mk_Image_Resize::resize_by_id_adaptive( get_post_thumbnail_id(), $image_size, $width, $height, $crop = false, $dummy = true);

    echo ‘ false)).'” title=”‘.the_title_attribute(array(‘echo’ => false)).'” itemprop=”image” />’;

    echo ‘<span class=”product-loading-icon added-cart”></span>’;

    $product_gallery = get_post_meta( $post->ID, ‘_product_image_gallery’, true );

    if ( !empty( $product_gallery ) ) {
    $gallery = explode( ‘,’, $product_gallery );
    $hover_image_id = $gallery[0];

    $hover_image_src = Mk_Image_Resize::resize_by_id_adaptive( $hover_image_id, $image_size, $width, $height, $crop = false, $dummy = true);

    echo ‘ false)).'” class=”product-hover-image” title=”‘.the_title_attribute(array(‘echo’ => false)).'”>’;

    }
    echo ‘
    ‘;

    } else {

    echo ‘Placeholder‘;

    }
    ?>

    <?php if($mk_options[‘woocommerce_catalog’] == ‘false’) {
    ob_start();
    do_action(‘mk_woocommerce_shop_loop_rating’);
    $wc_rating_html = ob_get_clean();
    $wc_rating_html = trim($wc_rating_html);
    $wc_rating_state = !empty($wc_rating_html) ? ‘with-rating’ : ‘without-rating’;
    ?>
    <div class=”product-item-footer <?php echo $wc_rating_state; ?>”>
    <?php if(!empty($wc_rating_html)) : ?>
    <div class=”woocommerce-product-rating”><?php echo $wc_rating_html; ?></div>
    <?php endif; ?>
    <?php do_action( ‘woocommerce_after_shop_loop_item’ );?>
    </div>
    <?php } ?>
    </div>
    <?php do_action( ‘woocommerce_before_shop_loop_item’ ); ?>

    <div class=”mk-shop-item-detail”>
    <?php
    global $mk_options;
    if ( ! empty( $mk_options[‘woocommerce_loop_enable_love_button’] ) ) :
    if ( $mk_options[‘woocommerce_loop_enable_love_button’] != ‘false’ ) :
    ?>
    <div class=”mk-love-holder”>
    <?php echo Mk_Love_Post::send_love(); ?>
    </div>
    <?php
    endif;
    endif;
    ?>

    <h3 class=”product-title”>“><?php the_title(); ?></h3>
    <?php if($mk_options[‘woocommerce_catalog’] == ‘false’) {
    do_action( ‘woocommerce_after_shop_loop_item_title’ );
    }
    ?>

    <?php
    if($mk_options[‘woocommerce_loop_show_desc’] == ‘true’) :
    echo ‘<div class=”product-item-desc”>’ . apply_filters( ‘woocommerce_short_description’, $post->post_excerpt ) . ‘</div>’;
    endif;
    ?>
    </div>
    </div>
    </article>

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author YITHEMES

    (@yithemes)

    Hi @philrushworth,
    and thank you for writing in!

    Please try replacing the lines 123-155 of content-product.php:

    if ( has_post_thumbnail() ) {
    	
    
    	echo '<a href="'. esc_url( get_permalink() ) . '" class="product-link">';
    
    	$featured_image_src = Mk_Image_Resize::resize_by_id_adaptive( get_post_thumbnail_id(), $image_size, $width, $height, $crop = false, $dummy = true);
    
    	echo '<img src="'.$featured_image_src['dummy'].'" '.$featured_image_src['data-set'].' class="product-loop-image" alt="'.the_title_attribute(array('echo' => false)).'" title="'.the_title_attribute(array('echo' => false)).'" itemprop="image" />';	
    	
    	echo '<span class="product-loading-icon added-cart"></span>';
    
    	$product_gallery = get_post_meta( $post->ID, '_product_image_gallery', true );
    
    	if ( !empty( $product_gallery ) ) {
    		$gallery = explode( ',', $product_gallery );
    		$hover_image_id  = $gallery[0];
    
    		$hover_image_src = Mk_Image_Resize::resize_by_id_adaptive( $hover_image_id, $image_size, $width, $height, $crop = false, $dummy = true);
    		
    		echo '<img src="'.$hover_image_src['dummy'].'" '.$hover_image_src['data-set'].' alt="'.the_title_attribute(array('echo' => false)).'" class="product-hover-image" title="'.the_title_attribute(array('echo' => false)).'">';
    
    	}
    	echo '</a>';
    
    } else {
    
    	echo '<img src="'.Mk_Image_Resize::generate_dummy_image($width, $height).'" alt="Placeholder" width="'.$width.'" height="'.$height.'" />';
    
    }
    ?>

    with the following code snippet:

    ob_start();
    
    if ( has_post_thumbnail() ) {
    	
    
    	echo '<a href="'. esc_url( get_permalink() ) . '" class="product-link">';
    
    	$featured_image_src = Mk_Image_Resize::resize_by_id_adaptive( get_post_thumbnail_id(), $image_size, $width, $height, $crop = false, $dummy = true);
    
    	echo '<img src="'.$featured_image_src['dummy'].'" '.$featured_image_src['data-set'].' class="product-loop-image" alt="'.the_title_attribute(array('echo' => false)).'" title="'.the_title_attribute(array('echo' => false)).'" itemprop="image" />';	
    	
    	echo '<span class="product-loading-icon added-cart"></span>';
    
    	$product_gallery = get_post_meta( $post->ID, '_product_image_gallery', true );
    
    	if ( !empty( $product_gallery ) ) {
    		$gallery = explode( ',', $product_gallery );
    		$hover_image_id  = $gallery[0];
    
    		$hover_image_src = Mk_Image_Resize::resize_by_id_adaptive( $hover_image_id, $image_size, $width, $height, $crop = false, $dummy = true);
    		
    		echo '<img src="'.$hover_image_src['dummy'].'" '.$hover_image_src['data-set'].' alt="'.the_title_attribute(array('echo' => false)).'" class="product-hover-image" title="'.the_title_attribute(array('echo' => false)).'">';
    
    	}
    	echo '</a>';
    
    } else {
    
    	echo '<img src="'.Mk_Image_Resize::generate_dummy_image($width, $height).'" alt="Placeholder" width="'.$width.'" height="'.$height.'" />';
    
    }
    ?>
    	<?php echo apply_filters('post_thumbnail_html',ob_get_clean(), $post->ID); ?>

    Please try it and let us know if everything works fine!

    Best Regards
    YITH Support

    Thread Starter philrushworth

    (@philrushworth)

    Hi Thanks for the reply! Truly appreciated. I swapped the code as requested and the situation has improved.

    The badge still shows up as expected on the single product page.
    It now shows up on the tea category page (which we don’t actually use)
    https://dev.zhentea.ca/chinese-tea-category/supreme-chinese-tea/

    and it still doesn’t show up on our product page:
    https://dev.zhentea.ca/tea

    That page uses visual composer product loops.

    Thanks for the help!

    Cheers,
    Phil

    Thread Starter philrushworth

    (@philrushworth)

    I think I have found the code that controls this category display loop. Here it is:

    <?php
    
    global $mk_options;
    $path = pathinfo(__FILE__) ['dirname'];
    
    include ($path . '/config.php');
    
    $html = file_get_contents($path . '/template.php');
    $html = phpQuery::newDocument($html);
    $id = Mk_Static_Files::shortcode_id();
    
    $container = pq('.mk-category-loop');
    $container->attr('id', 'mk-category-loop-' . $id);
    $container->addClass($title_hover.'-title-effect');
    $container->addClass($image_hover.'-image-effect');
    $container->addClass($layout_style.'-layout');
    $container->addClass('mk--row');
    $container->addClass($el_class);
    $container->addClass( $visibility );
    
    // Classes for js traversing
    if($layout_style == 'masonry') {
        $container->addClass('js-masonry');
        $container->find('.mk-loop-item')->addClass('js-masonry-item');
    }
    
    $item = $container->find('.mk-loop-item')->remove();
    $grid_width = $mk_options['grid_width'];
    
    /*
    * Converts slugs to term Ids
    *
    */
    if(!function_exists('get_terms_by_slug')) {
        function get_terms_by_slug($slugs, $taxonomy)
        {
            $terms = explode(',', $slugs);
            $term_ids = array();
            foreach ($terms as $term) {
                $term = get_term_by('slug', $term, $taxonomy );
                if ( ! empty( $term->term_id ) ) {
                    $term_ids[] = $term->term_id;
                }
            }
            return $term_ids;
        }
    }
    
    switch ($feed) {
        case 'post':
            $categories = get_categories(array(
                'include' => $specific_categories_post
            ));
    
            break;
    
        case 'portfolio':
            $categories = get_terms('portfolio_category', array(
                'include' => get_terms_by_slug($specific_categories_other, 'portfolio_category')
            ));
            break;
    
        case 'news':
            $categories = get_terms('news_category', array(
                'include' => get_terms_by_slug($specific_categories_other, 'news_category')
            ));
            break;
    
        case 'product':
            $categories = get_terms('product_cat', array(
                'include' => get_terms_by_slug($specific_categories_other, 'product_cat')
            ));
            break;
    }
    
    switch ($columns) {
        case 4:
                $column_class = 'mk--col mk--col--3-12';
                $image_width = round($grid_width/4) - 28;
            break;
        case 3:
                $column_class = 'mk--col mk--col--4-12';
                $image_width = round($grid_width/3) - 33;
            break;
        case 2:
                $column_class = 'mk--col mk--col--1-2';
                $image_width = round($grid_width/2) - 38;
            break;
    
        default:
                $column_class = 'mk--col mk--col--1-2';
                $image_width = round($grid_width/2) - 38;
            break;
    }
    
    foreach ($categories as $category) {
        $each_item = $item->clone();
        $item_holder = $each_item->find('.item-holder');
        $item_caption = $item_holder->find('figcaption');
        if ( empty( $category->term_id ) ) {
            continue;
        }
        $category_link = get_category_link( $category->term_id );
        //$each_item->find('.view-more')->attr('href', '#!'); //TODO : add links once styling is finished
    
        $each_item->addClass($column_class);
    
    	$image_id = false;
        if($feed == 'product') {
            if ( class_exists( 'WooCommerce' ) ) {
                $image_id = get_woocommerce_term_meta( $category->term_id, 'thumbnail_id', true );
            }
        } else {
        	$image_id = is_array(get_tax_meta($category->term_id, 'mk_image_field_id')) ? get_tax_meta($category->term_id, 'mk_image_field_id') ['id'] : false;
        }
    
        $image_src = Mk_Image_Resize::resize_by_id($image_id, $image_size, $image_width, $row_height, $crop = true, $dummy = true);
    
        $each_item->find('.item-thumbnail')->attr('src', $image_src);
    
        //Adding html elements according to style
        if($title_hover == 'none' || $title_hover == 'simple' || $title_hover == 'framed') {
            $item_caption->append('<div class="caption"></div>')
                         ->find('.caption')
                         ->append('<div class="centered"></div>')
                         ->find('.centered')
                         ->append('<span class="item-title"></span>')
                         ->find('.item-title')
                         ->html($category->name);
    
            if($description == 'true') {
                if ($category->description) {
                    //$each_item->find('.item-desc')->html($category->description);
                    $item_caption->find('.centered')
                                 ->append('<span class="item-desc"></span>')
                                 ->find('.item-desc')
                                 ->html($category->description);
                }
            }
    
            $item_caption->append('<a class="view-more"></a>')
                        ->find('.view-more')
                        ->attr('href', esc_url( $category_link ) );
    
        }else if ($title_hover == 'modern' || $title_hover == 'editorial') {
            $item_caption->append('<span class="item-title"></span>')
                         ->find('.item-title')
                         ->html($category->name);
    
            if($description == 'true') {
                if ($category->description) {
                    $item_caption->append('<span class="item-desc"></span>')
                                 ->find('.item-desc')
                                 ->html($category->description);
                }
            }
    
            $item_caption->append('<a class="view-more"></a>')
                         ->find('.view-more')
                         ->attr('href', esc_url( $category_link ) );
        }
        $item_caption->append('<div class="item-overlay"></div>');
        $each_item->appendTo($container);
    }
    /**
     * Custom CSS Output
     * ==================================================================================
     */
    
    Mk_Static_Files::addCSS('
        #mk-category-loop-'.$id.' .mk-loop-item {
            padding-left: '.($gutter / 2).'px;
            padding-right: '.($gutter / 2).'px;
            padding-bottom: '.$gutter.'px;
        }
        #mk-category-loop-'.$id.' .mk-loop-item .item-holder .item-title,
        #mk-category-loop-'.$id.' .mk-loop-item .item-holder .item-desc{
            color: '.$text_color.';
        }
        #mk-category-loop-'.$id.' .mk-loop-item .item-holder figcaption .item-overlay {
            background-color: '.$overlay_color.';
        }
    ', $id);
    if ($title_hover == 'editorial' ) {
        Mk_Static_Files::addCSS('
            #mk-category-loop-'.$id.' .mk-loop-item .item-holder .item-title::after{
                background-color: '.$text_color.';
            }
        ', $id);
    }else if ($title_hover == 'framed' ) {
        Mk_Static_Files::addCSS('
            #mk-category-loop-'.$id.' .mk-loop-item .item-holder figcaption::before{
                border-color: '.$text_color.';
            }
        ', $id);
    }
    
    // if($image_hover == 'gradient' || $image_hover == 'zoom' || $image_hover == 'slide' || $image_hover == 'blur' ) {
    //     Mk_Static_Files::addCSS('
    //         #mk-category-loop-'.$id.' .mk-loop-item .item-holder {
    //             background-color: '.$overlay_color.';
    //         }
    //     ');
    // }
    
    Plugin Author YITHEMES

    (@yithemes)

    Hi @philrushworth,
    this seems a Visual Composer template.
    You should contact your theme developers asking them to add the post_thumbnail_html filter to their Visual Composer template mk_category.

    Best Regards
    YITH Support

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Badge not showing on Jupiter Theme product loop’ is closed to new replies.