Overriding WooCommerce Template Files

How to Override WooCommerce Template Files with a Child Theme

Default WooCommerce template files contain the front-end markup of your eCommerce site.  Understanding how to properly modify and override template files will give you much more control over your website and allow you to achieve deeper levels of customization.  In this Upload WP tutorial you'll learn how to override any WooCommerce template file via the use of a child theme.

We'll build on the WooThemes Template Structure documentation and provide step-by-step instruction (written and video) on how to apply it to your WooCommerce powered website.  Our intention is not for you to focus on the specifics of the file customizations that we make in our examples.  Instead, we want to demonstrate the Overall Process so that you can apply it and make updates to any file.  Before we dive into the details, take a minute to view the WooCommerce Template Structure and full list of modifiable files…

Full List of WooCommerce Template FilesThe Process for Overriding WooCommerce Template Files via the use of Child Themes

All WooCommerce template files are found in the following directory…  /wp-content/plugins/woocommerce/templates

In a nutshell, the process for overriding template files with a child theme goes like this…

Simply replicate the exact same directory structure (as in: /plugins/woocommerce/templates) in your child theme (e.g. /themes/YourChildTheme/woocommerce/single-product) and drop the modified file in the proper directory.

Individual files can be customized in any way you wish but the process of overriding them via a child theme is always the same.  It's important to note that this process is not theme specific meaning it works for any WooCommerce powered site.  Also, you should never modify template files within the /plugins/woocommerce/templates directory because using a child theme to override them ensures that your customizations are safe when you upgrade to the latest version of the plugin.  Now let's take a closer look at the exact steps involved in this process of overriding WooComm template files.

Step One – Install a child theme

Before you begin overriding template files you should install and activate a child theme.  Making changes to template files via the use of a child theme will ensure you're modifications are saved forever.  If you need help creating a child theme or would like to use one of our WooCommerce specific child themes simply Opt-In to the Upload WP Newsletter on the right sidebar of this site.

Step Two – Locate file(s) to modify, make modifications, save modified file(s) in Notepad++

I'll use a specific example to demonstrate the exact process for overriding template files with a child theme.  I'm going to modify the following file; title.php.  Specifically, I'm going to reduce the size of our product detail page titles from h1 to h2.   Here's how to go about doing that…

Open FileZilla (any FTP client will work) > connect to your server > public_html > yourwebsite > wp-content > plugins > woocommerce > templates > single-product > right click on “title.php” > View/Edit > title.php will open in Notepad where you can make your updates > when modifications are complete copy/paste from Notepad into Notepad ++ > save file as “title.php”

Important Note:  Like directory structure, individual files must been named exactly the same as their default name when saving them via Notepad ++

The following screen captures illustrate the process of locating files in /wp-content/plugins/woocommerce/templates

locate woocommerce template file
Locate template file in /plugins/woocommerce/templates/single-product > title.php > right click > View/Edit
Modify template file title.php
Modify template files in any way you desire.
save as title.php in Notepad ++
Copy from Notepad and paste into Notepad ++ > save as default file name

Important Note:  the process of locating, modifying and saving files is the same for any file.

Step Three – Replicate the WooCommerce template structure in your child theme

Sticking with our example of overriding the title.php file, the next step is to replicate the directory structure within your child theme.  Here's how to do that…

Connect to your server via FTP > public_html > yourwebsite > wp-content > themes > open your Child Theme > right click and select “Create Directory” > name the new directory “woocommerce” (all lower case) > open the woocommerce directory and create another called “single-product” > drag-and-drop your customized title.php file into the newly created single-product directory

That's it… the default /woocommerce/single-product/title.php file has been overridden with your customized title.php file and the product detail page title will now be an h2 instead of an h1.

Again, this overall process for overriding any template file is the same.  I simply used a specific example so that you could see each step in detail.

The following screen captures illustrate the process of creating the /woocommerce/single-product directory and uploading the modified title.php file within your child theme…

Create new directory in child theme
Create a new directory called “woocommerce” (all lower case) within your child theme
woocommerce directory in child theme
/woocommerce directory in child theme
create new directory called, "single-product" in woocommerce directory.
create new directory called, “single-product” in woocommerce directory.
Drop the customized title.php file into the single-product directory.
Drop the customized title.php file into the single-product directory.
End Result of modifying title.php
End Result of modifying title.php

