customize woocommerce product page template

How to Customize WooCommerce Product Page Template

Are you looking for ways to edit the templates of your product pages? We've got you covered. In this guide, you'll learn dissimilar ways to customize the WooCommerce product page template.

WooCommerce includes a large number of customization options. One of the nigh interesting options is the possibility to edit the default templates of your eCommerce shop. And the fact that you can customize them with more than one method is even more impressive.

Let's have a look at some of the benefits you lot can look from customizing your product folio templates.

Benefits of Editing the Product Page Templates

Editing the product folio templates improves the experience of both the website owner also as the customers. The default WooCommerce product folio template is adept for near sites. It provides all the necessary information about your product that shoppers demand. However, having a unique production page will give you a valuable reward to stand out from your competitors.

Even though there is adequate product data in the default template, making a keen first impression will assistance y'all boost your sales. For this, you might withal want to add or remove some details. Y'all might besides need to change some elements of the product page depending on the type of product or services you sell, customers' demands, or ongoing trends. For example, you lot tin display and regularly update data about discounts, offers, and yearly sales to attract more visitors.

Additionally, in that location are color, layout, and typography changes you can apply to make your website unique and make an impression on shoppers.

These are some of the most common changes y'all can apply to product page templates, simply there's a lot more you can do. Let's take a look at different methods to edit the product page templates in WooCommerce.

How to Customize the WooCommerce Product Folio Template

There are different means to edit WooCommerce product folio template:

  1. Programmatically
  2. With page builders
  3. Using a plugin

Before we outset, there are a few things that we would like you to go along in mind.

  • Make sure that you have properly set up WooCommerce and don't miss whatever steps to avoid any issues
  • As we volition change some theme files that contain fragile data about your website, we recommend you backup your WordPress website and create a kid theme or one of these kid theme plugins before you continue
  • For this sit-in, we'll use the Divi theme. The theme files may exist different on your website depending on your theme, but you should be able to follow all the steps without any issues
  • >Make certain you utilise 1 of the compatible WooCommerce themes on your website

Now without farther ado, let's move on to the methods to edit product page templates.

1) Customize WooCommerce Product Page Template Programmatically

This method is highly recommended if you want to make elementary tweaks to your production page templates. You lot can easily edit them with lawmaking but information technology'south better if you have some bones programming noesis if you lot use this arroyo.

We will more often than not use WooCommerce hooks hither, so if you are non familiar with them yous can have a await at our guide on how to use WooCommerce hooks. This is quite useful as hooks likewise allow you lot to customize whatever type of WooCommerce template.

Permit's have a look at a few examples of things y'all can do to edit product page templates.

one.i) Removing Elements from the Product Page

If y'all want to remove elements from the product page, you can apply one of the snippets below that use hooks to delete or hide the elements you want. All you have to do is select the correct one and add together the lawmaking to your website theme files.

You can find all the available hooks in the comments of the content-single-product.php file in the WooCommerce plugin template files. Alternatively, you can refer to this page.

These are a few examples of snippets you tin can utilize to remove an element from your product pages:

// remove title remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); // remove rating stars remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', x ); // remove product meta  remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta',twoscore ); // remove description remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',twenty ); // remove images remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',twenty ); // remove related products remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20); // remove additional information tabs remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

Subsequently you have found the hook to delete the chemical element you lot want, go to Advent > Theme Editor on your WordPress dashboard and open up the functions.php file. Then, add the code snippet y'all want with the remove_action function at the bottom of the file.

For instance, to remove the product page title, we would paste the following snippet:

        
Then press          Update File          and check your site from the front. You will run into that the championship has been removed from the product page.
        
1.2) Add New Elements
        
You lot tin can likewise use hooks to customize your WooCommerce page template and add new elements to it. To include an chemical element, yous need to use the          add_action          function with the required hook.
        
For example, to add some text to the product page, you tin can paste the following snippet to the          functions.php          of your child theme file.
        
add_action('woocommerce_before_single_product_summary',function(){   printf('<h4><a href="?added-content">Congratulations, y'all\'ve just added a link!</a></h4>'); } );
        
This volition add new content to the product page. Just adjust the lawmaking in a higher place to change the text and size to add any elements y'all want to your product pages.
        
          add element customize woocommerce product page template        
        
