WooCommerce reviews + tutorials

To override WooCommerce template files in your theme (or better yet, child theme) simply make a folder named ‘woocommerce’ within your theme directory, and then create the folders/template file you wish to override within it.

Example

As an example, lets override the price template for the single product page to add a notice. First we locate the template file in question at: woocommerce/templates/single-product/price.php (see the full list of templates).

Next, copy price.php to the following location: yourtheme/woocommerce/single-product/price.php. Open the file up and make whatever changes you require; here we will add a notice about the price:

<?php

/**
 * Single Product Price
 */

global $post, $product;

?>
<p itemprop="price" class="price"><?php echo $product->get_price_html(); ?></p>
<p>Notice: price shown excludes tax and shipping.</p>

Easy right? Using this simple technique you can override a vast amount of the WooCommerce frontend UI, as well as the HTML emails, in a reasonably upgrade-safe manner.

Published by Justin Stern

Justin is one of our co-founders, and is our resident overengineer. He likes to write developer tutorials and make black magic happen in our plugins. He thinks that writing code is a lot easier than writing words.

133 Comments

  1. overriding the templates are not working, any help or tips to let it work? im using the whitelight-commerce and copied the template from wp-plugin

    • What does the path to your overridden template file look like? Do you have it within whitelight-commerce/woocommerce/file.php?

      • folder: whitelight-commerce/woocommerce/templates/single-product/price.php

        i tried to edit it to test if it overwrites the template use but i think its not working…huhuhu…any idea on this problem?

        • Ok, try putting your file here:

          whitelight-commerce/woocommerce/single-product/price.php

          (Notice I removed the ‘templates’ directory from your path). If you do this, it should work!

  2. Thanks for en easy understanding text 🙂

    I wonder if you can help me – I wan’t to put a sidebar in my shop, but I have no idea how to. On my other pages I can choose a specific template, but in the WooCommerce-pages I can’t find out where to choose another template or what to edit in the template files to get the sidebar shown.

    Really really hope you can help me.

    http://okosamfund.dk/butik/

    Sincerelly

    Linda

    • Hey Linda, well I guess it all depends on your particular theme. With the current theme for this site for instance, Wootique by WooCommerce, there’s a general layout option which I selected with a right-hand sidebar, which did the trick for me. Then additionally the layout can be specified for any given product. If this isn’t the case with your theme then I imagine you’d need to customize your theme, or create a child theme with calls to get_sidebar() in the appropriate places, as described in this article http://codex.wordpress.org/Customizing_Your_Sidebar#Different_Sidebars_Anyone.3F Sorry I can’t be of more help

  3. No, it does not seem to be theme-specific, since it is only the woocommerce-pages, that I can’t choose another template. Or actually I can choose another, but it wan’t be shown. It is like WooCommerce overrule my themes template 🙁

    But thanks for answering 🙂

  4. Hi Justin, Can you help me please. I am using the Whitelight theme and need to make 2 changes. 1. I want to remove blue block in the featured slider (and or change the colour if that is possible) 2. I want the additional pages to have featured images in the header. I have loaded the images as featured images but they do not view on the pages. I was told that I need to do some php coding for that to happen. I am a new designer so as much details as possible will be appreciated! 🙂

    • Hey Laeni, if you’re not particularly familiar with PHP coding than this will be a challenge for you. It’s not something that I can really explain how to do over over comments I’m afraid, and it will most likely require some custom code. Removing a page element (blue block) should be fairly easy at least, I’d recommend creating a child theme and identifying the theme template file with the element you want to change, and remove it from the child. Or simply add some custom css to change the color. Putting featured images in the header will probably be a bit difficult, if as I said you’re not familiar with PHP coding. If you are, then you’ll want to either identify an action that you can hook into and inject the featured images into the page, or identify the theme or WooCommerce template file that will contain the images and modify it in your child theme to render them. Sorry I can’t be more specific, but I hope this helps.

  5. Hi Justin,

    Thanks for this article. Would it be easy to override some woocommerce widgets?

    I have tried the above but it’s not working, so I am guessing something else must be done…

    Otherwise, do you think it’s ok to update Woocommerce manually, by overriding the old files — while the plugin is still enabled? This is in case I cannot find an easy way to override those widgets, and would have to tweak inside the plugin directly — as I’d want it to survive an upgrade.
    It would be very unpractical to disable the Woocommerce plugin on a live site.

    A tutorial on the subject would be much appreciated!

    Thanks again

    • Hey Louis, I don’t think you can necessarily “override” a widget. Not that I’ve tried, but my guess is that you’d basically want to take the existing widget code and duplicate it, creating your own custom widget, and then make any modifications you need. You can certainly update WooCommerce on a live site, but I never recommend changing core WooCommerce plugin files as your changes will be lost next time you update, and it will become very difficult to manage. Depending on what you’re trying to accomplish it will be much better to: duplicate a widget and modify the copy, override a template file as explained above, make modifications to your theme’s functions.php, or create a full custom plugin for your shop. Hope this helps

  6. Hi Justin, thanks for your reply!

    I really like your website and the information you give out, in regards to Woocommerce.

    Yes, what I was trying to achieve does not work with widgets — I think the right word to use was “plug-able”, and widgets aren’t… So simply copying + tweaking them somewhere won’t do anything.

    I know what you mean and I agree, it’s just that I am not a php “guy” — as far as php is concerned, I am very good at copying and pasting + following very detailed in instructions — that’s a skill!!!

    Ok, I can also alter things here and there when it makes sense… I have already tried what you suggested but without success, that’s why I asked — I am THAT bad — think Michael Jackson 😛

    No worries, I am asking to much for the money & I know it! lolol

    Otherwise, I asked the great Jay@Woo if it was SAFE to upgrade/update Woocommerce manually — WITHOUT disabling the plugin — he replied YES.

    Since what I want to do is pretty simple, it sounds like I have another option — right? i.e; When an update comes out, I can copy everything over — except the widgets… Of course, I would also have a look inside the widgets to see if something was changed. Does that sound good to you?

    Further, I came across the following and it seems to work, what do you say:

    http://wordpress.org/support/topic/possible-to-overwrite-a-woocommerce-widget ?

    Thanks again Justin — in your own time (I can’t wait £$@%£^) lol 😉

    • Hey Louis, well you can certainly use the method of migrating code changes as new versions of WooCommerce comes out, but I will caution again that it will become very difficult to manage, you’ll have to be highly organized and careful about it. I still think that you could copy the widget that you want to modify, make your modifications, and then register it as a new custom widget, that way you wouldn’t be altering core code, and things would be much more stable with regards to updating WooCommerce. Make sense? Perhaps when I have some free time I’ll look into this and write an article covering it

      • I understand Mike, and I agree. Thank you. Did you get a chance to the check the link I provided above — were you referring to it when you advised to be cautious?

        • Hey Louis, just took a look at that link (hadn’t had a chance before); the approach they’re describing sounds like a very safe and good approach, as it avoids editing any core files. It’s more or less what I was thinking, but with more details. I think you should be fine using that method.

  7. Sorry, Justin (was just sending Mike a long email — apologies) — it’s late (as you can see…) 😛 My bad.

  8. Hi Justin! I’m working on a new ecommerce site that’s gonna sell t-shirts! I installed WooCommerce on it and i like the plugin! The only thing i don’t understand is how to get the “theme” look on the single-product page. Any opinions on this? Can you help me fix that page?

    Best regards,
    Albin

    • Hey Albin, congratulations on starting your new ecommerce site, that’s very exciting, and I hope you find lots of success. Glad to hear you’re liking WooCommerce so far, I have to tell you it’s improved so much even since I started using it, it’s amazing, and I know it’s just going to keep getting better. Now what problem are you having with your product pages? Your theme isn’t being applied to them? Certainly as long as you’re using a WooCommerce-compatible theme this should not be an issue. For instance if you’re using a WooCommerce theme from WooCommerce, or maybe one of the compatible frameworks like Genesis along with their WC plugin. Even a theme that isn’t designed for WC, take Twenty-Eleven, for example, really should look pretty good out of the box, because of the way WooCommerce is designed. Do you have a link to an example page?

      • Hey! This is My archive Page that i Made with the product categories shortcode: http://shirtstar.se/for-honom/ it looks as it should.

        But when i’m Trying to view a single product it looks like this: http://shirtstar.se/produkt/test/

        Whats wrong?

        Best regards, Albin

        • I took a quick look at your pages, I see what you mean, but there’s no real practical way for me to determine what the issue is, I’m afraid. The page source looks ok, and the CSS seems to be loading just fine. I’d recommend getting in touch perhaps with YOOtheme I think it is, and asking whether they would be willing to add support for WooCommerce. Or, contract with a developer to figure out a way to add support and fix the styling. Sorry I don’t have an easier answer for you, best of luck

          • Hi Justin!

            I’ve tried the getshopped.org e-commerce plugin and when i use it i am able to move files from the plugin folder to the theme folder with just one click in the shopadmin panel, the single product pages is loading great with the theme and also every other pages! But with woocommerce it isnt working. That is strange to me to understand!

            Maybe this is working with move some files fr.o.m. The woocommerce plugin folder to the theme folder?

            When i use shortcodes with woocommerce it is Working fine. Maybe because i create a new page for each product category then just paste the shortcode for woocommerce product category?

            This is what My shop page looks like: http://shirtstar.se/butik/ found the same issue here that the theme isnt loading correctly.

            Any ideas? Need help.

            /Albin

          • Hey Albin, WP-eCommerce is of course a completely different plugin, so it will behave entirely different from WooCommerce. I don’t have much experience with it myself, but I know it’s also quite popular, so I’m sure it would be a fine choice as well if it works better for you. I’m afraid there’s just not a whole lot that I can do to help given that I’ve never used that DownTown theme.

  9. I need to format the order and invoice mails I get from my woocommerce site like add a logo and change the colour of the header/footer.

    How can I safely do this please.

    Thanks.

  10. I finally tried it, thanks it works great.

  11. Hi, Thanks for this info-I did this for my content_product_cat.php file and it worked great!

    However, I am trying to do the same for my woocommerce.css file and its not exactly working.

    I am using a child theme.

    I was thinking if I moved it to my themes folder my store would look the same since it is essentially calling on the same file BUT it actually messes everything up.

    I tried:

    mychildtheme/woocommerce/assets/css/woocommerce.css

    mychildtheme/woocommerce/css/woocommerce.css

    mychildtheme/woocommerce.css

    but they all make it look the same (not the way it does when calling on the actual woocommerce folder file)? I also unchecked Enable WooCommerce CSS styles as that was the only way I could get it to view the woocommerce.css file in my themes folder.

    Both files are the exact same as I copied it so why does it look different?

    • Tough to say, Emily. If you created a child theme, I’d suggest to try creating mychildtheme/style.css and put your custom styles in there

  12. I want add a div for styling rating option list in in single-product-reviews.php file.This file is in my wordpresswp-contentthemesMy_themewoocommerce.

    I add a class name “style_rating”:

    if ( get_option(‘woocommerce_enable_review_rating’) == ‘yes’ ) {

    $comment_form[‘comment_field’] = ” . __(‘Rating’, ‘woocommerce’) .’

    ‘.__(‘Rate…’, ‘woocommerce’).’

    ‘.__(‘Perfect’, ‘woocommerce’).’

    ‘.__(‘Good’, ‘woocommerce’).’

    ‘.__(‘Average’, ‘woocommerce’).’

    ‘.__(‘Not that bad’, ‘woocommerce’).’

    ‘.__(‘Very Poor’, ‘woocommerce’).’

    ‘;

    }

    In html firebug result this:

    Rating

    Rate…

    Perfect

    Good

    Average

    Not that bad

    Very Poor

    Why result this ? I,m not programer. I simply want styling some div. How to

    do this correctly ?

  13. Hi Justin. I am looking at changing my shop layout a little. I am using the ‘Sliding’ theme with woocommerce.

    http://www.madelovinglymade.com/ihs/?product=fifth-anniversary-personalised-wood-pendant

    As you can see from the website link i have managed to decrease the width of the product summary as well as the woocommerce tabs.

    I want to be able to show the up sell and cross ell product next to the tabs on the right hand side, however i cannot find where to change the location of these items.

    Regards

    Chris

    • Hey Chris, the upsell and related products are actually hooked onto the ‘woocommerce_after_single_product_summary’ action found in the content-single-product.php template. I think you’d probably want to move those items over to the right using some CSS, but since I don’t see them in that example page you posted, I’m not exactly sure. But that’s where I would try and start: the CSS

  14. I need the User logged only able to view prices, if not logged in WordPress, it can not have access to prices and not be able to add products to be unable to see prices.

    how to solve this in woocommerce?

  15. Hey Justin … maybe you can help me. Using Woocommerce with Twenty Eleven and when viewing full site the number of products per page for example is 6. If viewing in mobile (iPhone and Android) the number of products per page is limited to 5 and also pagination kicks in via a big NEXT button. Do you know if there is some way to change the number of products to 4 for mobile or increase to a higher number?

    • ha, interesting question, I don’t have any experience really with messing around with the mobile version. Did you ever figure this out?

  16. Hey great article!

    I’m trying to change a class inside of woocommerce using the theming system. is this possible? I’ve created a woocommerce/classes/class-wc-product.php file but I don’t see the change on my website

    • Hey Jemiah, thanks for the question. No, you really can’t replace a class wholesale; well at least not using the theming system, and not with WC 1.6. You must avail yourself of the actions and filters WooCommerce (and WordPress) provides and the themes and pluggable functions at your disposal and work your functionality in that way. However, something conceptually similar to this may be possible with the upcoming WooCommerce 2.0. At least for the product class.

  17. hello!

    i noticed that last year someone posted a question concerning the removal of a blue box from the whitelight slider…

    you mentioned to create a child stylesheet…but this doesn’t seem to be working for me.

    the blue box is originally meant to hold the ‘title and description’ of the featured image…however, even when you don’t have a title and description for a pic, the blue box somehow remains…?

    if anyone can help me out on this…well…that would be awesome! i have been trying to figure it out now for hours.

  18. Hello, do you happen to know if you can override a style in /assets/css/fancybox.css?

    • Yup, it can definitely be done using the standard CSS specificity rules. This is outside the scope of this blog post, but you can find the precise (if perhaps a bit tricky to follow) rules here: Calculating a selector’s specificity. Briefly, overriding a style is easier if you can have your style appear after the one you’re trying override, but you can always write a more specific rule when this is not possible/easy. Refer to that w3.org article for the full set of specificity rules, but the general idea is the more selectors the more specific, and selecting by id is more specific than selecting by class, which is more specific than selecting by tag. Hope this helps!

      • Thanks Justin, the latest version of WooCommerce uses a different script for the light boxes, which I was able to solve my problem with.

  19. Hi Justin,

    Thank you for sharing. I tried to use woocommerce with Ari Theme http://ari.elmastudio.de/. So far I managed to override the single product page, but the shop/catalog is still messy. You can see it here: http://www.wakafproject.com/shop/. If possible, I would like to put the query/all shop item (or whatever it is, :() in the default theme container, like the single product here: http://www.wakafproject.com/shop/wakaf-bangunan/ so it will remain responsive. I tried copy and edit loop-shop.php into theme/woocommerce/loop-shop.php but nothing happen.

    Please help. Thanks in advance!!

  20. Hi Justin,

    Can you help me please.

    I´ve been trying to customize the woocommerce shop page (or archive page) to have it blank and put my own stuff in there.

    I put the following code (among others) in my functions.php:

    /** Pagination in loop-shop */

    remove_action( ‘woocommerce_pagination’, ‘woocommerce_pagination’, 10 );

    remove_action( ‘woocommerce_pagination’, ‘woocommerce_catalog_ordering’, 20 );

    /** Remove Shop Products Loop Description */

    remove_action( ‘woocommerce_before_shop_loop_item_title’, ‘woocommerce_template_loop_product_thumbnail’, 10 );

    remove_action( ‘woocommerce_after_shop_loop_item_title’, ‘woocommerce_template_loop_price’, 10 );

    ====

    It removed everything from woocommerce but ONE product title. This one sticked and I´ve tried all I could as a noob, but couldn´t figure out how to get rid of it yet!

    Here´s a screenshot of the dilemma:

    http://i.imgur.com/m8LXa7A.jpg

    Any help would be highly appreciated 🙂

    • Tough to say 100% without a link, but maybe that’s the the_title() call in the content-product.php template? Try overriding that template file and ripping out whatever you don’t want

  21. Hi Justin,

    I’m wondering if it’s possible to replace a product category page but just ONE category’s page, not all categories. I get that if I override the archive-product.php file it will make those changes to all category pages, but I need to enter some text at the top of just one category page and I’m wondering about the easiest way to do this. I know in WordPress themes this would be accomplished by creating archive-product-[insert category name].php but I’m not sure if that works in this case.

    Thanks so much for your help!

    Best,

    Janelle

    • Hey Janelle, yeah as far as I know you can not use the archive-product-[category name].php technique with woocommerce. You can of course use the Category Description field found under Products > Categories > Your Category. If that doesn’t do the trick, you can of course override the main archive-product.php template and conditionally add your text based on the current category slug which you can get via get_query_var( 'product_cat' ). Hope this helps

  22. Hi Justin, thank you for the article, I’ve been testing it and can manage for now. But I cant find out how to style a product according to its category CSS. I managed to make the category CSS specific, but when it goes down to the product, its the generic one. I’ve tried all sorts of things and I cant figure it out. Any ideas?

    Thanks!

    PS: This is is the site, if you want to check what I mean: regalosoutletonline.com

  23. Hey just wanted to give you a quick heads up and let you know
    a few of the pictures aren’t loading correctly. I’m not sure why but
    I think its a linking issue. I’ve tried it in two different browsers and both show the same outcome.

    • Which images aren’t loading correctly? We had a few glitches when we migrated hosts, but everything should be fixed up now 🙂

  24. Hello
    thanks for the nice article, it helps me to get few things sorted out…

    one issue for me is. how to add a custom field in checkout form for billing and shipping.
    e.g. i wanted to add third input box for address after address1 and address2 on billing and shipping both forms.
    i can hook the code (as per woocommerce) into my themes function.php file, it appears on the form but at end of form, not showing where i wanted to show it.
    here is the output screenshot, i hope you let me know how to order the custom fields in woocommerce

    http://postimg.org/image/wl7i67an7/

    thanks again
    Umar

    • Hey Umar, there is a woocommerce_billing_fields filter that you could give a try, though this stuff is kind of tricky. Probably the easiest thing would be to give the WooCommerce Checkout Field Editor plugin a try; I’m pretty sure this should do the trick for you

  25. Quick question: do you know how to display a custom field from the product (not the order) into the woocommerce e-mails?

    My products have a “date of arrival” custom field, that is a hidden custom field of each product (hotels) and manually entered by the admin. The idea is that when the order confirmation e-mail is sent, the customer receives his order info, along with a line stating “date of arrival: 17th july”, pulling the value from the custom field.

    I know how to display a custom field on a page via get_the_meta but how can i get the data from a specific product ID (bound to the confirmation e-mail) and display it in the e-mail?

    • Hey Simon, you can try get_post_meta( $product->id, 'date of arrival', true ); which is similar to get_the_meta() but lets you specify the post.

      Cool to hear that you’re doing this, we’re actually building a plugin at the moment to let store admins create order/product fields that they can easily configure from the order admin, with text boxes, checkbox/radio buttons, dropdown selects, calendar widgets, etc. Lets you display those fields in the order list table, search by them, sort by them, display them in emails and the frontend, etc. Should be a great fit for anyone else with a business process similar to yours.

  26. Hello Justin!
    I want to edit the checkout page and modify the state/country field, it currently displays a dropdown(for shipping and billing both) and I want to change it into a simple text field, could you please help me out? I’m a noob with wordpress, just installed a couple of days ago, no idea how to do it, please guide me in detail if you can. Thanks!

    Have a look at the image for a better Idea: https://dl.dropboxusercontent.com/u/49122395/checkout001.PNG

  27. (great blog!!)

    I am wondering how to remove the “”posted by [user] on this date | 0 comments”” on the product pages in Woocommerce?

    Not very professional!
    Thanks!

    • Thanks Brenda! I’m not seeing that post content, this could be an issue with your particular theme. Does it happen with Twenty Twelve as well?

  28. hi, justin, thanks for this good article
    now i have somthing trouble, i set the woocommerce’s shop-page as my web’s homepage, and i want to custom the shop page. i want add an articles list behind the products list on the shop page. i couldn’t find the shop-page file…
    can you please tell me how should i do? thank you very much!

    • Hey vincent, well the shop page is a little bit tricky to work with, it’s true. The shop page itself can be found under WordPress > Pages and is named Shop by default, it gets added automatically when you install WooCommerce. The actual page to be used is configured and selected under WooCommerce > Settings > Pages > Page Setup – Shop Base Page. You should be able to go to Appearance > Themes and Customize your theme, and select the Shop page as your Static Front Page. The Shop page acts as a Product Archive page and the template for it can be found at woocommerce/templates/archive-product.php though it requires some programming knowledge to work with. Again, like I said, fairly tricky stuff!

  29. any idea how to have seperate templates from various products?

    • Hmm, this would probably require a fair amount of custom coding to load different templates based on the product being requested.

  30. Hi

    I’ve bin trying to get the transaction id showing up on both the thankyou.php page and in the email to the customer. I was told to use get_post_meta( $order_id , ‘TRANSACTION_ID’, true); but it does not show any number at all ?

    All the best
    Carsten

    • If you’re looking for the transaction ID from the payment gateway, you’ll have to look at what meta key it’s using to store it and then use `get_post_meta()` with that meta key.

  31. Hi,

    just a little “offtopic” regarding to woocommerce email templates:

    My woocommerce emails (invoices, etc…) are going out, but it seems that all the css is stripped out by gmail and outlook.

    Is it possible?

    Basically whatever css i use (either inline or in <!—->) has no effect whatsoever.

    Maybe someone here knows what’s going on with it.

    Cheers and thanks in advance.

  32. Thank you for the article and your help with all the comments questions!

    I have another one: how do you override extension template files? For instance, I have the product addons extension with its own folder in plugins, on the same level as woocommerce. I want to make some changes to the addon-start.php in a safe manner.

    I cant get the file to overwrite from my theme, no matter how I set it up. I tried putting addon-start.php in the woocommerce folder in my theme and tried putting it in its own woocommerce-product-addons page, both at the root and in templates/addons. No dice

    Am I missing something, or can plugin template files not be overriden?

    • Hey Noah, thanks for the question. You definitely should be able to override the template files from this particular plugin. If you want to modify addon-start.php try copying it to this exact location: your-theme/woocommerce/addons/addon-start.php. Doing this *should* allow you to override and modify the template 🙂

      • Hi justin,I am trying to edit the shop page of woocommerce and add some banners above and below the products but i can’t find the file for editing the shop page.can you tell me which file needs to be edited for this?

        • Well, the shop page (as well as the catalog pages) are rendered by woocommerce/templates/archive-product.php so you could certainly override this template file. A less drastic way would be to hook into the woocommerce_before_shop_loop and woocommerce_after_shop_loop actions, which you could do from your theme’s functions.php. Don’t forget that if you want this *only* on the shop and not the catalog pages, to check for is_page( woocommerce_get_page_id( 'shop' ) ) being true. Hope this helps!

      • Thanks for your response!

        Im confused; does creating a ‘woocommerce’ folder in my theme directory create an override for the ‘woocommerce/templates/’ folder in the plugins directory?

        I still cannot override the product addon extension. Did you mean to say ‘your-theme/woocommerce-product-addons/addons/addon-start.php.’?

        I have ‘mytheme/woocommerce/single-product.php’ successfully overriden, but do I have access to overrides in higher directories?

        What I would really like to override is some admin files in the woocommerce-product-addons – can you suggest a method?

        Thank you so much for your time

        • Hello,

          I’ve this plugin, and it works
          ‘your-theme/woocommerce-product-addons/addons/addon-start.php.’

  33. Hi justin,I am trying to customize plugins\woocommerce\templates\single-product\title.php content via another plugin. how to override that file using another plugin?

  34. HI
    How do I save my woocommerce

  35. Can you upload the woocommerce.css ( that I have made changes to ) to a child theme ? I have tried many way and all have not worked ? I do not want the woocommerce.css to be overwritten when woocommerce is updated as I have my own theme which I have made WooCommerce fit with some css changes etc.

    This is the file structure

    Child Folder

    /www/www/wp-content/themes/mytheme1-child/woocommerce/assets/css/woocommerce.css

    and also tried

    /www/www/wp-content/themes/mytheme1-child/woocommerce/woocommerce.css

    Parent folder

    /www/www/wp-content/themes/mytheme1/woocommerce/assets/css/woocommerce.css

    I also tried uploading to parent folder and it did not work either ?

    any help would be great to solve this problem

    J

    • Right, you can’t as easily override the stylesheets like you can with the theme templates. If you want to get fancy you could always enqueue the theme’s woocommerce.css from your theme’s functions.php. Alternatively, you can just edit the theme’s style.css, or even create a child theme and put your customizations there

  36. Hello,

    Thanks so much for all this info.
    I would like to know if it is possible to add some custom fields in the single-product page?
    Many thanks
    Pat

  37. Hi thr,

    I need help with woo commerce product appearance.

    1. Thumbnail: after creating a new product thumb show OK but when clicking more info I see second pic 1st.

    2. Zoom: is it possible to add hover to zoom using woo commerce.

    Please help me, I am in big trouble.

  38. Hi,

    I would like to ask you a question about the display of my WooCommerce shotcode [product_ category category].
    I searched the web for an answer but unfortunately I couldn’t find any answer.
    My question:
    How can I delete the scrollbar under these products (http://www.badkamerid.nl/accessoires/) or increase the size of these products so the display of these products are nice and well.

    Thank you very much! I really need some help!

  39. And what about overring the css in the template email?
    I need to change the css for this command:

  40. Hi there,
    Ca you tell me how one can customize/change the color of the ‘x’ which removes an item from your cart as well as the font color for the number in the quantity field on the checkout screen? For some reason it shows up the same as my selected background color and is therefore not visible. Thanks!

    • Hi there, this is going to be different depending on your theme. The fastest way to do this is to use Chrome as your browser, and right-click on the element that you want to change and click “Inspect Element”. You’ll need to find the class / id of the element you’d like to change on the right side of the dev tools window, then adjust the color to whatever you want in your custom.css or child theme. Here’s an example of changing the ‘x’ on the cart page with the default TwentyTwelve theme, though it’s usually easier with a WooCommerce theme.

      .woocommerce #content table.cart a.remove, .woocommerce table.cart a.remove, .woocommerce-page #content table.cart a.remove, .woocommerce-page table.cart a.remove {
      	color: blue;
      }
      
      .woocommerce #content table.cart a.remove:hover, .woocommerce-page #content table.cart a.remove:hover, .woocommerce table.cart a.remove:hover, .woocommerce-page table.cart a.remove:hover {
      	background: blue;
      	color: #ffffff;
      }
      

      Here’s an example doing it with WooTheme’s Peddlar theme:

      table.cart td.product-remove a {
      	color: blue;
      }
      
      table.cart td.product-remove a:hover	{
      	color: #ffffff;
      	background: blue;
      }
      

      Hope that gives you the idea!

  41. What’s the best way to rearrange different sections on the product page? I’m new a newbie in php, but picking it up slowly. I understand the basic concept of hooks and filters, but still unsure how to rearrange the little, price, options, text etc in the product page and what file controls the layout.

    • Hey Jason, glad to hear you’re putting in the time and learning this stuff! It may be slow going at first, but it’ll be worthwhile in the end. So there’s a couple of places you need to look at. There’s a few template files which are used to render the single product page. They include: woocommerce/templates/single-product.php for the overall layout, and then a bunch of files in the directory woocommerce/templates/single-product/ to control the various parts of the product page, namely the price, title, etc.

      If you just need to change content, you can override these files. If you want to change the ordering/layout, you’ll need to look at the file where these page components are hooked together using those actions/filters: woocommerce/includes/wc-template-hooks.php. There you’ll find lines like the following:

      add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

      Which tells you the single product price template is being hooked to the 'woocommerce_single_product_summary' action with a priority of 10. Then you can unhook that action from your theme’s functions.php or custom plugin, and hook it back in to the same action with a different priority, or an entirely new action (one of those from the single-product template files that I referenced above). Hope this gets you started!

  42. Wow this thread got a little hijacked! Great informative info though – nice work from contributors – Thankyou! 😉
    If anyone still talking Woocommerce email templates here, I had a weird one which can’t seem to tackle:

    Styling woocommerce email template links and their states such as hover and visited.

    Example: Styling the content or footer links back to your shop so they are not that awful IBM blue looking like it’s 1994 again.
    Since you cannot style hover, active, visited link states in inline style definitions in the HTML, can’t add raw CSS to email headers, and obviously can’t add php calls into the woocommerce fields for the content, then how do we achieve this?
    Of course the “bull in a china shop” solution is to simply drop the HTML for the link straight into the “email-footer.php” – but I want to ideally retain the client’s ability to edit this content through the provided woocommerce backend text field labeled “Email Footer Text”. That, and it still doesn’t cover hover and visited links.

    I suspect I’m not the only one who’s customised a beautiful email template only to have it marred by 255-level Blue links that near-on give you seizures! 🙂

    Any thoughts on this ?

    • Hey Wilks, glad you stopped by and are finding our site useful! As I’m sure you’re (probably painfully) aware, styling HTML emails is pretty difficult. For what you’re trying to do, I’d think you could use an embedded style block with the relevant rules, within the html email body. Give it a try and let us know 🙂

  43. Hi there… Thanks for the great article. I was wondering how would I move the upsells section above the reviews tab on my single product page. I just can’t seem to find the hooks within single-product.php or content-single-product.php. Here’s an example of a page with upsells set up. Thanks in advance!!

    • I’m not sure of the exact hook to use, but these should get you started. You might have to play with unhooking/rehooking them to achieve the layout you’re wanting 🙂

  44. i have free template Parabola and i wont use woocommerce the company say:

    Is Parabola compatible with WooCommerce?

    Answer:

    and give me three files function,woocommerce and style where i ll put these files?
    thank you!!

  45. Well, seeing as this thread has been hijacked for various hooks, etc: I’m trying to override the class-wc-shortcodes.php file in the plugins/woocommerce/includes directory. I copied it into the woocommerce/includes directory of my new theme, renamed it, made my modifications, and *thought* I’d declared it in my functions. But nothing’s happening. I’ve searched high and low for the proper hooks to use to stop using the core file and instead use the new one.

    fwiw, what I’m trying to do is remove the woocommerce columns-x from the divs so I can make this Bootstrap responsive.

    Thanks in advance.

    • Hey Laura, well the method of overriding template files described in this article can only be used as-is for overriding files found within woocommerce/templates. Anything else is generally possibly, but often requires some additional development/programming knowledge. For this particular case, if you really want to swap in your own full class-wc-shortcodes.php file you could do something like the following: https://gist.github.com/justinstern/e83f91be2d6b1d36c179

      Hope this helps!

  46. hi Justin
    Great article thank you for helping out. i was woundering if this could work with css files rather than php files… i tryed your method but its not working wondering if it should and if you know wnother way of styling css of a plugin without changing core files

    • Hey Daniel, a lot of themes include a custom.css or some other mechanism for modifying CSS in an upgrade-compatible manner, and this is generally the best option if the changes you’re looking to make can be done with styling. Sometimes you do need to change tags/elements, at which point overriding the template becomes the best choice. Depending on what you need, I would give the template override another shot, the main mistake I see most people make is they copy the ‘template’ directory into their theme, when really what you want in your theme is: wp-content/themes/mytheme/woocommerce/single-product.php, etc

    • I’ve been trying this out to get rid of the “woocommerce” classes in the shortcode wrapper. I haven’t been able to get this to work. I’ve taken class-wc-shortcodes.php, edited the file to change the classname and include my override, and placed it into my woocommerce folder (the override one) in my theme. I’ve placed this in functions.php:

      add_action( ‘woocommerce_loaded’, ‘use_custom_wc_shortcodes’ );

      function use_custom_wc_shortcodes() {
      // load our custom shortcodes class
      include_once( get_template_directory() . ‘/woocommerce/class-wc-shortcodes.php’ );
      // unhook the standard woocommerce one
      remove_action( ‘init’, array( ‘WC_Shortcodes’, ‘init’ ) );
      // hook in ours
      add_action( ‘init’, array( ‘WC_Custom_Shortcodes’, ‘init’ ) );
      }

      No dice :-/

  47. I’m having trouble overriding the template files for a woocommerce add-on. I am able to override everything else in woo via my woo-folder, but when I create the “addons” folder and copy in the template files from the plugin nothing changes.

    I tried moving the contents of the addons folder out to the woocommerce folder but still nothing…

    Any ideas?

    Thanks a bunch!

    • Hey Nate, not all plugins support template file overrides I’m afraid. I would suggest getting in touch with the developer of the plugin in question and ask whether this is something they support, or would be willing to add.

  48. Justin,

    I’m doing my first e-commerce site for a client and am learning about hooks, etc. I was successful in overriding content-product.php to my child theme (so I know overrides are working), but wanted to make a field addition (sku or product ID) on the shop page so started with wc-template-hooks.php which resides in the includes folder. I can’t get it to work if I put it under an includes folder or not. Any ideas?

  49. Hi there,
    I hope you can help me!!! I am going crazy about a small change i want to make.
    I want the add to cart button under my description on the single_product_page.
    The thing i tried:
    put this in the function.php
    /** to change the position of excerpt **/
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );
    add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 51 );

    Doesn’t work.

    And why are here only remove actions?:
    // Single product summary
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5);
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10);
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_rating’, 10);
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20);
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30);
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40);
    remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50);

    Would this suggest that they will not appear on my site? Because i can’t see add actions!

    By the way if i use the code in a snippetplugin i can it adds another add_to_cart button but not deleting the first and changing the order.

    AAAAAAAAAAAAAGGGGGGGGHHHHHHHHHHHH

    I hope i made it a little bit clear. Can you help me.

    THNX

    • Arrghhh indeed… I am trying to do the same thing to no avail. Were you able to find a soluton? And who wants an ‘add to cart’ button hidden under descriptions?

      I can change the core includes/blah.php files to make the changes but this approach is not sutainable, but I cannot overload them using my child theme. Yea, argh.

  50. Hi justin..

    can you help me how to override this file? class-wc-gateway-bacs.php in woocommerce/includes/gateways/bacs/. I’d tried to add this path into my woocommerce childtheme but no luck.

    • Hey mosak, you can only override templates (files in woocommerce/templates/), so you won’t be able to override this. You can make changes by hooking into the actions / filters for that file instead.

  51. thanks beka,
    I finally found a solution for this. thanks..

  52. Hi there,
    I’d like have, in the single product page, the description on the left and the images on the right.
    Which file should I change?

    Thanks

    • Hey there, this is going to depend on the way your theme handles the product page, so it would depend on the theme’s product page template.

  53. Hi,
    I have been trying to work out how to have the category description appear on every page (of the product archive) I have 5 pages and the description only appears on page 1
    Thanks
    Vix

  54. Hi Justin and Beka

    I have a question:
    Is it possible to show the first product add-on price on product-archive pages?
    I’m tweaking the plugin “product add-ons”, so i’ve set the regular price to 0, and in functions not showing price, so it doesn’t say “free”. Now as explained I need the first add-on price to show.

    I can’t figure out the filter to put in in functions.php.

    Can you help?

    Looking forward to your answer.
    Best regards,
    Mads

  55. Hi Justin, wondered if you could help me? I’m trying to add text in wootique theme (click image to enlarge). Text needs to be below featured image for each product and above the description/reviews tabs. Can not seem to get it to work. Any help would be awesome.
    Thanks so much and LOVE your tutorials.

    • Hey Julie, not sure if this would work with your theme but you can give it a try:

      function skyverge_add_image_text() {
      	echo '<h3 style="text-align:center;margin-top:10px;">Click to enlarge.</h3>';
      }
      add_action( 'woocommerce_product_thumbnails' , 'skyverge_add_image_text', 9 );
      
  56. Hi,

    I have been looking for this for hours and there doesnt seem to be a solution to a seemingly simple issue.

    How would you create a second product category description box within the product category description editor?

    The second description box would be so you could add lots of text below the products for seo purposes.

    This has to be possible>!>>!>!

    Thanks

    • Hey John, almost anything is possible 🙂

      However, this would require a fair bit of custom code – you’d have to add the box for the description, add a snippet to save it/handle edits, then another to output it on the category page. Certainly doable, but not a simple issue.

  57. Hey Justin Stern I am new in wordpress first time i use woocommerce , i just installed WooCommerce – excelling eCommerce and set in admin pannel now i want customize in to my theme so i follow http://www.mizpress.com/how-to-make-wordpress-theme-woocommerce-compatible/ for compitable. now i want to intigrate my product page code to plugins so create one folder name woocommerce where i put 2 file i.e : content-widget-product.php and single-product.php now i change the code as

    <a href="id ) ); ?>” title=”get_title() ); ?>”>
    get_image(); ?>

    <a href="”>get_title(); ?>

    Select Options
    get_rating_html(); ?>
    get_price_html(); ?>

    to content-widget.php but product page not change , plz help

  58. Hi Justin,

    How can i edit the copy of new order email, for example when customer placed and order now is:
    “Your order has been received and is now being processed. Your order details are shown below for your reference”
    I would like to replace this with my copy.

    Please help

    Kind Regards

    Soufiane

  59. Hi justin,

    I want to remove link from product page whick takes to single product description page, how to make changes?

  60. Hello Buddies

    Am new to wocommerce i need reviews tab to show separate area like above the footer section now its loading in product summary area. I need to fetch only product tab into new location in single product page. Can anyone help me?

  61. My project directory is themes/web. How can i override my templates.
    I made woocommerce.php . but i want to override on sale, latest updates, cart etc.
    & How can i give link on my cart button i.e in my header.

  62. Hi Justin,

    I have one doubt in Woo commerce order mail..
    is it possible to have the last 4 digits of the credit card number that is used shown on the order mail receipt? if possible means how?

  63. Hi guys,

    Thank you for all the great articles.
    I’m wondering if it’s possible to show a specific image only IF my product doesn’t have any images uploaded.
    I’m working with 12k products and it’s going to take a while before I have all the pics.

    Thanks a bunch,
    T.

  64. Hi Beka! Thanks a lot! I tried the plug-in, and it works very nice, adding a placeholder for the product page, but I’m trying to add it for the shop page as well. Basically everywhere. Not having a placeholder image shows my products as a list.

    Thank you again, I appreciate your quick response.

    • Hey Theo, the plugin does add the placeholder to both the shop and product page, so I’m guessing there’s something else going on in your theme here to prevent this that I’d ask the theme author about.

Hmm, looks like this article is over 2 years old! Its content may be outdated, so comments are now closed.