Support » Plugin: WooCommerce Product Image Flipper » Displaying second image on hover in custom loop

  • Hello,

    I’m using a custom WooCommerce template for a specific product category. Each product is called as a list item like this:

    <li class="product type-product status-publish has-post-thumbnail pif-has-gallery">    
    
                        <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">
    
                            <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
    
                            <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="300px" height="300px" />'; ?>
    
                            <div data-jckqvpid="<?php echo $product->id; ?>" class="jckqvBtn" >QUICK VIEW</div>
                            
                            <?php if ( $attachment_ids ) {
    	                        $secondary_image_id = $attachment_ids['0'];
    	                        echo wp_get_attachment_image( $secondary_image_id, 'shop_catalog', '', $attr = array( 'class' => 'secondary-image attachment-shop-catalog' ) );
    	                    } ?>
                                          
                            <h3><?php the_title(); ?></h3>
                            <span class="price"><?php echo $product->get_price_html(); ?></span>                    
    
                        </a>
    
                        <?php woocommerce_template_loop_add_to_cart( $loop->post, $product ); ?>
    
                    </li>
    

    As you can see each list item has the “pif-has-gallery” class, so the flip functionality is happening when you hover over an image, but the second image doesn’t appear — it just flips to a blank white square. I pulled this code from the image-flipper.php

    <?php if ( $attachment_ids ) {
    	                        $secondary_image_id = $attachment_ids['0'];
    	                        echo wp_get_attachment_image( $secondary_image_id, 'shop_catalog', '', $attr = array( 'class' => 'secondary-image attachment-shop-catalog' ) );
    	                    } ?>

    But it doesn’t appear to be working. Any ideas what code I should be using instead to get the second image?

    • This topic was modified 3 years, 7 months ago by znagle.
  • The topic ‘Displaying second image on hover in custom loop’ is closed to new replies.