0

I am using the most recent wp and woocommerce.

I have a carousel slider on my frontpage which is listing my featured products. In order to decrease the loading time, the carousel should render "thumbnails" or "medium" images instead of the "full" ones?

How can I achieve that?

This code is used to render the images:

<?php
    $_delay = 100;
?>
<div class="products-block shop-products products grid-view">
    <div <?php echo $owl_attrs; ?> class="owl-carousel owl-theme products-slide">
        <?php $index = 0; while ( $loop->have_posts() ) : $loop->the_post(); global $product; $index ++; ?>
            <?php if($rows > 1){ ?>
                <?php if ( (0 == ( $index - 1 ) % $rows ) || $index == 1) { ?>
                    <div class="group">
                <?php } ?>
            <?php } ?>
            <div class="product <?php echo (!empty($showon_effect)) ? 'wow ' . $showon_effect : ''; ?>" data-wow-duration="0.5s" data-wow-delay="<?php echo esc_attr($_delay); ?>ms">
                <?php 
                    if(isset($is_deals) && $is_deals){
                        wc_get_template_part( 'content', 'product-deals' );
                    }else{
                        wc_get_template_part( 'content', 'product-inner' );
                    }
                ?>
            </div>
            <?php if($rows > 1){ ?>
                <?php if ( ( ( 0 == $index % $rows || $_total == $index )) ) { ?>
                    </div>
                <?php } ?>
            <?php } ?>
            <?php $_delay+=100; ?>
        <?php endwhile; ?>
    </div>
</div>

EDIT: like mentioned in the first comment I did not found a woocommerce/content-product-deals.php but I found a woocommerce/content-product-inner.php which has that content:

<?php

global $product, $voisen_opt;
?>
    <div class="product-wrapper">
        <div class="list-col4">
            <div class="product-image">
                <?php if ( $product->is_on_sale() && !empty($voisen_opt['sale_label'])){ ?>
                    <?php echo apply_filters( 'woocommerce_sale_flash', '<span class="onsale"><span class="sale-text">' . esc_html__('Sale', 'voisen') . '</span></span>', $post, $product ); ?>
                <?php } ?>

                <?php if (!empty($voisen_opt['featured_label']) && $product->is_featured()){ ?>
                <span class="hotlabel"><span class="hot-text"><?php echo esc_html__('Hot', 'voisen'); ?></span></span>
                <?php } ?>

                <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( $product->get_name() ); ?>">
                    <?php 
                    echo ''.$product->get_image('shop_catalog', array('class'=>'primary_image'));

                    if(isset($voisen_opt['second_image'])){
                        if($voisen_opt['second_image']){
                            $attachment_ids = $product->get_gallery_image_ids();
                            if ( $attachment_ids ) {
                                echo wp_get_attachment_image( $attachment_ids[0], apply_filters( 'single_product_small_thumbnail_size', 'shop_catalog' ), false, array('class'=>'secondary_image') );
                            }
                        }
                    }
                    ?>
                    <?php if(!empty($voisen_opt['hover_effect'])){ ?>
                    <span class="shadow"></span>
                    <?php } ?>
                </a>
                <?php if(!empty($voisen_opt['enable_quickview'])) { ?>
                <div class="quickviewbtn">
                    <a class="detail-link quickview" data-quick-id="<?php the_ID();?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php esc_html_e('Quick View', 'voisen');?></a>
                </div>
                <?php } ?>
                <?php if(voisen_check_display_actions()){ ?>
                <div class="actions<?php echo (!empty($voisen_opt['always_visible_acts'])) ? ' always':''; ?>">
                    <ul class="add-to-links clearfix">
                        <?php if(!empty($voisen_opt['enable_addcart'])){ ?>
                        <li class="add-to-cart">
                            <?php voisen_ajax_add_to_cart_button(); ?>
                        </li>
                        <?php } ?>
                        <?php if(!empty($voisen_opt['enable_wishlist'])){ ?>
                        <li>    
                            <?php if ( class_exists( 'YITH_WCWL' ) ) {
                                echo preg_replace("/<img[^>]+\>/i", " ", do_shortcode('[yith_wcwl_add_to_wishlist]'));
                            } ?>
                        </li>
                        <?php } ?>
                        <?php if(!empty($voisen_opt['enable_compare'])){ ?>
                        <li>
                            <?php if( class_exists( 'YITH_Woocompare' ) ) {
                            echo do_shortcode('[yith_compare_button]');
                            } ?>
                        </li>
                        <?php } ?>
                    </ul>
                </div>
                <?php } ?>
                <div class="products-info">
                    <h2 class="product-name">
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                    </h2>
                    <div class="price-box"><?php echo ''.$product->get_price_html(); ?></div>
                </div>              
            </div>
        </div>
        <div class="list-col8">
            <div class="gridview">
                <h2 class="product-name">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
                <div class="ratings"><?php echo wc_get_rating_html($product->get_average_rating()); ?></div>
                <div class="price-box"><?php echo ''.$product->get_price_html(); ?></div>
            </div>
        </div>
        <div class="clearfix"></div>
        <?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
    </div>

Edit 2:

This is the rendered content:

<div class="container-image-and-badge  ">
    <img width="600" height="600" src="https://s3-eu-central-1.amazonaws.com/hempalaya-com-media/wp-content/uploads/2018/04/11221033/everyday-backpack-winered.jpg" class="primary_image wp-post-image" alt="" srcset="https://s3-eu-central-1.amazonaws.com/hempalaya-com-media/wp-content/uploads/2018/04/11221033/everyday-backpack-winered.jpg 2048w, https://s3-eu-central-1.amazonaws.com/hempalaya-com-media/wp-content/uploads/2018/04/11221033/everyday-backpack-winered-600x600.jpg 600w, https://s3-eu-central-1.amazonaws.com/hempalaya-com-media/wp-content/uploads/2018/04/11221033/everyday-backpack-winered-1024x1024.jpg 1024w" sizes="(max-width: 600px) 100vw, 600px"> 
    <div class="yith-wcbm-badge yith-wcbm-badge-css yith-wcbm-badge-1239 yith-wcbm-badge-css-7 yith-wcbm-css-badge-1239" data-position="{&quot;top&quot;:0,&quot;bottom&quot;:&quot;auto&quot;,&quot;left&quot;:&quot;auto&quot;,&quot;right&quot;:&quot;-7&quot;}">

</div>
</div>
  • The actual code rendering the thumbnails should be in the woocommerce/content-product-deals.php or woocommerce/content-product-deals.php templates in your theme. – Jacob Peattie Jun 25 '18 at 14:37
  • Hi, I did not found a product-deals file, but a product-inner one within my theme folder. Please review my updated question – Jan Jun 25 '18 at 14:46
  • It doesn't appear to be using the full size. It's using the normal shop thumbnail size as defined in WooCommerce settings. – Jacob Peattie Jun 25 '18 at 14:53
  • Weired: GTMetrix and Google PageSpeed Insights is telling me I should serve scaled images: "The following images are resized in HTML or CSS. Serving scaled images could save 1.4MiB (91% reduction)" – Jan Jun 25 '18 at 14:54
  • I also added the rendered content in my question – Jan Jun 25 '18 at 14:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.