How to Add an Extra Custom Field to a Related Woocommerce Product

There are several things missing from your code.

1. The hook you used in the first line does not exist. The right hook is calledwoocommerce_product_options_related
   
   
2. The code where you created your custom field is not inside any function.
3. You are creating a standard text box. If you want to "select a product" -dropdown, you should take a different approach. This should be inside the function you are using in the hook.
4. You are missing a hook and a function that actually saves data from your custom field

1. Find the right hook / action

To find the correct hook to use, simply search for "woocommerce_product_options_" inside the WoocCommerce plugin and about 6 PHP files should appear. One of these files is called "html-product-data-connected-products.php". This file contains all the existing options in that particular WooCommerce section. It also contains a hook used to display these parameters.

Open the file and check it. Hook at the bottom of the page

Full path: / wp-content / plugins / woocommerce / includes / admin / metaboxes / views /

2. Create a dropdown

To create a -dropdown pick, including a product search, you need code that is very different from the one above.

In your spare time, you can simply copy and paste one of the existing parameters into the file mentioned above and then modify it to suit your needs.

All of this must be placed in a function called: woocom_linked_products_data_custom_field()

.

2.1. Change id / name

The first thing to change in code is of course the unique ID / name of the field. This is put in label

-tag ( for

) and select

-tag ( id

and name

).

In your example, the ID / name should be upsizing_products

and label-text Upsizing Products

:

<label for="upsizing_products"><?php _e( 'Upsizing Product', 'woocommerce' ); ?></label>
<select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsizing_products" name="upsizing_products[]" data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">

      

        
        
        
      

    

Note. Do not forget to []

end the name with -tag, otherwise your data will not be saved.

2.2. Show already selected products

The next thing to do is show and highlight the already selected products in the WooCommerce section and reveal them yourself.

To do this, replace $product_ids

-variable and the whole line with:

$product_ids = get_post_meta( $post->ID, '_upsizing_products_ids', true );

      

        
        
        
      

    

Doing this instead fetches the product ID from your custom field in the database instead of one of the existing parameters (e.g. cross_sell_ids).

Note . _upsizing_products_ids

is the name of the meta key in the database. The meta value associated with this key contains all the data for your field. This is used to store and retrieve a custom field.

2.3. Display field in WooCommerce section

Finally, the function must be properly wired in order to be displayed in the Related Products section :

add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

      

        
        
        
      

    

3. Save and save data

Now your custom field is displayed inside the right side. The next step is to save and save the data in the database.

Inside the new function, use $_POST

to retrieve data from the field and update_post_meta

to store the data in the database containing the post-ID, the field's unique identifier / name (meta-key) and the data itself (meta) -value).

function woocom_linked_products_data_custom_field_save( $post_id ){
    $product_field_type =  $_POST['upsizing_products'];
    update_post_meta( $post_id, '_upsizing_products_ids', $product_field_type );
}
add_action( 'woocommerce_process_product_meta', 'woocom_linked_products_data_custom_field_save' );

      

        
        
        
      

    

Here's the complete code. Place this in your themes functions.php

or plugin file:

// Display the custom fields in the "Linked Products" section
add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

// Save to custom fields
add_action( 'woocommerce_process_product_meta', 'woocom_linked_products_data_custom_field_save' );


// Function to generate the custom fields
function woocom_linked_products_data_custom_field() {
    global $woocommerce, $post;
?>
<p class="form-field">
    <label for="upsizing_products"><?php _e( 'Upsizing Product', 'woocommerce' ); ?></label>
    <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsizing_products" name="upsizing_products[]" data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
        <?php
            $product_ids = get_post_meta( $post->ID, '_upsizing_products_ids', true );

            foreach ( $product_ids as $product_id ) {
                $product = wc_get_product( $product_id );
                if ( is_object( $product ) ) {
                    echo '<option value="' . esc_attr( $product_id ) . '"' . selected( true, true, false ) . '>' . wp_kses_post( $product->get_formatted_name() ) . '</option>';
                }
            }
        ?>
    </select> <?php echo wc_help_tip( __( 'Select Products Here.', 'woocommerce' ) ); ?>
</p>

<?php
}

// Function the save the custom fields
function woocom_linked_products_data_custom_field_save( $post_id ){
    $product_field_type =  $_POST['upsizing_products'];
    update_post_meta( $post_id, '_upsizing_products_ids', $product_field_type );
}

      

        
        
        
      

    

To display the saved data use _upsizing_products_ids

:

echo get_post_meta( $post->ID, 'my-field-slug', true );

      

        
        
        
      

    

Check out this guide, Mastering Custom Fields for WooCommerce Products for more information on custom fields for WooCommerce.