Take some time to watch the tutorial videos below for more detailed examples of how to customize your WooCommerce site by overriding template files with a child theme.

Watch our tutorial video below to see the entire process of overriding template files with a child theme and making updates to the single-product directory.

Watch our tutorial video below to learn how to customize files in the /woocommerce/templates/cart directory.

This video builds on our “Customizing the WooCommerce Checkout Page” tutorial.  Specifically, you'll see how to make updates to the /woocommerce/templates/checkout directory files.

Important Notes:

  • All template files are found within the following directory… /wp-content/plugins/woocommerce/templates
  • The template structure and files are case sensitive.  Directories and files need to mirror the default structure and file names in your child theme.
  • This process applies to all WordPress themes – it's not theme specific because you're modifying WooCommerce Template files, not your theme files.
  • Tools you'll need to override template files are FileZilla and Notepad++ both of which are 100% free – simply do a Google search and you'll find the download links.

Thanks for taking time to view our tutorial on Overriding WooCommerce Template Files via the use of a Child Theme.  If you have questions or comments please feel free to post them below in the Upload WP Community Forums.  Finally, if you found this tutorial to be helpful, please share it with your friends.

71 thoughts on “Overriding WooCommerce Template Files

  1. Hi there,

    Great video, but another question. I want to remove the page titles in the body of each page. I.E. click on the SHOP page, it will show "SHOP" in the body. I find that redundant. I haven't found which php file to edit. thanks

    • Hi actually I found the part in the php for the full width template pages:

      template-fullwidth.php

      I just removed the <header> tags, but it doesn't remove it for the SHOP page which I guess is woocommerce, I can't find that php file.

    • Hi Charles,

      Thanks for your complements on our WooCommerce Template Files Override tutorial. So you're looking to remove the page titles for every page of site? If so, let me know what theme you're using and I'll try my best to figure it out. I searched through all the WooCommerce Shop page template files and did not find it there so I'm thinking it could be theme specific. Thanks,

      Adam

  2. Hi, thanks for your tutorial, but i am still confusing about how to make mystile boxed more slim than the default one, or maybe it could make it transparent and playing with the opacity, so the custom background will show perfectly..

    can you make it teddy? thanks

  3. This is exactly what I was looking for you, thank you!
    I learned from you how to find and change, individual parts of the pages, but here's another question:

    How do I change where on the page, those "parts" appear? For example, on the single-product page, say I needed the tabs and description the left, and the image on the right?

    Where do I go to change that order, or is that all controlled via CSS positioning (please say "no"! 🙂 )

    • Thanks for your question and support – most likely that is controlled via CSS. What theme are you using? Let me know and I'll test it out on a demo site and let you know what I find. Thanks

    • Hi Chris – Thanks for your question. To prevent the product category from displaying on the product detail page of the Mystile theme do the following…

      In the WordPress admin go to Mystile > Theme Options > General Settings > Display Options > and in the Custom CSS text box paste the following…

      .single-product .summary .product_meta a {display:none;}
      color: #6c6360;
      }

      That will get rid of "Automatic Pool Cleaners". However, "Category" will still display. The way to get rid of that is by Overriding WooCommerce Template Files.

      Most likely, the template file you'll need to modify to remove Category is from showing on the product pages is… single-product/meta.php

      • I just setup a child theme and have been playing with that, adding functions and css edits. Will move onto template overrides when I have time. Is there a way to get rid of more blank space on the main page other than the snippit you have posted. Specifically above and below the logo.

          • I really love the work you have done. I also love the mystile theme, but feel that more customization is necessary, specifically for the front page to make it a premium free theme. The rest of the template is awesome.

            For example on my page https://www.abseconpoolservice.com

            There is a lot of space around the logo area between the logo and the breadcrumbs. Between the breadcrumbs and my slideshow. Between the end of my page text and the footer. Being able to reduce some of this space would give it a nice professional layout. I wish I understood enough about the structure and layout, I would rewrite the front page portion to address these issues.

  4. I've only posted once…but the answer you had was perfect! Hope you have one to the following…

    Is there a way to change the default following text to something else:
    – "Featured Product(s)"
    – "Recent Product(s)"

    Also, is there a way to change the title size on the single-product page? I've found out how to change the entire site text, but can't find a way to change just the product title on the single-product page…?

    Last question…is there any way to get the featured images to sit on top of the text on the default home page vs. on the default right side of the image?

    Using:
    Woocommerce
    Wootique Theme w/child theme

    Hope you know the answer…I've spent WEEKS digging around on Google only to find that there are a lot of plugins that seem to have the answer, but no one really seems to know how to make the change without adding another 3rd party layer to manage with a plugin…

    Thanks in advance for the help!

    ~Dennis

    • Hi Dennis – Thanks for your questions. I was able to find the solution to your first question on changing the "Featured Products" and "Recent Products" text on the Homepage of the Wootique theme to something else. I created a tutorial video that shows you exactly how to do it with the Wootique child theme…

      click the following link to watch our tutorial on, "How to Change Wootique Featured Products and Recent Products Labels on Homepage"…

      https://youtu.be/wFA6hg3BiiE

      I'll work on getting you answers to your other two questions as soon as possible. Let me know if this helps.

  5. You've got some good tutorials here, but I haven't come across the one I need to make a few minor revisions to the Shipping Calculator fields. I do appreciate the information you have posted. I'll continue checking in for updates.

    Thanks.

  6. I tried to modify a template in my child theme like the tutorial above, however, no changes are made on the site. I'm using the Denitto theme and disable the woocommerce css. I even just copied all of the woocommerce templates to my theme just to make it easier for modification. any suggestions?

  7. Teddy, or anyone else for that matter,

    The template structure tutorials are awesome, learning the proper way to customize the layout is extremely helpful.

    I have been playing with some woocommerce themes for a few weeks now and I have found that the breadcrumbs dont really follow the intended pathway for example starting at the home page I click the "Shop" page and the breadcrumbs show up like [Home > Products] Then I click a product category such as earrings and the breadcrumbs are [Home > Earrings] then if I click on a specific earring for instance an earring called bamboo & pearls the breadcrumbs look like [Home > Products > Bamboo & Pearls]

    Goal #1 – Get the crumbs to keep the proper page order in the crumbs so the example would be [Home > Products > Earrings > Bamboo & Pearls]

    Goal #2 – Trade the word products for Jewelry so the crumbs would be [Home > Jewelry > Earrings > Bamboo & Pearls]

    Maybe there is already a good tutorial that explains this, but I couldnt find it. Can anyone point me in the right direction?

  8. I am looking to have my single product page as my main store page for now. I am looking to edit the woocommerce template. I found a jquery plugin that'll accomplish the zoom in like the amazon page I mentioned as well as allow me to click the gallery pictures to preview as well. Now I just need help changing the single product template to show the checkout, cart and continue shopping in the sidebar of the single product page. Any suggestions?

  9. No problem, hopefully that will help someone else or even make it easier for you to make a tutorial or whatever in the future.

    In the artificer theme if you go to a specific product it shows the main image in a polaroid looking frame and then the thumbnails down below. I made some changes to take out the polaroid look in my custom.css file, but now the image doesnt line up where the thumbnails stop. I tried going into the catalog tab in the woocommerce admin panel, but changing the dimensions there didnt seem to do anything. I believe the file to edit using your strategy above would be the product-image.php file under the single-product directory, although I am not sure how to adjust the dimensions of the main image. Instead of 300×300 I am going to need like 312×312 image size. Any idea of how to do this?

    • Hi Daniel,

      If you're willing please share the custom CSS you used to remove the Polaroid look from the main image of the Artificer theme at the product detail level. I'm working on figuring out how to adjust the size of the main product image and will update this when I figure it out. Thanks for sharing!

  10. Hi Teddy,

    Thanks for all your tutorials, there are great, very clear and useful. You helped me to make many modifications on my website (my theme is Mystile).

    I still have two questions for you:
    -1. CHANGE TITLES TAGS – I would like to modify the title "Additional information" in products detailed pages (indeed, my website is in french and "additional information" is translated by "Information complémentaire" which is not correct as these words should take a "s" "Informations complémentaires". I tried the same process you used to customize the title "Product description" using description.php (description.php customization, worked fine for me) but I didn't manage to make it working. Here is what I tried: In additional-information.php I deleted 'Additional Information' and replaced it with "Informations complémentaires" but nothing happened.
    What am I doing wrong?

    -2. FONT SIZE – I would like to change the size of the products' price in products detailed pages.
    I thought I should use the same process you employed when you customized title.php, changing h1 to h3. I went to single-product > price.php but I didn't see where is the code that concerns font size ….
    I also would like to change the font size of the above " Additional information" / "Informations complémentaires" and "Description" titles. In additional-information.php I tried to replace <h2><?php echo $heading; ?></h2> by <h3><?php echo $heading; ?></h3> but nothing changed….

    Hope I am not giving you too much work 🙂
    Thank you again for all your tutorials that helped me so much so far.
    Audrey

    • Hi Audrey,

      I'm happy to hear that our WooCommerce tutorials have been helpful. To change the "Price" font size on the Product Detail page for the Mystile theme do the following…

      In the WordPress admin go to: Mystile > Theme Options > General Settings > Display Options > in the Custom CSS box paste the following…

      .single-product .summary .price:first-child {
      font-size: 1.618em;
      color: #9f9693;
      font-weight: bold;
      margin-bottom: .618em;
      }

      Just change, "1.618" to a larger number like 2.618

      That will increase the size of the Price on the single product page of Mystile.

      In order for me to better help you solve the other issues you listed, please provide a screen capture that points out the changes you want to make and I'll do my best to get you the solution. Thanks

      • Hi Teddy,

        Thank you for your reply.
        I pasted your lines of code to solve the price font size issue but that did not work. I pasted this to reduce the size (but whatever the number nothing changed):
        .single-product .summary .price:first-child {
        font-size: 0.8em;
        color: #9f9693;
        font-weight: bold;
        margin-bottom: .618em;
        }

        / For information, the following modifications added to the Custom CSS box worked fine for me: #top {background: #96d193;}
        #top ul.nav > li a:hover {
        background: #96d193;
        text-decoration: none;

        Here is a screen capture, a mapping of my current issues !; I hope it's clear enough, please ask me for details if you need :
        https://www.tagto.fr/Adam/Audrey_issues

        Thank you very much for your help, I really appreciate. Feel a bit lost !
        Audrey

  11. Hi Teddy,
    Your Great video for over riding woocommerce template files inspired me to try more changes.
    Now I tried to switch the order of the elements in single-product.php

    – title
    – price
    – desc

    it should be…

    – title
    – desc
    – price

    But there is no file, that defines the order of the templates. I already can modify the templates itself, but where is the order defined? And how to change it?

    • Hi Heinz,

      I'm glad to hear that you've been able to apply our tutorial on Overriding WooCommerce template files to your site. In regards to "Defining the Order of the templates" / Controlling the order of the WooCommerce templates…

      So on the WooCommerce single product page you're looking to change the layout to the following;

      – Product Title
      – Description
      – Price

      I'm going to have to spend some time trying to figure that one out. I'm not sure off the top of my head but I will play around with it and update this comment when I find out. I'll also ask for help from the Upload WP community on this one. If anyone knows how to change the order of how Product Title, Price and Short Description display please share it with us here. Thanks

  12. Hey there,
    very nice tutorial! Still I was not able to figure out how to edit the archive view of the shop. In my case I wish to add the brand name under the product image but over the product title. I cannot find a template file for that. In the loop folder those parts are missing. Any Idea?

    • Hi Gabster,

      Thanks for the complements on this tutorial. If you could provide a screen capture / more detail in terms of the modifications you're looking to make to the Shop page that will help me search for the template file you have to make changes to. Thanks

  13. Hey Teddy!

    Awesome tutorial and I flipping love the site. I wanted to see if I could get your feedback on a slight template customization I couldn't quite figure out.

    I was wanting to make one slight tweak on the product page between the
    “description” and “additional info” tabs. I am trying to add a price
    comparison plugin. Below is a mock up of what we are trying to do.

    https://screencast.com/t/YX6poGzKE

    If you could please tell me how to get to the product page template I'll be
    able to handle it from there.

    Thanks guys!

    Cheers,

    Patton

    • Hi Patton,

      Thanks for the complements on our site! Based on your screen capture, I believe the page template you need to modify is in, "single-product". Specifically, I believe short-description.php is the file. You'll find that by connecting via FTP and going to…

      wp-content/plugins/woocommerce/templates/single-product/short-description.php

      Let me know if that helps.

      p.s. we're in the process of building a WordPress and WooCommerce Community Support Forum. Although we have not yet officially launched, please feel free to take a sneak peak and register if you'd like. In the near future we'll be using that as our primary support method. Here's the link… https://uploadwp.com/community/index.php

      • Thanks Teddy! I gave that a shot and didn't have much luck. I'll get connected with the forum.

        I can't tell you how much I appreciate the feedback. Thanks!

        Patton

  14. Hello Teddy,

    Thanks for all this info.
    I'm wondering if it is possible to add some custom fields within the product page.
    Do you have any idea how I can do this?
    Many thanks

    Pat

  15. Hello Teddy,

    Thanks for all this info first and it's really great!
    Due to some sort of restriction for the woocommerce theme I am using, I'm wondering if it is possible to do the either one of the following customization to the woocommerce PAGE setting:
    Situation: I would like to change the layout for PAGE, except to all of woocommerce pages, to a specific one I want. But by doing so, all of the woocommerce pages, except the SHOP page, display improperly and there's no any content showing on the woocommerce pages like Checkout Pages and Checkout Endpoints page,etc. But the shop page can sill display the product list as usual properly.

    Can all other woocommerce pages display their content properly just like the SHOP page as usual currently?
    OR Can POST display the same content by replacing woocommerce page . For example, I add a new post named Cart and it is supposed to display the the same centent with woocommerce page.

    If it is possible to do so, please kindly tell me how to do that and really appreciate you help!!! Thanks a lot.

    • Hi Mary – Please take a few mins to checkout our community forums here… https://uploadwp.com/community/index.php

      All of our WooCommerce WordPress support energy is currently focused in our forums so please look there for the solution. I encourage you to join the forums (free and easy) and start a new thread if you don't find the exact answer that your looking for. We have an active member base that is more than willing to help solve any WordPress related issue.

      Thanks,

      Adam

  16. I have been searching for a way to customize the order processing and order shipped emails and haven't had any luck yet. We have a subscription service where people get discounts on automatic shipments. When we put the discount in woocommerce it shows up on the processing and shipped emails as "cart discount" but we would like it to say "Automatic Shipments Discount" instead. Do you know if this is possible? I looked through the email template but the word "cart" isn't anywhere in there. Your help is much appreciated.

  17. how to Replace or Remove Product Title in Single Product page. and how to change position of price. i want to put price value in product description tab.

  18. Hi Teddy,

    I want to change the second line of the customer_processing_order.php file but it's in php. It currently says "Paid with Visa card ending with XXXX"

    I want it to say something like "Your credit card will be charge after shipping charges have been calculated"

    How can I do this?
    Thanks!

  19. I am using the wootique child theme in conjunction with woocommerce and after using some of the cool tips from the videos I have run into a bump in the roadway to utopia lol.

    On my main page the recently added products only shows 2 products wide instead of three and 12 deep. I was able to change the 12 products to 6 in the main index template aka index.php but the products still stay 2 wide even though it says 3 in the file.

    After spending the last 3 days trying to figure this out and search google for an answer. I am here to see if anyone can help before have a nervous breakdown and either take the computer out to the pasture for target practice with the .50 cal or load it up in the car and drive it to work and see if it can withstand a free fall from 146 feet.

    Thanks in advance

  20. Hello Teddy Triton
    This is wasim akram from India and i would like to know from you that i have installed a new version of woocommerce plugins in wordpress but i am unable to see the woocommerce icon in all pages what i have created because i want to show all product in on page only ……would you like to help me ……waiting response

  21. Thank you for the great tutorial and videos! I tried to do it exactly as described but using Textwrangler for modifying the thankyou.php I have not been able to get it to work. I am using a child of the Enfold Theme by Kriesi. /wp-content/themes/enfoldchild/woocommerce/templates/checkout/thankyou.php
    Can you help?

  22. I found the answer on another site. All I had to do was eliminate the templates directory and keep everything else the same in the path in my child theme directory. Now it works! /woocommerce/checkout/thankyou.php

  23. Hello,

    I’d like to change “Add to cart” text to my local language. I have translated the text within .po file but it didn’t works, so now i force to change directly in php file 🙁 Could you show me where is the place i need to change?

    Thanks
    Tuan.

  24. Hi Teddy, do you know how to change the woocomerce categories page by default from content="noindex, nofollow" to get indexed by google? it[s seems that woocommerce overriden any plugin etc to get categories not to be indexed. Thanks. Wellington

  25. Hello Teddy,
    thank you for your tutoral. I actually have a copule of questions that I can’t seem to be able to solve:
    1. I would like to remove all the customer and order details as well as the payment and bank account info etc. from the thankyou.php that shows up when a purchase is made. I have copied this file into my child theme but I don’t know how to remove the mentioned stuff…I guess something with a remove_action is needed, could you help me with this?
    2. I would like to completely remove the shop base page as I am only selling a single product and don’t need a shop archive with categories etc. I have deleted the [woocommerce_shop] and also deleted this page from my menu, instead I added my product to the menu. But still, when yyou type in my site’s name and /shop, you get directed to the default Woocommerce shop base page. How can I remove it completely?

    Thanky ou so much for your help!

  26. Hi Teddy, great video’s as they are very helpfull adjusting my woocommerce checkout page. However…
    1) …I probably completely overlook it, but where is the code you copy and paste in the function.php? should be somewhere on your page? i can just use this code (on Blaszok theme?)
    2) I consider removing the phonenumber field. However, getting rid of the ‘mandatory’ filling in phone number could be an alternative: can you tell me how to delete this (and leave the phone number field)
    txs. very much appreciated
    Michel

  27. Thank you for your excellent videos.
    I could see “page template” dropdownlist when you were editing product category and you selected “clothing” as the page template.
    But, when i click on “Edit” in my product category, I cannot see “page template” .

    Please, assist

    Regards,

    sao

  28. Hello Tedy,

    I see you are expert, so I would like to ask you for help. Both – theme owner and plugin provider dont want to solve my issue – they say that none of them doing customisation, but the plugin with theme doesnt work together =D. Im not developer, but tryind to do someting. Will explain the issue.

    My instance is marketplace, where each user can create its own shop.

    I applied plugin filter, which is beign inicialized at product-archive.php via:

    so the filter plugin is shown at
    https://e-trziste.eu/zbozi/

    But, the theme eMarketplace (its similar to etsy) has layouts for specific end-users shops, f. example:
    https://e-trziste.eu/obchod/nausnice/
    – this is the page of user who created own shop.

    Problem is that the php code above Ive put into themes product-archive.php is beign shown also at that shops pages, and, is breaking the theme result. And Im lost here.

    What I figured out is that in the theme, there are shops created by users defined as ?post_type=shop

    Now the question is, how to write function for product-archives.php like:

    (meaning if its post type shop, dont run the function)

    Im really person with 0 dev skills, could you help me here please?

    Thanks in advance,

    best regards

    Peter M

  29. Hi Teddy,
    We are wondering if there is any way, maybe with hooks, make our webshop look more like the screenshot: https://fargriket.com/wp-content/uploads/2015/08/Sida-3.png

    We would like the describing picture to have more room and the information moved to under the picture. If possible we would like the products, sizes, basket etc to be on the right side of the short descriptions. Finally the tabs could be under that portion of the single product. Is this possible?

    Thank you so much for your help in this!

    Kind regards,

    Kristian Jensen
    Färgriket AB
    Sweden

  30. Hi,
    How can I add My own custom Postcodes and zones to a wordpress site?
    Ghana where I come from does not have a postcode system, and I have designed one to use in running my delivery service, But I have to add it to word press before it can be selected as a destination or address in the shipping zone settings
    Thanks

  31. thanks for the tutorials, but all of these are just modifying existing themes. but is there any tutorial on converting a static html eCommerce website to woo commerce theme.

Leave a Comment