How to add more custom field in Linked Product of Woocommerce

Question

Thanks to all developers at StackOverflow.

I want to add more fields in Linked Product Section of Woocommerce. The fields should be similar to Upsell/Crosssell.

My code so far:-

add_action( 'woocommerce_product_options_linked_product_data', 'woocom_general_product_data_custom_field' );

 woocommerce_wp_text_input( 
    array( 
      'id' => '_upsizing_products', 
      'label' => __( 'Upsizing Products', 'woocommerce' ), 
      'placeholder' => 'Upsizing Products',
      'desc_tip' => 'true',
      'description' => __( 'Select Products Here', 'woocommerce' ) 
    )
  );

In the above code i need the combobox, For example when you type 3 characters in input box, it will show a list of matched products which can be selected. Similar to Upsell / Cross Sell.

Please anyone help me implement this custom field. Thanks in Advance.

Edit: Anyone?

Answer 1

There are several things missing in your code above.

1. The hook you have used on the first line, do not exist. The right hook is called woocommerce_product_options_related
2. The code where you've designed your custom field, is not inside any function.
3. You are creating a standard text-field. If you want a "Select Product"-dropdown, you should use another approach. This should be inside that function that you're using in the hook.
4. You are missing a hook and a function the actually save the data from your custom field

---

1. Finding the right hook/action

To find the right hook to use, just search for "woocommerce_product_options_" inside the WoocCommerce plugin, and about 6 PHP-files should appear. One of those files is called "html-product-data-linked-products.php". This file contains all the existing options in that specific WooCommerce section. It also contains the hook used to display those options.

Open the file and check it out. The hook is at the bottom of the page

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

---

2. Creating the dropdown

To create a select-dropdown including a product search, you need a much different code than the one above.

The spare some time, you can just copy-paste one of the existing options, in the file mentioned above, and then modify it, to your needs.

All this should be placed inside a function called: woocom_linked_products_data_custom_field().

2.1. Modify the ID/name

The first things you need to modify in the code, is of course the unique ID/name of the field. This is placed in the label-tag (for) and the select-tag (id and name).

In your example the ID/name should be upsizing_products and the 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: Don't forget to put an [] and the end of the name-tag, or your data will not be stored.

2.2. Show already chosen products

The next thing, is to show and highligt already chosen products in the WooCommerce section and the dropdown it self.

To do this replace the $product_ids-variable and the entire line with:

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

With this instead, the product id's is retrieved from your custom field in the database instead of one of the existing options (cross_sell_ids for example).

Note: The _upsizing_products_ids is the meta-key name in the database. The meta-value related to this key, contains all your field data. This is used to store and retrieve the custom field.

2.3. Display the field in the WooCommerce section

Lastly, the function should be properly hooked, so it can be displayed in the Linked Products section:

add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

---

3. Save and store the data

Now your custom field is displayed inside the right section. The next thing is to save and store the data in the database.

Inside a new function, use $_POST to retrieve the data from the field, and update_post_meta to store the data in the database containing the post-ID, the unique field-id/name (meta-key) and the data it self (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 full code. Put it inside your themes functions.php or a 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 stored data use _upsizing_products_ids:

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

Check out this guide Mastering WooCommerce Products Custom Fields for more information about Custom Fields for WooCommerce.