ane.3) Reorder Elements
        
Another pick is to customize the WooCommerce product page template past reordering some elements. Similar to removing and calculation elements, you demand to add code snippets to the          role.php          file of the kid theme.
        
To reorder elements, y'all demand to remove the hook from the product page template get-go and then add the hook once again in another position. Information technology is a combination of the code snippets we've used in the previous steps.
        
In the example given below, the script will motility the product clarification correct below the championship past changing the position gild.
        
// modify order of description remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );
        
Similarly, you can utilize any of the required hooks to reorder the elements of your product folio templates. Just make sure that you enter the correct position orders.
        
If you want some more than examples about this, have a await at our guide on how to edit the WooCommerce product page programmatically.
        
2) Edit WooCommerce Product Page Template with Page Builders
        
Page builders are great tools that make the process of creating and customizing websites easy. This is also the case with product folio templates. If you lot don't have programming skills, you tin can customize a WooCommerce product page template with folio builders in a few clicks.
        
Additionally, page builders also let you lot          save templates of the product pages          with the changes that y'all accept made. And since near page builders provide you with a          elevate and drop editor          to edit the templates, you can salve a lot of time.
        
There are many page builders in WordPress. For this tutorial, we will use the          Divi Builder          since it is one of the best page builders and works dandy with our theme, Divi.
        
                  
        
To start using it, make sure that you lot get Divi and and then install the Divi Architect on your website. After that, yous're ready to start editing the templates.
        
ii.i) Open up the Visual Editor
        
The first step to editing a product folio template is to open one of your product pages and click on the "Enable Visual Builder" option on the admin bar. You will be redirected to the          Divi Visual Editor          where you can customize the product page template.
        
If you don't see this option, brand sure y'all are logged into your WordPress dashboard in the same browser window.
        
                  
        
2.2) Customize the Template with Visual Editor
        
With the help of the visual editor, you can customize almost all the elements of your product folio. All you take to do is simply click on any of the          existing elements that you want to edit.
        
For case, allow's say you desire to customize the product clarification background colour. Press on the production description and open up the description settings past clicking on the          Settings          icon.
        
          module settings icon customize woocommerce product page template        
        
Then, become to          Background          and select the color you want to set up for your product description. You will see that the background color changes immediately in the live preview. Once you're happy with the color, recall to salvage the changes.
        
                  
        
Apart from changing the colour, allow's say you want to add more modules to the product page template. But click on the "+" symbol on the area where you want to add a module, select the type of row, and select the module yous desire.
        
If you want to add something in particular, you can search for specific modules by typing in the search field. Then, all you have to do is configure the options in the module settings and save the changes.
        
For example, allow's say you want to add a            countdown timer          module to outset a Christmas sale. Press the + symbol and search for the inaugural timer keywords.          countdown timer customize woocommerce product page template        
        
And so, add together the necessary information to the countdown such as text, time, and date in the module settings.
        
          countdown timer demo customize woocommerce product page template        
        
You will see the changes in existent-time on the preview as you brand them. One time you're happy,          save          the product page template by expanding on the 3 horizontal dots at the lesser of your screen.
        
Quick Tip to Customize Production Page Template with Divi Builder
        
You tin can as well have different production folio templates depending on the type of production yous sell in your online store. All you lot have to do is go to          Divi > Divi Builder          in your WordPress dashboard and click          Add New Template.
        
                  
        
If you scroll down to the          Products          section, you will see that you can create templates for          specific product pages. This can depend on the categories, tags, or specific products. Simply select the option you lot want and printing          Create Template.        
        
                  
        
Then, you need to          add a Custom Body          to the product page template that you've just created. You can either build a new one from scratch or employ one of the templates from the library. Regardless of what you select, you will have to use the Visual Editor once more to customize the WooCommerce product page template.
        
If you want to know more nigh how to use Divi Builder, have a await at our detailed guide on how to customize the WooCommerce production page in Divi.
        
Alternatively, you tin use other page builders to edit the production folio templates. If you apply Elementor, you tin can check out our tutorial to customize the WooCommerce product page in Elementor for more data.
        
iii) Customize WooCommerce Production Page Template using a plugin
        
