Display custom field blow product title Woocommerce product single pages

Question

I would like to add a text field in the back-end Woocommerce product page and displaying/echo the text on the front-end below the Product title.

Now I have the 'custom field box' to write a text in the back-end (see screenshot), but I don't know how I can showing the text on the front-end. Can someone help me with this code?

I followed this page, but it is only for archive pages... Add a custom field value below product title in WooCommerce archives pages

Thank you in advance!

jerry

Functions.php

        // Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');

function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => 'Custom Product Text Field',
            'label' => __('Custom Product Text Field', 'woocommerce'),
            'desc_tip' => 'true'
        )
    );

}

function woocommerce_product_custom_fields_save($post_id)
{
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
        update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
}

I believe the issue here is choosing the right hook location. — Mohamed Ali O.Ameur, Aug 14 '20 at 08:06
Please some feed back on the answers below will be appreciated. Thank you. — LoicTheAztec, Aug 17 '20 at 10:56

score 0 · Answer 1 · answered Aug 14 '20 at 08:06

Your solution is the right hook, when you use add_action() you need to choose the right hook to insert your code in the right location.

Probebly the location you want is "woocommerce_before_add_to_cart_form";

add_action('woocommerce_before_add_to_cart_form', 'woocommerce_product_custom_fields');

I'm not sure about the exact location but you can just change "woocommerce_before_add_to_cart_form" and place the right hook you want. This is a great article that shows the location and the required hook for every location. Let me know what you get!

LoicTheAztec · Answer 2 · 2020-08-17T10:55:58.823

Add the following to display that product custom field in single product pages below product title:

add_action( 'woocommerce_single_product_summary', 'custom_field_display_below_title', 7 );

Code goes in functions.php file of your active child theme (or active theme). It should work.

Then it will call the function, that you are already using, to display the custom field on product archive pages:

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_field_display_below_title', 2 );
function custom_field_display_below_title(){
    global $product;

    // Get the custom field value
    $custom_field = get_post_meta( $product->get_id(), '_custom_product_text_field', true );

    // Display
    if( ! empty($custom_field) ){
        echo '<p class="my-custom-field">'.$custom_field.'</p>';
    }
}

Related: WooCommerce action hooks and overriding templates

Display custom field blow product title Woocommerce product single pages

2 Answers2