Customize WooCommerce Product Page

How to Edit Your WooCommerce Product Page the Right Way

If you want to change the layout or the look of your single product page in WooCommerce this article will show you how.  You can have complete control of the layout of your product page.  I’ll show you how you can change the CSS and what product attributes you can show or not show .  Even change the order in which they are shown.

If you have edited a WordPress theme before, you know you should use a child theme to make changes.  This is to prevent your changes from getting overwritten when WordPress is updated.  Also, as a general rule you should avoid editing core files to any large program, if you can avoid it.  The same holds true for WooCommerce.  Thankfully they have made it easy to change the layout and even add your own style rules to product pages without touching the core files.  WooCommerce is designed to add and remove hooks to functions, then call those functions to display in the template file.

Now, I say this is easy meaning straightforward and it is once you know what you are looking for and spend some time looking through the template files and style rules.  If you are new to web programming or don’t have the time and patience to devote to learning how to do this, you may want to just hire someone to get this done.  Contact Me  for a quote

If you are ready to go for it, I will give you a head start by showing what to look for and where to find information you need.

First set up the following:

You will need a child theme.  If you are unsure of how to set up a child theme, find out here:  https://codex.wordpress.org/Child_Themes

Create a directory called woocommerce in your child theme’s folder.  Example: …themes/”your-child-theme”/woocommerce.  This is where you will save the WooCommerece template files you edit.  Don’t make changes to the original template files.

Create a functions.php file in your child themes directory.  Example: ” …themes/your-child-theme/functions.php”.  This is where you will put the code to add and remove product attributes to php functions.  The functions will be used to display the attributes in your template file.

What is a WooCommerce hook

For the purposes of editing the product pages layout, a WooCommerce hook is an attribute of a product in variable form.  You can choose to show that attribute of the product such as title, description, price.  To do this you must first add the hook to the function where you want it displayed.  Example:  add_action( ‘woocommerce_product_thumbnails’, ‘woocommerce_show_product_thumbnails’, 20 );

This adds the thumbnail images to the PHP function woocommerce_show_product_thumbnails.  You would put this code in your functions.php file in your child theme.

What is the number at the end of the WooCommerce hook function.

This number tells WooCommerce the order priority for the hook.  Number 5 will display first, then 10, then 20, and so on.  If you want your added attribute to be displayed last give it a high number like 50.

Remove an Attribute

You can choose to remove an attribute of the product that is being displayed.  To do this use the remove_action function in your child theme’s function.php.  Example: remove_action(‘woocommerce_after_single_product_summary’, ‘woocommerce_template_single_rating’, 5);   This removes the product rating attribute from the woocommerce_after_single_product_summary function.
Here is a link to a visual reference of hooks and functions that can be displayed on a WooCommerce single product template page.  Check this out, it was so helpful for me.  https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/

Which theme to Edit

There are two theme templates that display the product page.  They are both in the wp-content/plugins/woocommerce/templates directory.

content-single-product.php formats the product summary between the header and the main content, above the title and bread crumbs.

single-product.php formats the main content including title and breadcrumbs up to the footer.
Look through these templates to see the which functions are displaying which attributes.  They should have comments above to show you which hooks have been added, like this.

So, you know that product data tabs, upsell display, and related products where added to the “woocommerce_after_single_product_summary” function and will be displayed in the template where it is called.  Now you can choose to remove these or add more.

Add Custom Written Style to WooCommerce Product Display Functions

You can even add you own style rules by writing your own function.  I wanted to add some style to the product summary part of the page, so I created this class in my style.css in my child theme.

Style rules for WooCommerce page

 

I then wrote this function and put it in the functions.php of my child theme.  Like so….

 

Custom functions to create a hook to add to WooCommerce functions

adding custom hooks to WooCommerce functions

Leave a Reply

Your email address will not be published. Required fields are marked *