Woocommerce Action Hooks and Overriding Templates

WooCommerce action hooks and overriding templates

First in reference below you will find how to override properly woocommerce templates via a theme (avoiding editing the plugin templates).

In your first code snippet, as you can see for woocommerce_single_product_summary hook, you have in order all the different templates that are @hooked in this hook location with do_action() WordPress function:

do_action( 'woocommerce_single_product_summary' ); 

So in your customized code (the 2nd code snippet) you have just replaced the hook, by the hooked template slug (that is NOT a hook) and will NOT work as an entry point action hook. See the references at the bottom of this answer for the list of WooCommerce actions and filters existing hooks

Consequences: All other hooked templates in the commented list code (beginning with @hooked) will be missing if you replace a hook by a template slug.

For the hooks used in the templates see this helpful WooCommerce Visual Hook Guide



Explanations (How to):

HOW TO - Concrete example:

You want to customize woocommerce_template_single_title hooked template in woocommerce_single_product_summary hook.

 THE HOOK NAME:  woocommerce_single_product_summary hook.

THE TEMPLATES HOOKED (+priority order number) => corresponding template file name:
— woocommerce_template_single_title (5) => single-product/title.php
— woocommerce_template_single_rating (10) => single-product/rating.php
— woocommerce_template_single_price (10) => single-product/price.php
— woocommerce_template_single_excerpt (20) => single-product/short-description.php
— woocommerce_template_single_add_to_cart(30) => single-product/add-to-cart/ (6 files depending on product type)
— woocommerce_template_single_meta (40) => single-product/review-meta.php
— woocommerce_template_single_sharing - (50) => single-product/share.php

Then you will need to edit the corresponding woocommerce_single_product_summary hook title.php located in single-product (sub folder)… Finally is not so complicated, once we understand the template structure files and the hooks in that templates.

The priority number, gives the order for the hooked templates: Smaller in first, bigger at the end…

See also: Hooks and their hooked functions execution queue in Wordpress and Woocommerce



Others ways:

You can also use all that existing templates hooks to target very specific changes or customizations, with custom functions located in the function.php file of your active child theme (or theme) or any plugin file too.

Example using add_action() WordPress function:

// define the woocommerce_single_product_summary callback function

function my_custom_action() {
echo '<p>This is my custom action function</p>';
};
add_action( 'woocommerce_single_product_summary', 'my_custom_action', 15 );

This function has a priority number of 15 and will display
"This is my custom action function" string text, between the product price and the product short description

Optional arguments of this hooked function for this hook:

• The template slug (string).

• The priority (int).


References:

  • Template structure & Overriding templates via a theme
  • WooCommerce Hooks: Actions and filters
  • WooCommerce Code - Action and Filter Hook Reference
  • WooCommerce Visual Hook Guide: Single Product Page

Custom product template and action hooks in Woocommerce

You are making confusions, original do_action( 'woocommerce_before_single_product_summary' ) enables an entry point in woocommerce content-single-product.php template, where add_action() is used to hook other templates using the functions:

  • woocommerce_show_product_sale_flash() (with a hook priority of 10)
  • woocommerce_show_product_images() (with a hook priority 20)

So if you want to enable only the product image in your custom template you will have to create your own hook:

<div class="wc-product-images">
<?php do_action( 'woocommerce_before_single_product_summary_custom' ); ?>
</div>

<div class="wc-product-description">
<?php the_content(); ?>
</div>

Then you will add this in function.php file of your active child theme (or active theme):

add_action( 'woocommerce_before_single_product_summary_custom', 'woocommerce_show_product_images', 20 );

It should work as intended.


But you can use in your custom template the original hook, if you don't need any different hook customizations… In that case you will only have that:

<div class="wc-product-images">
<?php do_action( 'woocommerce_before_single_product_summary' ); ?>
</div>

<div class="wc-product-description">
<?php the_content(); ?>
</div>

Additon: Related to your comment (regarding related products).

To enable related products in your custom template, add this block in it (with a custom hook):

<div class="wc-product-related">
<?php do_action( 'custom_after_single_product_summary' ); ?>
</div>

Then you will add this in function.php file of your active child theme (or active theme):

add_action( 'custom_after_single_product_summary', 'woocommerce_output_related_products', 20 );

It should work.

WooCommerce plugin template overriding

I think you need to do it via hooks (filters & actions) available for WooCommerce.

Here is a list:
http://docs.woothemes.com/document/hooks/#templatehooks

Here is where to get started on hooks:
http://wp.tutsplus.com/tutorials/the-beginners-guide-to-wordpress-actions-and-filters/

Overriding a hooked in function in WooCommerce

The first option is the right one: In your main function hooked in init action hook, you can add your replacement hooked function:

add_action( 'init', 'replace_default_wc_behaviour' );
function remove_default_wc_behaviour() {
// remove the default behavior
remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );

// Replace by your custom behavior
add_action( 'woocommerce_after_shop_loop_item', 'custom_WC_loop_product_link_close', 5 );
function custom_WC_loop_product_link_close() {
// Do your custumizations

// add the close tag
echo '</a>';
}
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

How to Identify the code used by WooCommerce hook 'woocommerce_view_order'

You need to look at WooCommerce plugin includes/wc-template-hooks.php core file (line 259):

add_action( 'woocommerce_view_order', 'woocommerce_order_details_table', 10 );

As you can see, the function woocommerce_order_details_table() is hooked in. So now let's find this function that is located in includes/wc-template-functions.php core file (starting line 2584).

As you will see this hooked function call the template file order/order-details.php.

So now you can make some changes:

1). Overriding the template file order/order-details.php via your active child theme or theme as explained in this documentation.

Note: The template file order/order-details.php is also used in Order received (thankyou), so take care to target your changes using the following condition:

// For view order
if ( is_wc_endpoint_url( 'view-order' ) ) {
// Here your changes
}
// For other cases
else {
// Here keep the original code
}

2). Or/and you could also remove this hooked function to replace it by your own custom function, with something like:

remove_action( 'woocommerce_view_order', 'woocommerce_order_details_table', 10 );
add_action( 'woocommerce_view_order', 'custom_order_details_table', 10 );
function custom_order_details_table( $order_id ) {
if ( ! $order_id ) {
return;
}

// Here below add your own custom code
}

You can also call your own custom template in that custom function, that will be used exclusively in order view endpoint...

Related: WooCommerce action hooks and overriding templates

WooCommerce Documentations:

  • Template structure & Overriding templates via a theme
  • WooCommerce Conditional Tags


Related Topics



Leave a reply



Submit