The art of customization: Visual hook guide for WooCommerce single product pages

As you know that there are 2 ways to do the changes in the WooCommerce product detail page. One is to overwrite the template in the active theme’s folder or you can do the customization using the hooks. Here we are going to check how we can do the changes in the single product page using the hooks in WooCommerce.

First we need to know how many such hooks are there in WooCommerce for the product detail page using which we can do the customization as per our need.

This is the list of WooCommerce actions you can unhook/remove by simply changing add_action to remove_action in your functions.php. WooCommerce uses its own hooks e.g. woocommerce_before_single_product_summary to assemble the product detail page together. Because it’s done this way, you can therefore use remove_action to remove one of these elements. I’ve also added other do_action which don’t have a trigger function at the moment, but that you can use for adding content to the product detail page.

WooCommerce single product page hooks

Before content

add_action( ‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0 );

add_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 );

add_action( ‘woocommerce_before_single_product’, ‘woocommerce_output_all_notices’, 10 );

Left column

add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_sale_flash’, 10 );

add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );

add_action( ‘woocommerce_product_thumbnails’, ‘woocommerce_show_product_thumbnails’, 20 );

Right column

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 );

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_rating’, 10 );

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10 );

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );

Right column – add to cart

do_action( ‘woocommerce_before_add_to_cart_form’ );

do_action( ‘woocommerce_before_add_to_cart_button’ );

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_add_to_cart’, 30 );

add_action( ‘woocommerce_simple_add_to_cart’, ‘woocommerce_simple_add_to_cart’, 30 );

add_action( ‘woocommerce_grouped_add_to_cart’, ‘woocommerce_grouped_add_to_cart’, 30 );

add_action( ‘woocommerce_variable_add_to_cart’, ‘woocommerce_variable_add_to_cart’, 30 );

add_action( ‘woocommerce_external_add_to_cart’, ‘woocommerce_external_add_to_cart’, 30 );

add_action( ‘woocommerce_single_variation’, ‘woocommerce_single_variation’, 10 );

add_action( ‘woocommerce_single_variation’, ‘woocommerce_single_variation_add_to_cart_button’, 20 );

do_action( ‘woocommerce_before_quantity_input_field’ );

do_action( ‘woocommerce_after_quantity_input_field’ );

do_action( ‘woocommerce_after_add_to_cart_button’ );

do_action( ‘woocommerce_after_add_to_cart_form’ );

Right column – meta

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );

do_action( ‘woocommerce_product_meta_start’ );

do_action( ‘woocommerce_product_meta_end’ );

Right column – sharing

add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50 );

do_action( ‘woocommerce_share’ );

Tabs, upsells and related products

add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

add_action( ‘woocommerce_product_additional_information’, ‘wc_display_product_attributes’, 10 );

do_action( ‘woocommerce_product_after_tabs’ );

add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_upsell_display’, 15 );

add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );

Product page tabs

add_filter( ‘woocommerce_product_tabs’, ‘woocommerce_default_product_tabs’ );

add_filter( ‘woocommerce_product_tabs’, ‘woocommerce_sort_product_tabs’, 99 );

Reviews

add_action( ‘woocommerce_review_before’, ‘woocommerce_review_display_gravatar’, 10 );

add_action( ‘woocommerce_review_before_comment_meta’, ‘woocommerce_review_display_rating’, 10 );

add_action( ‘woocommerce_review_meta’, ‘woocommerce_review_display_meta’, 10 );

do_action( ‘woocommerce_review_before_comment_text’, $comment );

add_action( ‘woocommerce_review_comment_text’, ‘woocommerce_review_display_comment_text’, 10 );

do_action( ‘woocommerce_review_after_comment_text’, $comment );

After content

do_action( ‘woocommerce_after_single_product’ );

do_action( ‘woocommerce_after_main_content’ );

We will see the most common scenarios to update the product detail page:

1) Show custom fields in product summary

In order to display the custom data on the product summary page, I will use a function that hooks the fields to a WooCommerce action (with the desired priority). In the following code example, I will display custom fields after product excerpt but before add-to-cart:

function kp_custom_fields()
{
    echo 'Product ID: '.get_post_meta(get_the_ID(), "product_id", true);
    echo 'Product ID: '.get_field("product_id");
}
add_action( 'woocommerce_single_product_summary', 'kp_custom_fields', 21 );

2) Show custom fields in additional information tab

function kp_custom_fields()
{
    echo 'Product ID: '.get_post_meta(get_the_ID(), "product_id", true);
    echo 'Product ID: '.get_field("product_id");
}
add_action( 'woocommerce_product_additional_information', 'kp_custom_fields', 20 );

3) Add a new tab to product detail page

function kp_new_product_tab( $tabs ) {
    // Adds the new tab
    $tabs['desc_tab'] = array(
        'title'     => __( 'Important Information', 'woocommerce' ),
        'priority'  => 50,
        'callback'  => 'kp_new_product_tab_content'
    );
}
add_filter( 'woocommerce_product_tabs', 'kp_new_product_tab' );

Add content to new tab created

Once a custom tab has been added the content for the tab can be added in two ways. The content can be either added as static data or the content can be fetched from the custom fields added to the admin dashboard. The following code should be added to the functions.php file of your theme to add static data to the custom tab.

function kp_new_product_tab_content() {
    // The new tab content
    echo '<p>Lorem Ipsum</p>';
}

If you have custom fields provided in your admin dashboard for your product, then the following code would be useful to achieve the required result.

function kp_new_product_tab_content() {
    $prod_id = get_the_ID();
    echo'<p>'.get_post_meta($prod_id,'important_information',true).'</p>';
}

4) Display custom field values in the description

If the custom fields are created using the plugin called Advanced Custom Fields, then you can use this method to display the field values in the description.

To display field information on the front-end, use the [acf field=””] shortcode. You can refer the ACF documentation for the same here. Add the field name in between the quotation marks:

Once this is done, you can save the product page by hitting the publish or update button.

This blog will help you to display the custom fields values created using ACF For Dokan PRO plugin where you wish to display.