Support » Plugin: WooCommerce » How to change/customize the structure of Loop-title ?

  • Resolved ManusH

    (@manush)


    In the previous versions of WooCommerce,
    there were template files for the product’s “title” area:

    For the Loop-title it was taken from:
    …/woocommerce/templates/loop/title.php

    and for the Single Product page the template was:
    …/woocommerce/templates/single-product/title.php

    I made some changes in those template files (inside the child theme) for displaying the title; some visual additions, style parameters, etc.

    But, after the last updates; I figured out that the system has changed!
    Although the single-product’s title template stays the same,
    there is no title.php template anymore for the loop!

    That makes all my editions disappear and cannot find a way to reproduce those changes.

    So; what is the new way of Loop-title customisation?
    Any guidance will be appreciated…

    https://wordpress.org/plugins/woocommerce/

Viewing 8 replies - 1 through 8 (of 8 total)
  • It looks like they yanked the file and added the functions elsewhere. Don’t know where though.

    https://github.com/woothemes/woocommerce/search?utf8=%E2%9C%93&q=loop+title

    https://github.com/woothemes/woocommerce/tree/master/templates/loop

    Plugin Author Mike Jolley (a11n)

    (@mikejolley)

    There are hooked in functions. Look in template-hooks.php for the list.

    Thread Starter ManusH

    (@manush)

    Looked at that:
    …/woocommerce/includes/wc-template-hooks.php

    The only mentioning for the product title in the loop is:

    line-87:

    * @see woocommerce_template_loop_product_title()

    this is only a comment!

    And
    line-98:

    add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );

    this is the action to put that title inside the loop.

    So what to do for any customisation here.
    Because there is no-more a template file, I am stuck there!

    Btw, by customisation; I mean just to display <sku>+<product-title> together in that section; ofcourse with proper html/div structure in order to style them seperately via CSS.

    Any help?

    Plugin Author Mike Jolley (a11n)

    (@mikejolley)

    You can remove_action (to remove our function) and then add_action for your own custom function.

    Thread Starter ManusH

    (@manush)

    Thanks,

    I figured that out; from another topic with a similar sunbect:
    https://wordpress.org/support/topic/make-loop-item-title-open-in-a-new-tab
    but the problem was the “SKU-function” part.

    I solved that at last.

    For anyone who needs such a customisation; my solution is:

    /* CREATE the new function, with SKU added */
    function woocommerce_template_loop_product_title_with_sku() {
    		global $product;
    		echo '<span class="loop-title-sku">' . $product->get_sku() . '</span>';
    		echo '<h3 class="loop-title">' . get_the_title() . '</h3>';
    }
    
    /*REMOVE old loop-title action             */
    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
    
    /* ADD new loop-title-with sku action      */
    add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title_with_sku', 10 );

    Hope that won’t conflict with any other theme/plugin feature!

    Big Thanks !!!

    I wonder to know how to change template of loop of products – in this code

    /* CREATE the new function, with SKU added */
    function woocommerce_template_loop_product_title_with_sku() {
    		global $product;
    		echo '<span class="loop-title-sku">' . $product->get_sku() . '</span>';
    		echo '<h3 class="loop-title">' . get_the_title() . '</h3>';
    }
    
    /*REMOVE old loop-title action             */
    remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
    
    /* ADD new loop-title-with sku action      */
    add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title_with_sku', 10 );

    it change title – and add to this some code, but how change all actions together ?

    Nice approach. Thanks it helped a lot!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to change/customize the structure of Loop-title ?’ is closed to new replies.