Customize Product Pages

How to Customize WooCommerce Product Pages

There are several vital questions you’ll need to answer upfront if you’re planning on opening a WooCommerce store. Answering these questions incorrectly for your particular business can greatly impact its success. In most cases, a generic template just doesn’t work and you ’ll have to customize WooCommerce product pages.

WooCommerce Product Page Example

Plan Ahead To Overcome Challenges

Some of the biggest challenges WooCommerce product pages face include:

  • Clutter.
  • Unnecessary features.
  • Absent features in generic templates.
  • Positioning of features that just isn’t ideal.

Sadly, the fact that setup and design change afterward is usually quite challenging because it makes it more relevant to get the setup right the first time around. Quite a few options are available for you to build custom WooCommerce product pages.

Clutter is perhaps one of the biggest obstacles once the store is setup. When it comes to custom design and setup, single product pages have a lot of unnecessary elements, such as star ratings and product categories, that just aren’t applicable to every store.

Then, there’s the placement of standard features that is less than an ideal setup for your users and product. You’re faced with repositioning of these elements that are essential but need to fit better with the store’s overall design.

Such above challenges can all be met through WooCommerce action and filter hooks. Let’s explore how you can build custom WooCommerce product pages.

WooCommerce Product Page Customization

WooCommerce Product Page Customization

Products are automatically displayed in a default template. You may wish to change this to a different template to represent your product best by loading the file “single-product.php.” This gives you access to the template files displaying product info on the front end. Keep these tips in mind before you insert your code:

  • Make a copy of the template in the theme when you’re customizing the templates of parent themes and plugins.
  • Only make your changes in the copy so that updated themes and plugins will not affect your customized changes.
  • You’ll find that some of the themes and plugins have an array of filter hooks and custom action available.
  • You can make changes directly into the theme file without going through to modify the markup of the template files, which, in turn, eliminates file duplication messes and provides a cleaner code.
  • Content-single-product.php is used for the product template, modifying information, and modifying the styling of the product page.
  • Single-product.php is used for template files controlling how a product’s info is formatted and displayed within the product page.

How To Insert Your Code To Change The Template

Once you’ve implemented the above tips, you’re ready to add your code to change the template. You’ll simply add the following code and the template for the single product page will be changed. Open single_template and insert:

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

}”

How To Build Custom WooCommerce Product Categories By Tweaking Template Files

Once your store is live, you may need a custom product category or an entire page. This is done by tweaking the custom template. You’ll first need to modify the content-single-product.php file so that adding products or categories come at the end of the file. Here are some tips:

  • Come up with an easily identifiable name for your file. If you, for example, add a lotion category, then you might rename the file to content-single-product-lotion.php so that you can easily and quickly find it.
  • You can use this file to make changes in the loop, add a sidebar, or any other subtractions or additions to customize how your page looks.
  • Now, you can use the single-product.php file to decide which templates are loaded to display the products.
  • Add a condition to ensure a product belongs in a particular category before loading the related single-product.php in your custom template.

How To Replace The File

Open up the file so that you can replace the

“woocommerce_get_template_part( ‘content’, ‘single-product’ );” code. Note that the “CATEGORYNAME” will be replaced in the code with your own category slug and “content-single-product.php” will be replaced by the new name of your file.

You can now replace the above code with the following:

“global $post;

$terms = wp_get_post_terms( $post->ID, ‘product_cat’ );

foreach ( $terms as $term ) $categories[] = $term->slug;

if ( in_array( ‘CATEGORYNAME’, $categories ) ) {

woocommerce_get_template_part( ‘content’, ‘single-product-YOURCATEGORY’ );

} else {

woocommerce_get_template_part( ‘content’, ‘single-product’ );

}”

Congratulations, you’ve now successfully renamed and edited your files, and they’re ready to be uploaded to the WooCommerce store.

This is just the tip of the iceberg. Check out this post from Site Point for more in-depth ways to change your product page:

https://www.sitepoint.com/customize-woocommerce-product-pages/

Uploading Your Files To WooCommerce Store

You’re in the homestretch now. Look in the theme’s directory and ensure you have a folder named “woocommerce.” Both the

content-single-product.php and single-product.php should go in the same folder. Some final tips:

  • To prevent overwriting the original files, it’s always a good idea to change the code elements in the folder.
  • Perform a final check to ensure the product and product category page changes are showing up.
  • If your changes aren’t showing up, it’s probably a missing character or typographical error; retrace the steps you made in the code of your custom template.

In conclusion, customization of products and product category pages aren´t as difficult as they may sound. You’re basically modifying and adding hooks to customize WooCommerce Product Pages. Do understand, however, that any changes you make alter the way the pages are rendered in the front end.

Want to learn more about how to Customize WooCommerce Product Pages or develop an active content strategy? Bright Vessel is a Certified WooCommerce Website Designer, specializing in E-commerce and digital marketing. Contact us today to discuss the importance and benefits of having a stellar active content plan in place.