Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to display custom fields of variable products under the product title of the front product page

enter image description here

enter image description here

The code for adding custom fields in the background is as follows:

// 1. Add custom field input @ Product Data > Variations > Single Variation
function bbloomer_add_custom_field_to_variations( $loop, $variation_data, $variation ) {
woocommerce_wp_text_input( array( 
'id' => 'custom_field[' . $loop . ']', 
'class' => 'short', 
'label' => __( 'Custom Field', 'woocommerce' ),
'value' => get_post_meta( $variation->ID, 'custom_field', true )
) 
);      
}
add_action( 'woocommerce_variation_options_pricing', 'bbloomer_add_custom_field_to_variations', 10, 3 ); 
// 2. Save custom field on product variation save
function bbloomer_save_custom_field_variations( $variation_id, $i ) {
    $custom_field = $_POST['custom_field'][$i];
    if ( ! empty( $custom_field ) ) {
        update_post_meta( $variation_id, 'custom_field', esc_attr( $custom_field ) );
    } else delete_post_meta( $variation_id, 'custom_field' );
}
add_action( 'woocommerce_save_product_variation', 'bbloomer_save_custom_field_variations', 10, 2 );
// 3. Store custom field value into variation data
function bbloomer_add_custom_field_variation_data( $variations ) {
    $variations['custom_field'] = '<div class="woocommerce_custom_field">Custom Field: <span>' . get_post_meta( $variations[ 'variation_id' ], 'custom_field', true ) . '</span></div>';
    return $variations;
}
add_filter( 'woocommerce_available_variation', 'bbloomer_add_custom_field_variation_data' );

So, How to display this newly added custom field and the existing SKU field under the product title on the front product page at the same time, and: when selecting different variants, the corresponding custom field and SKU field will also be displayed dynamically.

I tried but it doesn’t show up below the title

Tags:

2

Answers


  1. 0

    The code from BBloomer is a bit outdated…

    To display the selected variation custom field below the product title, use the following instead:

    // Add custom field(s) to product variations from specific variable products
add_action( 'woocommerce_variation_options_pricing', 'add_variation_setting_fields', 10, 3 ); 
function add_variation_setting_fields( $loop, $variation_data, $variation ) {
    $field_key = 'custom_field';

    woocommerce_wp_text_input( array( 
        'id'            => $field_key.'['.$loop.']', 
        'label'         => __( 'Custom Field', 'woocommerce' ),
        'class'         => 'short', 
        'wrapper_class' => 'form-row',
        'value'         => get_post_meta( $variation->ID, $field_key, true )
    ) );      
}

// Save the custom field from product variations
add_action('woocommerce_admin_process_variation_object', 'save_variation_setting_fields', 10, 2 );
function save_variation_setting_fields($variation, $i) {
    $field_key = 'custom_field';

    if ( isset($_POST[$field_key][$i]) ) {
        $variation->update_meta_data($field_key, sanitize_text_field($_POST[$field_key][$i]));
    }
}

// Add the custom field value to the product form data
add_filter( 'woocommerce_available_variation', 'available_variation_custom_field_value', 10, 3 );
function available_variation_custom_field_value( $variation_data, $product, $variation ) {
    $variation_data['custom_field'] = $variation->get_meta('custom_field');
    return $variation_data;
}
    
// Display selected variation custom field below product title
add_action('woocommerce_single_product_summary', 'display_custom_field_below_product_title', 7 );
function display_custom_field_below_product_title() {
    global $product;

    if ( $product->is_type('variable') ) :

    wc_enqueue_js("$('form.variations_form').on('show_variation', function(event, data){
        if ( data.custom_field ) {
            $('.custom-field').html(data.custom_field).show();
        }
    }).on('hide_variation', function(){
        $('div.custom-field').hide().html('');
    });");

    echo '<div class="custom-field" style="display:none;"></div>';

    endif;
}

    Code goes in functions.php file of your child theme (or in a plugin). Tested and works.

    Login or Signup to reply.
  2. 0

    You have to use get_post_meta() function to show it in the frontend

    <?php 

    echo get_post_meta($product->ID, 'custom_field', true);

?>

    Note: Remember to pass the parameters ($product->ID and slug) correctly

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search