How to add a Informative custom field in Woocommerce Single Product page without using any plugin - Woocommerce Snippets.

I recently worked with a client who sells different types of plants , They want to add a custom title right below the product title in Wooommerce single product page. There are many plugins around which support similar functionality but here I used Woocommerce hooks to make it possible.

Adding a custom Field in Woocommerce :

I have added a Woocommerce custom field and saved it using the code this way.

/**
 * Add a custom text field
 * @since 1.0.0
 */
function cfwc_create_custom_field() {
	$args = array(
		'id'            => 'custom_text_field_title',
		'label'         => __( 'Botanical Name', 'cfwc' ),
		'class'					=> 'cfwc-custom-field',
		'desc_tip'      => true,
		'description'   => __( 'Enter the Botanical name of Plant here.', 'ctwc' ),
	);
	woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );

/**
 * Save the custom field
 * @since 1.0.0
 */
function cfwc_save_custom_field( $post_id ) {
	$product = wc_get_product( $post_id );
	$title = isset( $_POST['custom_text_field_title'] ) ? $_POST['custom_text_field_title'] : '';
	$product->update_meta_data( 'custom_text_field_title', sanitize_text_field( $title ) );
	$product->save();
}
add_action( 'woocommerce_process_product_meta', 'cfwc_save_custom_field' );

Displaying the Informative field on front end :

I added this code to display the code without any input field and right below the front end.

I used the hook  woocommerce_single_product_summary with priority 6 to display this right below the product title.

/**
 * Display custom field on the front end
 * @since 1.0.0
 */
function cfwc_display_custom_field() {
	global $post;
	// Check for the custom field value
	$product = wc_get_product( $post->ID );
	$title = $product->get_meta( 'custom_text_field_title' );
	if( $title ) {
		// Only display our field if we've got a value for the field title
		printf(
			'<div <label  for="cfwc-title-field">%s</label></div>',
			esc_html( $title )
		);
	}
}
add_action( 'woocommerce_single_product_summary', 'cfwc_display_custom_field',6 );

You can display the field wherever you want it by using Woocommerce hooks.

This is how it worked on the clients site I developed on , of course you can stylize it or put a SVG as per your liking.

Complete Plugin Code :

This is the complete code to make the field display like in the above picture.

/**
 * Plugin Name: Botanical Name Field for Crystal Water Nursery
 * Description: Add Botanical Name  to Plants
 * Version: 1.0.0
 * Author: Naveen Chowdary Yellamaddi | NCY Design
 * Author URI: https://premiumwp.ncy.design/
 * Text Domain: cfwc
 * WC requires at least: 3.4.0
 * WC tested up to: 3.4.2
*/

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Display the custom text field
 * @since 1.0.0
 */
function cfwc_create_custom_field() {
	$args = array(
		'id'            => 'custom_text_field_title',
		'label'         => __( 'Botanical Name', 'cfwc' ),
		'class'					=> 'cfwc-custom-field',
		'desc_tip'      => true,
		'description'   => __( 'Enter the Botanical name of Plant here.', 'ctwc' ),
	);
	woocommerce_wp_text_input( $args );
}
add_action( 'woocommerce_product_options_general_product_data', 'cfwc_create_custom_field' );

/**
 * Save the custom field
 * @since 1.0.0
 */
function cfwc_save_custom_field( $post_id ) {
	$product = wc_get_product( $post_id );
	$title = isset( $_POST['custom_text_field_title'] ) ? $_POST['custom_text_field_title'] : '';
	$product->update_meta_data( 'custom_text_field_title', sanitize_text_field( $title ) );
	$product->save();
}
add_action( 'woocommerce_process_product_meta', 'cfwc_save_custom_field' );

/**
 * Display custom field on the front end
 * @since 1.0.0
 */
function cfwc_display_custom_field() {
	global $post;
	// Check for the custom field value
	$product = wc_get_product( $post->ID );
	$title = $product->get_meta( 'custom_text_field_title' );
	if( $title ) {
		// Only display our field if we've got a value for the field title
		printf(
			'<div <label  for="cfwc-title-field">%s</label></div>',
			esc_html( $title )
		);
	}
}
add_action( 'woocommerce_single_product_summary', 'cfwc_display_custom_field',6 );

How to add this snippet?

You can add this snippet to your child themes functions.php , We don't recommend adding code to your main theme if its not developed by you. Otherwise you can use a simple plugin https://wordpress.org/plugins/code-snippets/

Express your views in the comment section below or if you need any urgent help click the chat icon and ping me , I will surely help you if I am there and if I can :).