If you lot want to brand          very specific changes          to your WooCommerce production page templates, you lot can use a plugin. Some page builders like Elementor are also available as plugins, but at that place are other dedicated tools that you can utilise for very specific functionalities.
        
One of such plugins is          Direct Checkout for WooCommerce. This tool is designed to assistance you simplify the checkout process in WooCommerce. With this plugin, you can redirect customers from the product page direct to the checkout folio after adding a product to the cart. This way you shorten the purchase process and boost your conversion rates.
        
All in all, this is an excellent tool to edit the buttons of the product page templates on your store.
        
Let'southward have a wait at the steps to          edit the product page template with Direct Checkout.
        
3.i) Install and Actuate the Plugin
        
First, you have to install and activate the plugin. Yous can download the free version from here or get one of the premium plans that include more functionalities and commencement at xix USD (one-time payment).
        
Alternatively, you can go to          Plugins > Add together New          in your WordPress dashboard, search for the plugin and install information technology.
        
                  
        
After installing and activating the plugin, yous need to set it up.
        
iii.2) Configure the Direct Checkout Options
        
Go to          WooCommerce > Straight Checkout          and open the          General          tab.
        
                  
        
And then, prepare the following options:
        
              
  • Added to cart redirect:            Aye          
    •           
  • Added to cart redirect to:            Checkout          
    •         
        
Finally,          save the changes          and preview whatever of the product pages in your online store. Now as soon every bit you lot click the          Buy          push button on any product, yous will be directly redirected to the checkout page.
        
For more data nearly how to add together i-click buy buttons, check out our guide on how to add a quick purchase button in WooCommerce.
        
In summary, customizing the product page templates is similar to editing the product folio. You can have a wait at our tutorial to customize WooCommerce product pages for more information and ideas to brand the most of your product page templates.
        
Bonus: Edit WooCommerce Production Folio Template with CSS
        
Then far, nosotros've seen how to customize the WooCommerce product page programmatically, with folio builders, and using dedicated plugins. But there'due south another affair y'all tin do. You can too edit your template with a bit of CSS. This is the quickest method to make small pattern changes on your product page.
        
CSS scripts are very useful to change the display and design options, so you lot can easily add them to your site past going to          Appearance > Customize > Boosted CSS. Once there, you can add your CSS scripts to customize the production page templates.
        
Hither are some examples of things yous can practise to improve your production pages using CSS.
        
Modify the Championship Font Size
        
The following CSS code will alter the title font size on the product page to 16.
        
.woocommerce div.production .product_title {          font-size: 16px;  }
        
You tin can cull any other font size by simply adjusting the          font-size          line in the snippet.
        
Change the Championship Color
        
You tin too customize the product page templates past changing the colour of the title with CSS. Simply look for the hex codes of the colour you want to add to your website with CSS and utilise the below code.
        
For example, in this snippet, nosotros have used the color lawmaking #800000 that changes the championship color to maroon.
        
.woocommerce div.production .product_title {              color: #800000;  }        
        
Once you take fabricated all the changes,          Publish          it.
        
For more than examples of CSS snippets, accept a look at this mail. It shows you how to customize the store folio only you can apply the same snippets to edit the product page templates.
        
For more specific examples to apply to Divi, you tin can check out this other article.
        
Conclusion
        
All in all, editing the templates of your product page can help you build unique product pages and stand out from your competitors. Depending on the type of products you sell and feedback from your customers, yous can add together, remove, or reorganize elements and make sure that you're making the well-nigh of your product pages.
        
In this guide, nosotros have seen various ways to customize the WooCommerce product page template on your website
        
              
  • Programmatically
    •           
  • With folio builders
    •           
  • Using a plugin
    •         
        
All these methods are effective in their way, so choose the most appropriate for your needs. If you take coding skills, the programmatic approach is very effective and gives you lot enough of flexibility on what you lot tin can modify. Otherwise, yous can use a page builder to easily customize different sections of your templates. Finally, y'all can use plugins such as Directly Checkout that let y'all to utilise specific changes to your product pages.
        
Accept y'all edited your templates? Which method did you use? Let us know in the comments beneath.
        
If y'all found this tutorial interesting, here are some more articles that you may also similar:
        
              
  • How to customize the WooCommerce related products
    •           
  • All-time Plugins to Customize WooCommerce Product Page
    •           
  • How to add an image to a product in WooCommerce
    •