How to Create Custom Product Page in WooCommerce?

Hi friends!, in our last blog, we learned how to make a theme WooCommerce compatible. Now we will learn how to create a custom product page in Woocommerce or override the product page template in WooCommerce.

First, we need to clone the Woocommerce product page template in our theme for this simply go to /wp-content/plugins/woocommerce/templates and copy these two files/directory. First, we need to clone the Woocommerce product page template in our theme for this simply go to /wp-content/plugins/woocommerce/templates and copy these two files/directory. First, we need to clone the Woocommerce product page template in our theme for this simply go to /wp-content/plugins/woocommerce/templates and copy these two files/directory.

1. single-product.php (file)
2. single-product (directory)

Then create a directory named woocommerce in our theme and paste it into this, Now product page template will call from our theme.

#! inside theme directory
woocommerce
|__ single-product.php
|__ single-product
 |__ add-to-cart        // Add to cart button & Variables
 |__ tabs               // Product Detail Tabs
 |__ meta.php
 |__ photoswipe.php 
 |__ price.php
 |__ product-attributes.php
 |__ product-image.php 
 |__ product-thumbnail.php
 |__ rating.php
 |__ related.php 
 |__ review-meta.php
 |__ review-rating.php
 |__ review.php 
 |__ sale-flash.php
 |__ short-description.php 
 |__ stock.php
 |__ title.php
 |__ up-sells.php

1. single-product.php: This file has define page structure and woocommerce hook calls for product detail page
2. single-product: This directory has store content files for single product having title, short description, price, add to cart button, reviews & ratings, gallery etc.
   • add-to-cart: This directory has stores Add to cart button for all variants like for simple product, variable product, grouped product, variations, etc.
   • tabs: This directory store tabs files like additional information, description and tabs label.
   • meta.php: this file print product tags, category and SKU.
   • photoswipe.php: This file show product image slider when product has more than 1 image
   • price.php: This file is use for show product price.
   • product-attributes.php: This file shows product attributes like color, size, etc.
   • product-image.php: This file show Product image.
   • product-thumbnail.php: This file show thumbnail image for product image slider.
   • rating.php: This is use for total Product ratings .
   • related.php: It is use for showing related product
   • review-meta.php: It is use for review meta like date, author.
   • review-rating.php: It is use for star ratings.
   • review.php: It is use for show review of the product.
   • sale-flash.php: It is use for show Sale tag on product
   • short-description.php: This file show product short description.
   • stock.php: It is showing product availability.
   • title.php: Show Product title.
   • up-sells.php: It is showing upsell product.

For changing the positions of content on the product page we need to update hooks priority in our theme. We are going to go through product page hooks

/**
 * Sale flashes.
 *
 * @see woocommerce_show_product_sale_flash()
 */
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );

/**
 * Breadcrumbs.
 *
 * @see woocommerce_breadcrumb()
 */
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );


/**
 * Before Single Products Summary Div.
 *
 * @see woocommerce_show_product_images()
 * @see woocommerce_show_product_thumbnails()
 */
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

/**
 * After Single Products Summary Div.
 *
 * @see woocommerce_output_product_data_tabs()
 * @see woocommerce_upsell_display()
 * @see woocommerce_output_related_products()
 */
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

/**
 * Product Summary Box.
 *
 * @see woocommerce_template_single_title()
 * @see woocommerce_template_single_rating()
 * @see woocommerce_template_single_price()
 * @see woocommerce_template_single_excerpt()
 * @see woocommerce_template_single_meta()
 * @see woocommerce_template_single_sharing()
 */
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

/**
 * Reviews
 *
 * @see woocommerce_review_display_gravatar()
 * @see woocommerce_review_display_rating()
 * @see woocommerce_review_display_meta()
 * @see woocommerce_review_display_comment_text()
 */
add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );
add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );

/**
 * Product Add to cart.
 *
 * @see woocommerce_template_single_add_to_cart()
 * @see woocommerce_simple_add_to_cart()
 * @see woocommerce_grouped_add_to_cart()
 * @see woocommerce_variable_add_to_cart()
 * @see woocommerce_external_add_to_cart()
 * @see woocommerce_single_variation()
 * @see woocommerce_single_variation_add_to_cart_button()
 */
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

We can change the positions of elements on the product detail page by changing the priority in WooCommerce hooks. For this first, we need to remove the action and then add with new priority.

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 4 );

There we are moving star ratings before the product title so first we need to remove_action the star ratings hook from the single product page and then add it with a priority less than the title priority.

You can also add your own functions to add some different functionality with default functions

That is all for this dev blog on how to create a custom product page WooCommerce. Thank You! !!Have a Great Day Ahead!!

WooCommerce Support

If you need any technical assistance, please reach us by mail at support@webkul.com. Also, discover various solutions to add more features and enhance your online store by visiting the WooCommerce plugins page. Additionally, if you require expert assistance or want to develop custom unique functionality Hire WooCommerce Developers for your project.