The first thing you might wish to do is to display products in a different template than the default. The file single-product.php, which controls the template files that display product information on the frontend, should be loaded.

A common practice when customizing the template pages of parent themes and plugins that is often recommended is to make a copy of the template in the theme. Now make all changes in the copy only. This way, if the themes and plugins are updated, your custom changes will remain unaffected.

Several plugins and themes provide an extensive collection of custom action and filter hooks that allow changes directly into theme file(s). The good thing about all this is that you do not have to go through and modify the markup of the template files. The result is a cleaner code and no messy duplication of files.

I will use single-product.php to call template files that control the information and the format of how the product’s information will be displayed on the product page. Similarly, content-single-product.php is the product template and is modified to change the information and styling of the product page.
Now open single_template and add the following code to change the template for the Single Product page:

function get_custom_post_type_template($single_template) {
 global $post;
 
 if ($post->post_type == 'product') {
      $single_template = dirname( __FILE__ ) . '/single-template.php';
 }
 return $single_template;
}
add_filter( 'single_template', 'get_custom_post_type_template' );
 
as well as following code include in template _include
add_filter( 'template_include', 'portfolio_page_template', 99 );
 
function portfolio_page_template( $template ) {
 
    if ( is_page( 'slug' )  ) {
        $new_template = locate_template( array( 'single-template.php' ) );
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }
 
    return $template;
}
  • Fully customize the layout of the WooCommerce Product Page
  • Change the layout of the WooCommerce Product Image
  • Change the size of the WooCommerce Page Product Image
  • Change the WooCommerce Product Page background
  • Change the WooCommerce Product Page template
  • Hand pick which related products to show to increase up sells and cross sells
  • Make the WooCommerce Product Page image full width
  • Replace the WooCommerce Product image with a video
  • Turn on and off Product Gallery Images
  • Change the font, color and size of the WooCommerce Product title
  • Change the position of the WooCommerce Product tabs
  • Change the position of the WooCommerce Product reviews
  • Add custom fields to the WooCommerce Product Page
  • Change the order of the fields on the WooCommerce Product Page
  • Change the style of the WooCommerce Product Page add to cart button
  • Change the related products shown on the Product page