Product Loop

Created OnDecember 17, 2018

Last Updated OnDecember 17, 2018

byDogMan

How to Customize WooCommerce Product Pages — SitePoint ×

Learning Hubs Books Videos Email Courses Login Sign Up PREMIUM MEMBER OFFERSale ends inSale ends in20hrs59mins00secsAccess 290+ Books & Courses for $9

wordpress
August 23, 2017
By Muhammad Owais Alam

How to Customize WooCommerce Product Pages

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.skipAds by Hooly

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

–ADVERTISEMENT–

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.

Meet the author Muhammad Owais Alam WordPress Community Manager at Cloudways – A Managed WooCommerce Hosting Platform. Loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email me at owais.alam@cloudways.comSponsors

Connect

We use cookies to provide you the best possible experience of SitePoint. Want to know more? Read our Terms of Service and Privacy Policy. Have questions? Please contact support@sitepoint.com, we’re happy to help!Understood

Sumo

Focus Retriever