How to add a custom field text below the product title in wordpress WooCommerce

Question

In WooCommerce I would like to add custom text to my products display, that will be grabbed from a custom field in product's edit page.

This is how it looks now:

You can see the products with their title below:

Website link

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>';
  }
}

Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP. — Asiatics Group of Companies, Jul 12 '18 at 07:06
your above code looking fine, i have also test your code on my server. Paste your above code at the bottom of current themes functions.php file using ftp or sftp. — dineshkashera, Jul 12 '18 at 08:05

score 1 · Accepted Answer · answered Jul 12 '18 at 07:55

You need to add the full code to your theme's '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'
        )
    );
    echo '</div>';
}

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));
    // Custom Product Number Field
    $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
    if (!empty($woocommerce_custom_product_number_field))
        update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));
    // Custom Product Textarea Field
    $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
    if (!empty($woocommerce_custom_procut_textarea))
        update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));
}

Your custom field ID is _custom_product_text_field here and you can display the data like <?php echo get_post_meta($post->ID, '_custom_product_text_field', true); ?> inside product template's loop (probably override 'woocommerce/single-product.php').

If WordPress returns error while updating 'functions.php', try uploading via FTP or use some File Manager plugins.

thanks for your reply!.......Custom field is showing under price field in back end in WordPress products section but not any thing show in front page of website .....check the image of front page ...code is working now good but not display anything.. — Asiatics Group of Companies, Jul 12 '18 at 09:28
Did you override 'woocommerce/single-product.php' with this code `ID, '_custom_product_text_field', true); ?>` below title? — Outsource WordPress, Jul 12 '18 at 10:04
No. i don't override 'woocommerce/single-product.php' jus paste this code in function.php — Asiatics Group of Companies, Jul 12 '18 at 10:12
You should not paste `ID, '_custom_product_text_field', true); ?>` in functions.php to display the custom field data. Just copy 'content-product.php' from 'plugins/woocommerce/templates', create a folder named 'woocommerce' in your theme and paste inside it. Add this code after `do_action( 'woocommerce_after_shop_loop_item_title' );` `echo get_post_meta($post->ID, '_custom_product_text_field', true);` around line 61. That's it. — Outsource WordPress, Jul 12 '18 at 10:35
If your theme already having this file, please add the code in the appropriate place and careful while override. Also, this will show the custom code in product's list section alone and if you need to show the same in details page, you should override 'woocommerce/single-product.php' in the same way. — Outsource WordPress, Jul 12 '18 at 10:37

How to add a custom field text below the product title in wordpress WooCommerce

1 Answers1