How to Customize WooCommerce Product Pages

Muhammad Owais Alam
Muhammad Owais Alam
Share

When planning a WooCommerce store, you will have to answer a lot of up-front questions that will have a serious impact on the future success of the store. The setup of the store is a serious challenge because once done, changes to the setup and design of the store are always difficult. To customize WooCommerce product pages, you’ll have to consider the options available to you, which I’ll get into in this post.

Now once the store is up, the next challenge is the clutter on the product pages. WooCommerce Single Product page has a lot of elements that do not directly help with the custom design and setup of the store. Two common culprits are product categories and star ratings. Not every store needs these two elements on the Single Product page. Similarly, other elements also need to be repositioned in order to fit into the store’s custom design.

All these challenges could be tackled very easily through WooCommerce action and filter hooks. I have created this short list of things to demostrate what you could customize in the Product Page.

Customize WooCommerce Product Pages

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;
}

Build Custom WooCommerce Product/Category

At this point, I am assuming that you have a live WooCommerce store and are pretty familiar with the process of setting up a product page and product category. There are always cases where you need a custom product page or a custom product category page. This is done by tweaking the custom template of these templates.

Tweak WooCommerce Template Files

Now remember that when working with the content-single-product.php file, modify it so that whatever product or category you add should come at the end of the file. Another good practice is to give it a name that makes it stand out and be readily identified. For instance, if you have category with the name “Books”, change the file’s name to content-single-product-books.php. This simple change will make sure that you could identify the correct file for a particular category immediately. This file is used to make all sorts of changes (addition or removal of a sidebar, changes in the loop etc.) to make sure that the product or product category page looks exactly the way you want.

The next order of business is changes in the single-product.php file. This file contains the loop that decides which templates would be loaded up to display the products.

I will add an if condition that checks whether a product belongs to a particular category and then load the related single-product.php in the custom template. Now, there is no real need to rename the file. In order to add the code to it, open up the file and find the following code snippet:

woocommerce_get_template_part( 'content', 'single-product' );
You will want to replace it with the following code

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( 'YOURCATEGORY', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-YOURCATEGORY' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
}

In the code, find YOURCATEGORY, and replace it with the category slug of your choice. In addition, you would need to replace the content-single-product.php with the new name of the file. Using the example used above where the category slug was “books” and the content-single-product.php was renamed to content-single-product-books.php. At this point the code looks like:

global $post;
$terms = wp_get_post_terms( $post->ID, 'product_cat' );
foreach ( $terms as $term ) $categories[] = $term->slug;
if ( in_array( 'books', $categories ) ) {
    woocommerce_get_template_part( 'content', 'single-product-books' );
} else {
    woocommerce_get_template_part( 'content', 'single-product' );
} 

At this point, all the files have been successfully edited and/or renamed. The next step is to upload these files to the WooCommerce store. In order to make sure that all things go smoothly, makes sure that there is a subfolder named /woocommerce/ in the theme’s directory. Remember that both files (content-single-product.php and single-product.php) will go in the same folder. It is a good practice to change code elements in this folder of the theme so that you could prevent the difficult-to-debug error of overwriting the original WooCommerce files.

The final step is to check the product and product category pages to make sure that all the changes made in the code of the custom template have been applied and are showing up perfectly.

Conclusion

Learning to customize WooCommerce product pages and product category pages is a matter of adding and modifying hooks. It is important to understand that all these changes have direct impact on the way these two pages are rendered on the store’s front end. If you need any help with the code or any other aspect of the idea, do leave a comment and I will get back to you.

Frequently Asked Questions on Customizing WooCommerce Product Pages

What are the basic steps to customize my WooCommerce product page?

Customizing your WooCommerce product page involves several steps. First, you need to install and activate the WooCommerce plugin on your WordPress site. Then, navigate to the WooCommerce settings and select the ‘Products’ tab. Here, you can adjust the display settings for your product pages. You can also use a child theme or a plugin like Elementor to further customize the layout and design of your product pages. Remember to always preview your changes before making them live.

Can I customize my WooCommerce product page without coding?

Yes, you can customize your WooCommerce product page without any coding knowledge. There are several plugins available, like Elementor and Beaver Builder, that offer drag-and-drop interfaces for easy customization. These tools allow you to change the layout, add or remove elements, and adjust the design of your product pages with just a few clicks.

How can I add custom fields to my WooCommerce product page?

Adding custom fields to your WooCommerce product page can be done using plugins like Advanced Custom Fields or WooCommerce Custom Fields. These plugins allow you to add additional information to your product pages, such as size charts, delivery information, or product videos. Once you’ve installed and activated the plugin, you can create your custom fields and add them to your product pages.

How can I change the layout of my WooCommerce product page?

Changing the layout of your WooCommerce product page can be done using a child theme or a page builder plugin. These tools allow you to rearrange the elements on your product page, add new sections, or remove unnecessary elements. You can also adjust the width of your product page, change the position of your product images, or add a sidebar for additional information.

How can I add product variations to my WooCommerce product page?

Adding product variations to your WooCommerce product page can be done through the ‘Product Data’ section in your WooCommerce settings. Here, you can create different variations for your products, such as size, color, or material. Each variation can have its own price, SKU, and stock status. You can also add images for each variation to help customers visualize their options.

How can I improve the mobile responsiveness of my WooCommerce product page?

Improving the mobile responsiveness of your WooCommerce product page can be done using a responsive theme or a mobile optimization plugin. These tools ensure that your product pages look and function well on all devices, regardless of screen size. You can also use the WordPress Customizer to adjust the mobile view of your product pages.

How can I add a custom product description to my WooCommerce product page?

Adding a custom product description to your WooCommerce product page can be done in the ‘Product Data’ section of your WooCommerce settings. Here, you can write a detailed description of your product, including its features, benefits, and specifications. You can also use HTML to format your description and add links, images, or videos.

How can I add customer reviews to my WooCommerce product page?

Adding customer reviews to your WooCommerce product page can be done in the ‘Product Data’ section of your WooCommerce settings. Here, you can enable reviews for your products. You can also use plugins like YITH WooCommerce Advanced Reviews or WooCommerce Product Reviews Pro to enhance the functionality of your reviews, such as adding review reminders, star ratings, or review filters.

How can I optimize my WooCommerce product page for SEO?

Optimizing your WooCommerce product page for SEO involves several steps. First, you need to write a unique and descriptive product title and description, using relevant keywords. You can also add meta tags and alt text to your product images. Additionally, you can use an SEO plugin like Yoast SEO to further optimize your product pages, such as creating SEO-friendly URLs, adding schema markup, or generating XML sitemaps.

How can I add related products to my WooCommerce product page?

Adding related products to your WooCommerce product page can be done in the ‘Product Data’ section of your WooCommerce settings. Here, you can select the ‘Linked Products’ tab and add related products in the ‘Upsells’ or ‘Cross-sells’ fields. You can also use plugins like WooCommerce Related Products or YITH WooCommerce Frequently Bought Together to display related products in a more dynamic and engaging way.