Custom Page Template WooCommerce Product

I recently had two client projects that required the Single Product WooCommerce page to display differently from other Single Product pages. Normally, your run of the mill single product page would have the product image, cost, description and an add to cart button. My clients wanted theirs to look different, but only for a single product or only within a certain product category.

The solution I have is for one particular product, or a series of categories. It isn’t a fully built plugin, though I assume if someone were to go the extra mile to make a plugin for this, they could save some people a whole lotta time. This is using the (as of this writing) WooCommerce 2.5.5 on the latest version of WordPress 4.4.2. This short write up assumes that you know your way around the WordPress and WooCommerce template files and can make PHP edits without assistance. Without further ado, here’s how you set a custom page template for a WooCommerce product or product category.

The Problem

Normally with a Page, WordPress allows you to assign a specific page template. With this template, you can choose to have a sidebar, or omit it, or even display a completely blank page with only the post contents. However, posts don’t do this by default (though you can accomplish that with this plugin [note: you may have to modify it a bit to work with the latest version of WordPress]) and WooCommerce products definitely did not support this functionality. So, since this wasn’t built into WooCommerce and I didn’t see anything that was pre-created to allow for this functionality, something had to be customized.

1. Copy WooCommerce Files

To force a product to display a different template page than the default, you need to pull two files from WooCommerce. The first file is single-product.php. Single-product.php controls the template files that should be loaded as well as loops through and displays the product information on the screen. You will be editing single-product.php to add an if conditional. The other file you’ll need to pull from WooCommerce is content-single-product.php. This file is your page template itself, it is the file you’re going to edit to make your product display however you want. So in short, you need to grab these two files from the /woocommerce/ folder:

single-product.php
Used to call the templating files that determine what information and how your product page will display the product’s information.

content-single-product.php
Used as the product template, and will be modified to change the product page to display the information or styling that you want.

2. Set Up Your Product/Category

I’m assuming you’ve already used WooCommerce so setting up a product or a product category shouldn’t be anything new. Still, it goes without saying that if you want a product or product category to have a custom page, you should probably have it all set and ready to go.

3. Modify Your Copied WooCommerce Files

With your content-single-product.php file, you’ll want to modify the tail end of it to add whatever your category or product is. I recommend naming it something that you’ll be able to readily identify. So if your product category was something like, “Hats” then append the file name of content-single-product.php to something like this: content-single-product-hats.php. Also in this file, you’ll want to make your template changes, so add a sidebar, remove a sidebar, change the loop, do whatever you want to get it to look the way you want the product/product category to display.

Next, you’ll need to edit some code in single-product.php. Like I said before, this is the file that contains that loop that actually determines what templates to load up to display the products. What we’re going to do is include an if conditional in this file to determine if a product falls under a specific category, and if it does, then single-product.php should load up the custom template you created. You do not need to rename the single-product.php filename, you’re just going to open it up in your favorite code editor and modify some of the PHP in it. So open up single-product.php in your code editor, and find this code:

woocommerce_get_template_part( 'content', 'single-product' );

You’ll want to replace it with this 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' );
}

Where you see YOURCATEGORY, you will want to replace it with whatever your category slug is, and whatever you renamed your content-single-product.php file to. So for example, if my category slug was ‘hats’, and my content-single-product.php file was renamed to content-single-product-hats.php. Then my code would look like this:

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

4. Upload and Test

Cool, you’ve edited your files, renamed them, etc. Now it’s time to upload these files to your site. Make sure you have a subfolder called /woocommerce/ in your theme’s directory. Both files go in the same directory. You want to make these kinds of edits in that folder in your theme so you don’t end up overwriting the original WooCommerce files.

Now all you have to do is check out your product or product category to make sure your custom template is showing up properly and you’re done!

Resources

The following threads on Stack Overflow were invaluable resources for me.

WooCommerce Custom Single Product Template, StackOverflow

WordPress WooCommerce Template File Override, StackOverflow


Posted

in

by

Tags:

Comments

16 responses to “Custom Page Template WooCommerce Product”

  1. arjun

    but where to put these to file in our theme

  2. Thank you so much!! God bless you! I had been trying to do it for 24 hours in others ways, but yours is the better.

  3. Very helpful tutorial – thank you!

  4. franckds

    great and thank you very much.
    and how to do the same with the category pages?

  5. Guilherme Coelho

    THANKSSSSSSSSSSSSS, God Bless You!

    1. You’re welcome, Guilherme! 🙂

  6. Great solution… It was a complex issue but you solved it in smart way. So user can set the single product page template based on their category terms. So there will need just to create multiple PHP file for the different types of terms.

    1. Thanks so much for the comment, Themeix. 😀

  7. Made this work for the Flatsome theme which was a little tricky as the content-single-product-.php calls in a layout template file as set in the theme options. Had to bypass that and copy the layout code directly into the content-single-product.php.

    Also, I used wc_get_template_part instead of woocommerce_get_template_part.

    1. Thank you for sharing that, Louise! 😀

  8. James

    Hi there!

    Can you modify the code so that it will work on Woocommerce 3.1.1?

    If you require payment for this, please let me know.

  9. Prarthana

    Excellent. Thanks for sharing this info. This would help me with getting started.

  10. I have been all over the internet looking for this solution, thank God I have finally found this post, hope it resolves my issue also.

    1. I hope it fixes the issue you were having too, Janmeet. Thanks for dropping by and leaving a message. 🙂

  11. salli

    Hi – thanks, this worked perfectly. I had tried several other solutions which didn’t work so very happy I came across this port. thanks Khanh

    1. I’m glad this post was able to help you, Salli. Thanks for dropping by and leaving a comment too. 🙂