How to Build a Custom WooCommerce Product Listing Page

1. Set up a Custom Template in Your Theme

You need to override the default WooCommerce shop page template.

• Go to your theme folder:
  wp-content/themes/your-theme/
• Create a folder called woocommerce inside your theme (if it doesn’t already exist).
• Copy archive-product.php from the WooCommerce plugin:
  • From: wp-content/plugins/woocommerce/templates/archive-product.php
  • To: wp-content/themes/your-theme/woocommerce/archive-product.php

Now you are free to edit your own shop page without touching the plugin files.

---

2. Edit archive-product.php for Full Custom Control

Inside your archive-product.php, you can remove WooCommerce’s default hooks and custom build the listing.

Basic stripped-down version:

This example will:

    Make a 2-column card layout.

    Show:

        Product image

        Product title

        Product price

        Product rating

        "View Product" button

    Use custom HTML structure (so you can easily style it).

📄 Code to put inside archive-product.php (or any custom page template)
<?php
defined( 'ABSPATH' ) || exit;

get_header( 'shop' );
?>

<div class="custom-products-wrapper">
    <?php
    $args = array(
        'post_type'      => 'product',
        'posts_per_page' => 12,
        'orderby'        => 'date',
        'order'          => 'DESC',
    );
    $loop = new WP_Query( $args );

    if ( $loop->have_posts() ) :
        echo '<div class="custom-products-grid">';
        while ( $loop->have_posts() ) : $loop->the_post();
            global $product; 
            ?>
            
            <div class="product-card">
                <a href="<?php the_permalink(); ?>">
                    <?php echo woocommerce_get_product_thumbnail(); ?>
                </a>
                <h2 class="product-title">
                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
                <div class="product-price">
                    <?php echo $product->get_price_html(); ?>
                </div>
                <div class="product-rating">
                    <?php echo wc_get_rating_html( $product->get_average_rating() ); ?>
                </div>
                <a href="<?php the_permalink(); ?>" class="view-product-button">View Product</a>
            </div>

            <?php
        endwhile;
        echo '</div>'; // close grid
    else :
        echo '<p>No products found</p>';
    endif;
    wp_reset_postdata();
    ?>
</div>

<?php
get_footer( 'shop' );
?>