X
    Categories: WooCommerce Tutorials, Tips and GuidesWordPress Tutorials, Tips and Guides
Reading Time: 3 minutes

Product display is one of the most amazing aspect of WooCommerce. These pages act as the showcases for your product.

However, the default WooCommerce pages might not be enough for some store owners who might have different ideas about product display pages. Fortunately implementing a custom WooCommerce product display page is not that difficult.

In this tutorial, I will go through the steps required to setup custom WooCommerce display product pages:

Start with the Template

The first step is the creation of the template that is based on the default WooCommerce product page.

<?php
$params = array('posts_per_page' => 5, 'post_type' => 'product');
$wc_query = new WP_Query($params);
?>
<?php if ($wc_query->have_posts()) : ?>
<?php while ($wc_query->have_posts()) :
       $wc_query->the_post(); ?>
   <?php the_title(); ?>
   <?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else:  ?>
<p>
   <?php _e( 'No Products'); ?>
</p>
<?php endif; ?>

 

As you can see, it is a very basic template. While it does get the job done, you could further extend the functionality of this page through several built-in WooCommerce functions.

The following list is a limited selection of WooCommerce functions that include a wide range of information on your custom product display pages:

  • the_permalink() – Displays the URL of the product.
  • the_content() – Displays the full description of the product.
  • the_excerpt() – Displays a brief description of the product.
  • the_ID() – Displays the product’s ID.
  • the_title() – Displays the name of the product.
  • the_post_thumbnail() – Displays the product image.

Display Category Of WooCommerce Product

Categories are an essential way of categorizing multiple products on the store. If you wish to display the category of the product on the page, place this snippet in functions.php file of the installed theme:

<?php
if ( ! defined( 'ABSPATH' ) ) {
   exit;
}
global $product;
?>
<div class="product_meta">
   <?php do_action( 'woocommerce_product_meta_start' ); ?>
   <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>
   <span class="sku_wrapper"><?php esc_html_e( 'SKU:', 'woocommerce' ); ?> <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?></span></span>
   <?php endif; ?>
   <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( 'Category:', 'Categories:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
   <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Tag:', 'Tags:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>
   <?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

Display Thumbnail of Product Category

Every product category has its own thumbnail. If you need to include it in your custom product display, place this snippet in functions.php file of the installed theme:

<?php
function cwresponse_get_thumbnail(){
 if(is_page(205)){
 $args = array(
 'tax_query' => array(
 array(
 'taxonomy' => 'product_cat',
 'field' => 'slug'
 )
 )
 );
 $random_products = get_posts( $args );
 foreach ( $random_products as $post ) : setup_postdata( $post );
 ?>
 <div><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a></div>
 <?php
 endforeach;
 wp_reset_postdata();
 }
}
add_action('wp_footer', 'cwresponse_get_thumbnail');

Conclusion

In this tutorial, I described how you could easily setup custom product display pages. in addition, you could easily display product category and thumbnail for the product. If you need help with these code snippets, do leave a comment, and I will get back to you.

Owais Alam :is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at owais.alam@cloudways.com