The WooCommerce custom product page layout template is the page where product specifications and details are displayed, such as name, description, price, tabs, etc. This page is designed by WooCommerce by default. But sometimes you need to customize the WooCommerce product page to match your needs.
Customization of the product page in WooCommerce is done in two ways, one by WordPress plugins and the other by programming using WooCommerce’s own functions and files, which we will deal with in programming and manually in this article.
Programmatically customizing the WooCommerce custom product page layout
For customization, WooCommerce has options for designers and developers, which we will discuss further. To change the appearance and codes of the product page, the WooCommerce plugin has provided all the default templates that you can change by adding them to your template and designing the product custom page as you wish.
To design the page, first install the WooCommerce plugin from the “Plugins” section in the WordPress dashboard.
Then open the functions.php file of your template and enter the following codes.
if (!function_exists('hs_setup')) :
function hs_setup()
{
if (class_exists('WooCommerce')) {
/* woocommerce */
add_theme_support('woocommerce');
add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');
}
}
add_action('after_setup_theme', 'hs_setup');
endif;By using these codes, we announce to WordPress that this template supports WooCommerce.
If these codes already exist in your template, you can skip entering them.
Now go to the “woocommerce” folder in “wp-content/plugins” and copy the files inside the “templates” folder to inside the “woocommerce” folder of your template folder. Now, inside our template folder, we have a folder called “woocommerce” which contains files copied from the “templates” file in the WooCommerce plugin.
These files include the default design of all WooCommerce pages, we only need some files related to product page design.
To customize the product page in WooCommerce, you only need the following files and folders and you can delete the rest.
- The single-product folder and the files inside it
- The content-single-product.php file
- single-product-reviews.php file
- single-product.php file
single-product.php file
To customize the product page, we start from this file. This file is responsible for displaying all products as a single product. The concept of single-product in WooCommerce means only one product, which is the information related to the detailed product page.
This file calls the codes of the content-single-product.php file. You can apply general changes to display the product page, for example, if you want to define a general class for your product page, which you can do from within this file.
For example, we want to display a message on the first page of the product for visitors. Open the single-product.php file and change its codes as below.
<div><?php echo esc_html('This is our product.'); ?></div>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<div><?php echo esc_html('Display if product exists.'); ?></div>
<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>In this example, the message is added only before the “while” and the rest of the codes are the default WooCommerce codes.
If you refer to the product page, you can see the change.
As you can see, the phrase “This is our product.” is displayed on the page and before the product details display.
The content-single-product.php file
It is responsible for displaying the items before and after the product codes. This file is the same as the previous file and you can apply the general design on this page.
The file contains WooCommerce hooks, in which the details of the product are implemented, such as the name, description, etc., and all these codes are inside the single-product folder. To change and customize each of the details, we will refer to the codes of each part, which will be explained later in this article.
For example, change the file code as follows.
if ( post_password_required() ) {
echo get_the_password_form(); // WPCS: XSS ok.
return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
<div><?php echo esc_html('This is ('.get_the_title().') our product.'); ?></div>If you go to the product page, you will see that the message is displayed there with the name of each product.
If you want to define a special class for the product or change the display order of the product gallery and description, you can easily make the changes on this page. For example, you can change the display order of the image gallery with the product description in the code below.
<div class="summary entry-summary">
<?php
/**
* Hook: woocommerce_single_product_summary.
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_rating - 10
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
* @hooked WC_Structured_Data::generate_product_data() - 60
*/
do_action( 'woocommerce_single_product_summary' );
?>
</div>
<?php
/**
* Hook: woocommerce_before_single_product_summary.
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
?>As you can see, the order of displaying photos and product gallery, and product description has been changed.
Of course, if you use WooCommerce’s default styles, the display order will not change because the display order is determined by CSS codes.
Now let’s customize the product details in WooCommerce.
Single-product folder to customize the WooCommerce custom product page
This folder contains codes and designs of product details (single-product), which are briefly explained in the list below.
- add-to-cart folder: contains the “add to cart” button codes.
- tabs folder: contains product tab codes, such as the description tab or the product comments tab.
- meta.php file: codes related to product ID and product category
- photoswipe.php file: Slider to display product photos and gallery
- price.php file: codes related to displaying the product amount
- product-attributes.php file: responsible for displaying product attributes such as color, dimensions, etc
- product-image.php file: contains the codes related to displaying the product image
- product-thumbnails.php file: Display the product gallery
- rating.php file: display product rating out of 5
- related.php file: Display related products
- review-meta.php file: contains messages related to user comments such as “comment pending approval”
- review-rating.php file: display the rating for the product
- review.php file: display the list of customer comments
- file sale-flash.php: the code related to the word “auction” in the product
- file share.php: codes related to product sharing
- short-description.php file: related to displaying a brief description for the product
- stock.php file: related to the stock of the product in the warehouse
- title.php file: the codes related to displaying the product name
- file up-sells.php: contains the codes of products that you may like
Remove items and tabs from the WooCommerce custom product page
To remove items or tabs from the custom product page layout template of WooCommerce you have to simply know the hook, function name, and priority. For example, if you want to remove the related products section from the page, add the following code to your functions.php file.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );In this code, the hook is “woocommerce_after_single_product_summary” the function name is “woocommerce_output_related_products” and the priority is 20. If you look at the content-single-product.php file, all you need information is there.
If you want to delete tabs from the tabs section on your custom page of product, WooCommerce has its own filter.
add_filter( 'woocommerce_product_tabs', 'hs_remove_description_tab', 11 );
function hs_remove_description_tab( $tabs ) {
unset( $tabs['description'] );
unset( $tabs['additional_information'] );
return $tabs;
}This example removes the “description” and “additional_information” from the tabs section of all products. Add the code to your functions.php file.
Reorder the default of the sections in the template
Let’s assume that you want to change the default order of the sections of the product page in WooCommerce. For doing that you have to remove and add actions of the items.
For example, you want to change the order of the SKU and Category section with Add to cart button. Changing the priority of the actions can reorder the sections but you have to remove and add again the actions with new priorities.
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 40 );As you see, only the priorities changed.
WooCommerce custom product page example
In this example, some sections are deleted and some sections have been reordered.
Let’s assume that your theme supports Bootstrap. If not read our tutorial about creating a Bootstrap WordPress theme.
functions.php file
Open the functions.php file and add the below code.
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_filter( 'woocommerce_product_tabs', 'hs_remove_description_tab', 11 );
function hs_remove_description_tab( $tabs ) {
unset( $tabs['description'] );
unset( $tabs['additional_information'] );
return $tabs;
}
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 40 );This code removes the related products, the rating after the title from the product page, and the description and additional_information tabs from the tabs section. Then only reviews remain from the tabs. In this example, we changed the order of the product meta (SKU and categories) with the “Add To Cart” button.
If you look at woocommerce/templates/content-single-product.php you’ll see that the product summary is constructed using hooks with different priorities.
single-product.php file
Open the single-product.php file and change the codes as below.
get_header( 'shop' ); ?>
<div class="container pt-5 pb-5">
<?php do_action( 'woocommerce_before_main_content' ); ?>
<?php while ( have_posts() ) : ?>
<?php the_post(); ?>
<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php do_action( 'woocommerce_after_main_content' ); ?>
<?php do_action( 'woocommerce_sidebar' ); ?>
</div>
<?php get_footer( 'shop' );We added the div tag and its classes. It keeps the content boxed and adds padding to the top and bottom.
content-single-product.php file
Open the content-single-product.php file and change the codes as follows.
global $product;
do_action( 'woocommerce_before_single_product' );
if ( post_password_required() ) {
echo get_the_password_form(); // WPCS: XSS ok.
return;
}
?>
<div id="product-<?php the_ID(); ?>" <?php wc_product_class( '', $product ); ?>>
<div class="row">
<div class="col-md-4">
<?php do_action( 'woocommerce_before_single_product_summary' ); ?>
</div>
<div class="col-md-5">
<div class="summary entry-summary">
<?php do_action( 'woocommerce_single_product_summary' ); ?>
</div>
</div>
<div class="col-md-3">
<?php woocommerce_output_related_products(); ?>
</div>
</div>
<?php do_action( 'woocommerce_after_single_product_summary' ); ?>
</div>
<?php do_action( 'woocommerce_after_single_product' ); ?>In this file, we add related posts with the woocommerce_output_related_products() function. Previously we removed the hook from WordPress, not the function. Then the function could be used anywhere.
single-product-reviews.php file
Single product reviews display the review of the customers and users and admins’ replays. This file is responsible to display the product review.
To display the review like the example in the picture, just change the below code and let the others unchanged.
<div id="reviews" class="woocommerce-Reviews">
<div id="comments" class="row">
<?php if ( have_comments() ) : ?>
<ol class="commentlist d-flex flex-wrap">
<?php wp_list_comments( apply_filters( 'woocommerce_product_review_list_args', array( 'callback' => 'woocommerce_comments' ) ) ); ?>
</ol>
<?php
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
echo '<nav class="woocommerce-pagination">';
paginate_comments_links(
apply_filters(
'woocommerce_comment_pagination_args',
array(
'prev_text' => is_rtl() ? '→' : '←',
'next_text' => is_rtl() ? '←' : '→',
'type' => 'list',
)
)
);
echo '</nav>';
endif;
?>
<?php else : ?>
<p class="woocommerce-noreviews"><?php esc_html_e( 'There are no reviews yet.', 'woocommerce' ); ?></p>
<?php endif; ?>
</div>This code adds the row and flexbox of the Bootstrap to review leyout.
single-product folder
Open the title.php file from the single-product folder and change the codes.
<div class="col-md-8 d-flex align-items-center">
<?php the_title( '<h1 class="product_title entry-title d-inline pe-2">', '</h1>' ); ?>
<?php
global $product;
if ( ! wc_review_ratings_enabled() ) {
return;
}
$rating_count = $product->get_rating_count();
$average = $product->get_average_rating();
if ( $rating_count > 0 ) : ?>
<div class="woocommerce-product-rating">
<?php echo wc_get_rating_html( $average, $rating_count ); // WPCS: XSS ok. ?>
</div>
<?php endif; ?>
</div>In the previous codes, we removed the rating from the WooCommerce product but here we added the rating codes. This displays the rating of the product beside the name of the product.
We removed the related products from the layout of the custom product page of WooCommerce. But in this example, we will add them in another place like the picture.
Related posts layout
The related posts display archive products. The layout calls archive product code not the single product. Then we have to change the archive’s codes.
By default, WooCommerce uses its settings to display archive products. You can change them in the WordPress customize section.
But in this example, we want to display related products in a row, not in a column. We have to change its code to display the products.
In the loop folder, open the loop-start.php file and change the code as below.
<ul class="products <?php echo is_product()?'columns-1':'columns-'.esc_attr( wc_get_loop_prop( 'columns' ) );?>">This code display list of the products in a row on the single product page regardless of what the setting is.
Style the page
Now we designed the WooCommerce custom product page layout template by code. WooCommerce adds its style by default, but we have to change them to fit our changes.
Open style.css of your theme and add the following codes at the end of the file.
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
width: 100%;
}
.woocommerce #reviews #comments ol.commentlist li {
width: 33.333333%;
}
.woocommerce ul.products li.product a img {
width: 50%;
float: left;
}
.woocommerce ul.products li.product .onsale {
right: 50%;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
width: 50%;
float: left;
padding-left: 15px;
}
.woocommerce ul.products li.product .price {
width: 50%;
float: left;
padding-left: 15px;
}
.woocommerce ul.products li.product .button {
float: left;
margin-left: 15px;
}These CSS style codes, change the default style of WooCommerce.
