Title: How to customize the WooCommerce template structure
Last modified: July 4, 2018

---

# How to customize the WooCommerce template structure

 *  Resolved [fbarret](https://wordpress.org/support/users/fbarret/)
 * (@fbarret)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/how-to-customize-the-woocommerce-template-structure/)
 * Hello,
 * How could I customize the WooCommerce pages’ HTML structures displayed by Storefront
   and controled by themes/inc/woocommerce/storefront-woocommerce-template-functions.
   php using a child theme?
 * I tried to overwrite the file in my child theme, followed the WooCommerce official
   instructions here [https://docs.woocommerce.com/document/template-structure/](https://docs.woocommerce.com/document/template-structure/),
   tried to handle functions in my child theme… but I can’t obtain any result.
 * It looks as if Storefront complicated a principle initially made to be simple.:-/
 * Thanks for any help.
 * François
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fhow-to-customize-the-woocommerce-template-structure%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Job a11n](https://wordpress.org/support/users/jobthomas/)
 * (@jobthomas)
 * Automattic Happiness Engineer
 * [7 years, 9 months ago](https://wordpress.org/support/topic/how-to-customize-the-woocommerce-template-structure/#post-10466053)
 * Hey [@fbarret](https://wordpress.org/support/users/fbarret/) – without seeing
   the files, it’s very difficult to see what exactly is happening, but let’s try
   to find a few pointers.
 * If your child theme functioning correctly? Without adding any other files, is
   your child theme active and looking exactly like Storefront?
 * Have you created the right folders? Overrides for WooCommerce specifically, should
   be under `wp-content/themes/your-child-theme/woocommerce/templates/`.
 *  Thread Starter [fbarret](https://wordpress.org/support/users/fbarret/)
 * (@fbarret)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/how-to-customize-the-woocommerce-template-structure/#post-10466231)
 * Hello Job, Thank for your answer.
 * I can’t show you the project that is in developpement and confidential for now.
 * All works correctly, the child theme is clean and with only a few files.
 * Yes, as I said, I followed WooCommerce instructions and created directories and
   files with correctly named, as described here: [https://docs.woocommerce.com/document/template-structure/](https://docs.woocommerce.com/document/template-structure/)
 * The problem is that apparently Storefront overides the html structure of the 
   WooCommerce plugin with its storefront-woocommerce-template-functions.php file
   for ex. Storefront complicates strongly the customization and it is rather annoying
   because of the wasting time induced…
 * For example, what is the best method under these conditions to simply modify 
   these content framing tags:
    <div id=”primary” class=”content-area”><main id=”
   main” class=”site-main” role=”main”> …to add/delete an attribute, add a tag…?
 * Such little things that would save me from producing masses of CSS or JQuery 
   scripts.
 * Regards,
 * François
 *  [Fernando a11n](https://wordpress.org/support/users/fhaps/)
 * (@fhaps)
 * Automattic Happiness Engineer
 * [7 years, 9 months ago](https://wordpress.org/support/topic/how-to-customize-the-woocommerce-template-structure/#post-10484921)
 * [@fbarret](https://wordpress.org/support/users/fbarret/) For situations like 
   this, I would recommend you use this handy little plugin called Real-Time Find
   and Replace:
 * [https://wordpress.org/plugins/real-time-find-and-replace/](https://wordpress.org/plugins/real-time-find-and-replace/)
 * How this works is that the plugin will do a search and replace after the HTML
   has been rendered, which means that you can search for `<div id="primary" class
   ="content-area"><main id="main" class="site-main" role="main">` and replace with`
   <div id="primary"><main id="main">`, for example.
 * That would save you the hassle of writing template files for smaller tweaks.
 * I hope that helps!
 *  Thread Starter [fbarret](https://wordpress.org/support/users/fbarret/)
 * (@fbarret)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/how-to-customize-the-woocommerce-template-structure/#post-10485416)
 * Hello Fernando,
 * Thank you very much for that information. The plugin seems very interesting and
   probably useful in many cases.
 * I’ll try it soonly.
 * Regards.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to customize the WooCommerce template structure’ is closed to new
replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/storefront/4.6.2/screenshot.png)
 * Storefront
 * [Support Threads](https://wordpress.org/support/theme/storefront/)
 * [Active Topics](https://wordpress.org/support/theme/storefront/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/storefront/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/storefront/reviews/)

## Tags

 * [change](https://wordpress.org/support/topic-tag/change/)
 * [changing](https://wordpress.org/support/topic-tag/changing/)
 * [functions](https://wordpress.org/support/topic-tag/functions/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [Modify](https://wordpress.org/support/topic-tag/modify/)
 * [structure](https://wordpress.org/support/topic-tag/structure/)
 * [template](https://wordpress.org/support/topic-tag/template/)

 * 4 replies
 * 3 participants
 * Last reply from: [fbarret](https://wordpress.org/support/users/fbarret/)
 * Last activity: [7 years, 9 months ago](https://wordpress.org/support/topic/how-to-customize-the-woocommerce-template-structure/#post-10485416)
 * Status: resolved