WooCommerce – add link to product in loop

2 Views

I feel like this should be very simple but I’ve been searching for 15 mins and can’t find it anywhere:

I have a loop that lists products in a certain category, and I need to modify it so that the picture and title are a link to the individual product page. Something like this is what I’m looking for.

Read More
<a href="<?php echo woocommerce_get_the_permalink() ?>">

This is what I have: 

 <?php
    $args = array( 'post_type' => 'product', 'posts_per_page' => 4, 'product_cat' => 'power-chairs', 'orderby' => 'ID' );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
            <div class="product">  
                <div class="padding">
                        <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder"/>'; ?>
                        <p class="caption"><?php the_title(); ?></p>
                </div><!-- padding -->
            </div><!-- product -->
<?php endwhile; ?>

Edit: Found it – it was href=”get_permalink($product_id)”

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Have you tried adding the a href link around the image and the title:

    <?php
$args = array( 'post_type' => 'product', 'posts_per_page' => 4, 'product_cat' => 'power-chairs', 'orderby' => 'ID' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>
        <div class="product">  
            <div class="padding">
                   <a href="<?php echo woocommerce_get_the_permalink() ?>">

                    <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder"/>'; ?></a>
                    <p class="caption"><a href="<?php echo woocommerce_get_the_permalink() ?>"><?php the_title(); ?></a></p>

            </div><!-- padding -->
        </div><!-- product -->