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 8 years, 6 months ago by znagle.