Monday, December 10, 2018
WooCommerce

Customize woocommerce product page, complete guide and tutorial

Learn how to customize WooCommerce product page like you want

Customize woocommerce product page, complete guide and tutorial

If you ever wanted to customize WooCommerce product page you already know how difficult it can be if you don’t have any programming skills at all.

It can be an easy task for those acquainted with PHP programming language, and who understands how hooks works in WordPress.

But for rest of the “normal” people, when trying to customize WooCommerce product page can smash with complexity of code. And going further through a simple operation can be a tedious task that requires hours of learning.

For both programmers and people with no technical knowledge at all, this tutorial will explain in detail how to modify woocommerce product page at will.

How to customize WooCommerce product page:

There are two files that WooCommerce uses for displaying products pages. single-product.php and content-single-product.php.
We are going to work on the second one in order to add, remove and reorder elements.

Prepare theme

But if we just edit the files in WooCommerce, all modifications will be lost next time WooCommerce updates. To prevent this, and because other benefits, a child theme is used in these cases.

There are several plugins that creates a child theme in few clicks. I personally like Orsibius Child Theme Creator but there are a few more good ones.

After creating child theme. You should copy both default files we name above and paste them in a WooCommerce folder.

  1. Create a folder named /WooCommerce in child theme.
  2. Copy file single-product.php from parent theme.
  3. Paste it inside the folder you’ve just created.
  4. Repeat operation with the other file: content-single-product.php

You can also grab the file from git-hub here.

Now we are ready to start customization of WooCommerce product pages.

A word about WordPress hooks

We have to talk about WordPress hooks before getting into any customization.

For now it’s enough to know that, as it name suggests, hooks are a way to “hook” to a specific location of code of WordPress, in this case WooCommerce.

In this way we can modify behavior with external scripts and without having to touch its code.

There are plenty types of hooks, here we only need the WooCommerce hooks. And specifically the products page hooks.

Here you can see all the hooks available for WooCommerce product page.

Taking a look at that excellent resource we can start playing with hooks. Let’s see how it works.

Reordering elements

Reordering elements to customize WooCommerce product page is one of the most common ways of customization. And it’s very easy when you understand how it works.

For example let’s say we want to show the price of the product below the description instead its default position.

To achieve this we just need to set the priority of the element using the appropriate hook.

In this case the right one would be woocommerce_single_product_summary.

Just add to your file content-single-product.php in child theme the following code. Paste it at the bottom of file.

So what we are doing here is using two hooks. We Remove the default position with the first one, and set a new hook with a higher priority, which is 21.

Note that the hook is woocommerce_single_product_summary while woocommerce_template_single_price is the element you want to apply hook to, the function.

You can find all functions available in the content-single-product.php tagged as a comment. This means it is there just for guidance.

The priority is the numeric value at the end which lays down the order elements should be displayed. Lower values will be displayed first and so on.

This operation could be done with any element of the product page, and it is a common feature of all kind of WordPress hooks.

Before:
Customize WooCommerce product page

After:
Customize WooCommerce product page

Removing default elements

Removing any element is done the same way, using the right hook you can remove any element of the WooCommerce product page.

Let’s say for example you want to remove the rating stars in single product page. This is some very common task as many people don’t like that review system.

Just add this line of code at the end of content-single-product.php file in your custom theme.

If you want to remove any other element, just take a look at the commented lines in file to know the functions that can be used in each hook. Each function works for a specific element.

Before:

Customize WooCommerce product page

After:

Customize WooCommerce product page

Adding new elements

You can add whatever you want using the right hook. As you can see looking at the file, content is organized into <div> tags.

So if you want to add any hook you just have to put srcipt in the right place.

For example, if you want to add a notice above all product pages you will paste the following script at the beggining.

So first lines of file would look like this:

This is the result:
Customize woocommerce product page
Check the WooCommerce hooks reference document to see every hook available. There are lots of them.

You might want to study that document to get into more advanced concepts of hooks and WooCommerce customizations.


At this point, you should be able to customize WooCommerce product page to meet any requirement. ¿Did you get it clear how hooks works? That is essential not only for mastering WooCoomerce but WordPress itself.

If you like our guide please share it in your social media network. Or if you have any question about this or any other WP related issue, you can ask whatever you want in our Q&A section.

Please tell us what you think leaving a comment.

Seba Rossi
the authorSeba Rossi
Experienced Web Editor with more than 1500 published articles. Passionate about Web development and with advanced knowledge of SEO, amateur guitarist and lover of tasty beer with the company of good and old friends.

Leave a Reply