1. Welcome to the Upload WP Community Forums!  This is the best place to get premium WordPress and WooCommerce support.  Please take a look around and join the Upload WP Community for FREE today!

Front-End Code Snippets to Customize WooCommerce

Discussion in 'General WooCommerce Discussion' started by TeddyTriton, Jan 17, 2014.

  1. TeddyTriton

    TeddyTriton Administrator Staff Member

    This is the place to share front-end code snippets that have been tested and work in customizing WooCommerce. We'll start with the snippet below which allows you to change the, "Shop" page title to whatever you'd like. Simply copy the code below and paste it in functions.php of your Child theme...

    PHP:
    add_filter'woocommerce_page_title''woo_shop_page_title');

    function 
    woo_shop_page_title$page_title ) {

        if( 
    'Shop' == $page_title) {
            return 
    "Product Catalog";
        }
    }
    How to Change the WooCommerce SHOP page Title



    For more incredibly helpful snippets to customize WooCom make sure check out...

    25 Best WooCommerce Snippets for WordPress

    and...

    25 Best WooCommerce Snippets for WordPress part 2

    Please feel free to share your favorite front-end snippets with us below...
  2. TeddyTriton

    TeddyTriton Administrator Staff Member

    Here's how to change the labels of the product data tabs on the WooCommerce single product pages / product detail pages. Copy and paste the PHP snippet below into the Theme Functions (functions.php) of your child theme.

    PHP:
     add_filter'woocommerce_product_tabs''woo_rename_tabs'98 );
    function 
    woo_rename_tabs$tabs ) {
    $tabs['description']['title'] = __'About This T-Shirt' ); // Rename the description tab
    $tabs['reviews']['title'] = __'Customer Feedback' ); // Rename the reviews tab
    $tabs['additional_information']['title'] = __'Details' ); // Rename the additional information tab
    return $tabs;

    [​IMG]

    Watch the video below to see how easy it is to Change the Labels of each product data tab to anything you want...



    Maybe you want to remove the Additional Information tab. Simply copy/paste the snippet below into functions.php of your child theme...

    PHP:
    add_filter'woocommerce_product_tabs''woo_remove_product_tabs'98 );
    function 
    woo_remove_product_tabs$tabs ) {
    unset( 
    $tabs['additional_information'] ); // Remove the additional information tab
    return $tabs;
    }
  3. jmaharry

    jmaharry New Member Updated Profile

    I could not get this to world.
    My shop page is stuck on "Products"
    Have tried many things. Need to change to "Online Ordering Menu"
    Help!
    Site: air-gourmet.com
  4. Savidge4

    Savidge4 Upload WP Superstar

    Hey there jmaharry,

    Welcome to Upload WP! Before we get you a solution, I went out on your page. Nice and clean, really like the over all design! Good Job!

    There is I think an easy fix for YOUR situation. You have already created a custom "shop" page so the wording in the fix that Teddy left would not work. If you try:

    Code:
    add_filter( 'woocommerce_page_title', 'woo_shop_page_title');
    
    function woo_shop_page_title( $page_title ) {
    
        if( 'order-online-2' == $page_title) {
            return "Online Ordering Menu";
        }
    } 
    If that still is not working, you could simply pull "Products" out with:
    Code:
    .category-title {
        display: none !important;
    }
    Obviously this is not an ideal solution. However, given the title and nature of your products, you could easily get away with it. Seeing that you have already done the same on the other pages, it would add to the sites overall aesthetic!

    Hope that Helps!


  5. jmaharry

    jmaharry New Member Updated Profile

    Hey, thanks so much for these suggestions. The CSS snippet does just what you indicated — not bad, however, I do want to keep those headers intact, ‘cause the Category Titles add some good navigation.

    The function snippet you kindly included does not have any effect on on the “Products.”

    I’ve tried many things to fix this, guess it’s a “function” of being a relative newbie.

    Any other ideas?

    Also, for some reason my bread crumbs on the shop and product pages are not working. Any ideas why?
    JM
  6. Savidge4

    Savidge4 Upload WP Superstar

    This might be the more than easy answer to your dilemma... Use the "Shop" page instead of the custom "online-order-2" page. That way you could use the original above code ( Teddy's ) to change the "Shop" to "Online Ordering Menu". I am going to bet the breadcrumbs would be there and everything would be happy happy!

    Hope that Helps!


  7. Nick

    Nick New Member Updated Profile

    Hi There,

    Some great snippets here! Very useful.
    I was wondering if you would be able to help me in trying to edit some titles within the woocommerce system. Hoping there is a snippet that can do the job!

    I am trying to change the Billing Address and Shipping Address titles site wide - I have currently tried using edited child files to override woocommerce main files but this doesn't seem to be doing the trick, certainly not achieve this site wide as the titles are being pulled in / functions used differently on within different files.

    This is a build for a client, and they have requested that the Billing Address title read as Purchaser and the Shipping Address title read as Delivery Address. Would you be able to help me in achieving this? Any ideas?

    Many Thanks!
  8. TeddyTriton

    TeddyTriton Administrator Staff Member

    Hi Nick - Thanks for joining the Upload WP Forums. Have you looked into using the WooCommerce Checkout Manager extension? It's been a while since I've used it but I think it will allow you to change the Billing Address and Shipping Address titles. You can learn more about it here... http://uploadwp.com/11-amazing-extensions-for-woocommerce/

    If that doesn't help, then checkout our tutorial on Customizing the WooCommerce Checkout page here... http://uploadwp.com/customizing-the-woocommerce-checkout-page/
  9. Nick

    Nick New Member Updated Profile

    Hi!

    Thanks for the response.
    I have already included the WooCommerce Checkout Manager plugin, which does allow me to change/edit the labels or checkout form fields, but not the titles it seems. Which would be great if it did!

    Yesterday I found your page on customising the checkout page (It is then why I joined the forum!) and have implemented and tested using your methods on that page, but sadly I have only managed to change the titles on the actual checkout page, not site wide where the titles appear (second checkout page or 'order review' and within emails that get sent out etc)

    I have chatted to a couple people and no one seems to have a solid way of changing them..
  10. Savidge4

    Savidge4 Upload WP Superstar

    *** I want to preface the below answer as not a solution for your average WordPress user. This solution is given with the presumption that it is a fellow site designer requesting the information, and understands the pit falls of the solution. Under normal circumstances I in NO WAY suggest editing plug-in files directly! ***

    Nick,

    Welcome to Upload WP!

    I want to start off with thanking you for reading and watching the tutorials on this site. I also want to thank you for thinking well maybe this is a place you can get an answer!

    An alternative in all of this may be a plug-in, you may want to try Poor Guys Swiss Knife, and see if that will give you the function you are looking for. If that is not an option, below would be a fix to your issue.

    There could be a couple ways of doing this, we could hook it out, but the reality is woo has made this close to impossible in the way that they call on this information. They are pulling this piece from a form, vs from code. so the only real solid alternative is to "Replace" the terms you want to change.

    So on the server side you are wanting to get into your sites 'cpanel' 'wp-content' 'plugins' 'woocommerce' 'templates' and 'checkout'. There are only 9 files or so in this folder the file I know specifically that calls "Billing Address" is the 'form-billing.php' file. you will want to open this file and change the wording accordingly. Without looking I am assuming you will want to change the 'review-order.php' and 'thankyou.php' file as well.

    *** Again I want to note that this ideally is not the best solution. Anytime you are altering a plugin you are taking the risk of an update "removing" your edits. In this case specifically the work required to change these lines would be a bit outrageous! And again, the information is being provided on a professional courtesy level.***

    Hope that Helps!

  11. Nick

    Nick New Member Updated Profile

    Hi!

    No problem! Reading the site it seemed pretty useful with some good answers on the forums.

    I know about not editing core files of both themes and plugins, and no, it isn't something I would normally do either!
    I have been successful in changing the titles on the main checkout page/checkout form by creating a child file of the billing-form and shipping-form as per woocoomerces instructions of best practice editing of files/css styling for the plugin.

    But other files within the 'checkout' folder and the 'order' folder call upon functions that pull in the titles, I think it may be a trial and error case using child files to try and get the titles working as we need them too site wide.

    I feared that this might be the case! But that is the way sometimes!

    If you have any other thoughts, or best ways of editing child files for woo then please let me know!

    Many Thanks!
  12. Savidge4

    Savidge4 Upload WP Superstar

    Nick,

    I have a feeling that specifically in this case, the only solution maybe to change the actual plug-in. The reason being the way these specific pieces are called through a form call vs code. So creating a child of the 'form-billing.php' is not going to catch reference from other forms, they are going to call to the original ( parent ) plug-in.

    You may want to try and child the entire 'checkout' and 'order' folders and see what that gets you. Like I said earlier this specific request can get to the point of ridiculous quick. - something so easy, can be so dang hard - From a programmers prospective as easy as WordPress is to manipulate, there are just those pieces that are a pain, and this would be one of those.

    I really didn't look at the whole picture, but I have a feeling changing the parent 'form-billing.php' file is in essence all that has to be done. The work required vs getting what the client wants with a caveat would be a tough call in this instance! - for me, and looking at this as if this was my client, I would lay out the facts...yes I can fix this "correctly" for an addition X hours, OR we can do "This" and that file will need to be replaced every time you do an update.

    Hope that Helps!

  13. Savidge4

    Savidge4 Upload WP Superstar

    Nick,

    Ok this got me going... I really don't like it when there is not an easy answer. 4 hours later is not easy tho! ha ha

    PHP:
    add_filter'gettext''upload_wp_text_convert'20);

    function 
    upload_wp_text_convert$translated_text$text$domain ) {
        switch ( 
    $translated_text ) {
            case 
    'Billing Address' :
                
    $translated_text __'INSERT YOUR TEXT HERE ''woocommerce' );
                break;
        }
        return 
    $translated_text;
    }
    I did find this in the wordpress codex API to give you a head start on the rest

    Hope that Helps!
    Last edited: Mar 12, 2014
  14. Savidge4

    Savidge4 Upload WP Superstar

    jmaharry,

    I was poking around for a solution to another issue and ran across this cool little piece of code, allowing you/usto change those little bits of text that seem impossibly hard to change.

    PHP:
    add_filter'gettext''upload_wp_text_convert'20);

    function 
    upload_wp_text_convert$translated_text$text$domain ) {
        switch ( 
    $translated_text ) {
            case 
    'Products' :
                
    $translated_text __'Online Ordering Menu''woocommerce' );
                break;
        }
        return 
    $translated_text;
    }
    You will wantto place this in your child theme function.php file.

    Hope that Helps!

    Last edited: Mar 12, 2014
  15. TeddyTriton

    TeddyTriton Administrator Staff Member

    Hi Nick,

    I just made a video that shows you how to change "Billing Address" title and "Shipping Address" title on the WooCommerce checkout page to anything you'd like. For your reference, the tutorial I used was called, Overriding WooCommerce Template Files. Please watch the video below and let me know if it helps...

  16. Savidge4

    Savidge4 Upload WP Superstar

    Nick,

    So I have been playing with this new found toy, and find that you can stack the commands:

    PHP:
    add_filter'gettext''upload_wp_text_convert'20);

    function 
    upload_wp_text_convert$translated_text$text$domain ) {
        switch ( 
    $translated_text ) {
            case 
    'Billing Address' :
                
    $translated_text __'Purchaser''woocommerce' );
                break;
            case 
    'Shipping Address' :
                
    $translated_text __'Delivery Address''woocommerce' );
                break;
        }
        return 
    $translated_text;

    }
    Last edited: Mar 12, 2014
  17. Savidge4

    Savidge4 Upload WP Superstar

    How and When to Use the Upload WP Text Convert Command

    There are some things that need to be understood when using this code. This code will UNIVERSALLY change the string you place in, across your ENTIRE site. ANYTIME you can use a CSS or PHP Hook conversion, you will want to do so. If you are not sure there is a piece of code that can change what it is you want to change, PLEASE ASK first.

    Using the ' gettext ' command interprets code as being ' !important '. So what does this mean exactly? well PHP and CSS are very linear. One line of code, then the next and the next. As it reads down the line and from one page to the next, it ultimately will run and or display the LAST known piece of code. Once an ' !important ' line is read, that line specifically will be the one processed or displayed.

    If there ever was a line of code that across a page could mess some stuff up, this right here is it! Fortunately if things do go amiss, you can simply remove the code. I am in no way trying to scare you from using this, I just want you to look at what " Else " may change in doing so. I of all people understand the frustration when you can't figure something out with wordpress. This little gem was 6 hours in the making! ha ha

    So here is the code again in its single use form:
    PHP:
    add_filter'gettext''upload_wp_text_convert'20);

    function 
    upload_wp_text_convert$translated_text$text$domain ) {
        switch ( 
    $translated_text ) {
            case 
    'ORIGINAL TEXT' :
                
    $translated_text __'CHANGED TEXT''woocommerce' );
                break;
        }
        return 
    $translated_text;
    And 1 more time stacking the commands:
    PHP:
    add_filter'gettext''upload_wp_text_convert'20);

    function 
    upload_wp_text_convert$translated_text$text$domain ) {
        switch ( 
    $translated_text ) {
            case 
    'ORIGINAL TEXT' :
                
    $translated_text __'CHANGED TEXT''woocommerce' );
                break;
            case 
    'ORIGINAL TEXT' :
                
    $translated_text __'CHANGED TEXT''woocommerce' );
                break;
        }
        return 
    $translated_text;

    Either ( Not both at the same time! ) of these code snipets can be placed in your child theme functions.php file.

    Hope That Helps!