Displaying custom fields values under SKU in single product pages

2.8k views Asked by At

I am customizing WooCommerce and I would like to add and display custom texts ( Conditions and Brands) in the product pages.

The position is either under "in Stock" or "SKU" meta. I have managed to create and save the custom fields but how to print these meta values to the product pages.

Please help!

Here is my code in functions.php:

// Display Fields
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
// Text Field
function woo_add_custom_general_fields() {
  global $woocommerce, $post;
  echo '<div class="options_group">';
  woocommerce_wp_text_input( 
    array( 

        'id'          => '_conditions', 
        'label'       => __( 'Conditions', 'woocommerce' ), 
        'placeholder' => 'i.e: brand-new; refurbished; defected...',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the conditions of the products here.', 'woocommerce' ) 
    )
);
  echo '</div>';
  woocommerce_wp_text_input( 
    array( 

        'id'          => '_bands', 
        'label'       => __( 'Brands', 'woocommerce' ), 
        'placeholder' => 'i.e: Lacoste; Hugo Boss...etc',
        'desc_tip'    => 'true',
        'description' => __( 'Enter names of the Brands of the products if any.', 'woocommerce' ) 
    )
);
}
// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

Thanks

1

There are 1 answers

0
LoicTheAztec On BEST ANSWER

The code provided in your question is incomplete and should be something like that:

// Enabling and Displaying Fields in backend
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );
function woo_add_custom_general_fields() {
    global $woocommerce, $post;

    echo '<div class="options_group">';

    woocommerce_wp_text_input( array( // Text Field type
        'id'          => '_conditions', 
        'label'       => __( 'Conditions', 'woocommerce' ), 
        'placeholder' => 'i.e: brand-new; refurbished; defected...',
        'desc_tip'    => 'true',
        'description' => __( 'Enter the conditions of the products here.', 'woocommerce' ) 
    ) );

    woocommerce_wp_text_input( array( // Text Field type
        'id'          => '_brands', // ===> NOT '_bands'
        'label'       => __( 'Brands', 'woocommerce' ), 
        'placeholder' => 'i.e: Lacoste; Hugo Boss...etc',
        'desc_tip'    => 'true',
        'description' => __( 'Enter names of the Brands of the products if any.', 'woocommerce' ) 
    ));

    echo '</div>'; // Closing </div> tag HERE
}

// Save Fields values to database when submitted (Backend)
add_action( 'woocommerce_process_product_meta', 'woo_save_custom_general_fields' );
function woo_save_custom_general_fields( $post_id ){

    // Saving "Conditions" field key/value
    $conditions_field = $_POST['_conditions'];
    if( !empty( $conditions_field ) )
        update_post_meta( $post_id, '_conditions', esc_attr( $conditions_field ) );

    // Saving "Brands" field key/value
    $brands_field = $_POST['_brands'];
    if( !empty( $brands_field ) )
        update_post_meta( $post_id, '_brands', esc_attr( $brands_field ) );
}

Now, to display this metadata values in your product pages you will use get_post_meta() function in a hooked function. Here below you will see all the hooked templates in woocommerce_single_product_summary hook with their priorities (the display order):

/**
     * woocommerce_single_product_summary hook
     *
     * @hooked woocommerce_template_single_title - 5
     * @hooked woocommerce_template_single_price - 10
     * @hooked woocommerce_template_single_excerpt - 20
     * @hooked woocommerce_template_single_add_to_cart - 30
     * @hooked woocommerce_template_single_meta - 40
     * @hooked woocommerce_template_single_sharing - 50
 */

The "in Stock" or "SKU" data is displayed by woocommerce_template_single_meta which have a priority of 40. Now you need to display your customs fields values just after. Then you can chose a priority of 45 for that purpose.

Here is the code that is going to output your custom fields values in product pages under "SKU":

add_action('woocommerce_single_product_summary', 'woo_display_custom_general_fields_values', 45);
function woo_display_custom_general_fields_values() {
    global $product;

    echo '<p class="custom-conditions">Conditions: ' . get_post_meta( $product->id, '_conditions', true ) . '</p>';
    echo '<p class="custom-brands">Brands: ' . get_post_meta( $product->id, '_brands', true ) . '</p>';
}

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

This code is tested and works.