How to Add Custom Fields to Linked Products of Admin Interface in WooCommerce?

We have explored various articles on adding product input fields to product pages. Now, let’s look at how we can enhance product options and showcase them for product recommendations. In this customization, we will add custom fields to Linked Products menu of Product Data. This field functions similarly to the upselling and cross-selling product fields. For example, if the main product is laptop, admin can enter some accessories related to the main product in this custom field. Let’s dive into the implementation steps in detail!

Solution: Add Custom Fields to Linked Products of Admin Interface in WooCommerce

The code will add a custom dropdown field to the Linked products section of product data in the admin end. So that admin can link specific products in this dropdown field which will be prominently displayed on the product page.

function ts_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
    // Display the upsizing products below the dropdown list
    if ( $product_ids ) {
        echo '<p><strong>Selected Upsizing Products:</strong></p>';
        echo '<ul>';

        foreach ( $product_ids as $product_id ) {
            $product = wc_get_product( $product_id );
            if ( is_object( $product ) ) {
                echo '<li>' . wp_kses_post( $product->get_formatted_name() ) . '</li>';
            }
        }

        echo '</ul>';
    }
}

// Function to save the custom fields
function ts_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 );
}
function ts_display_upsizing_products() {
    global $product;

    // Get upsizing products associated with the current product
    $upsizing_product_ids = get_post_meta( $product->get_id(), '_upsizing_products_ids', true );

    // If upsizing products exist, display them
    if ( $upsizing_product_ids ) {
        echo '<div class="upsizing-products">';
        echo '<h2>Upsizing Products</h2>';
        echo '<ul>';

        foreach ( $upsizing_product_ids as $upsizing_product_id ) {
            $upsizing_product = wc_get_product( $upsizing_product_id );
            if ( $upsizing_product ) {
                echo '<li><a href="' . esc_url( get_permalink( $upsizing_product_id ) ) . '">' . esc_html( $upsizing_product->get_name() ) . '</a></li>';
            }
        }

        echo '</ul>';
        echo '</div>';
    }
}

// Hook the function to display upsizing products on the product page
add_action( 'woocommerce_single_product_summary', 'ts_display_upsizing_products', 25 );


// Add meta box to product edit page
add_action( 'woocommerce_product_options_related', 'ts_woocom_linked_products_data_custom_field' );

// Save custom field data
add_action( 'woocommerce_process_product_meta', 'ts_woocom_linked_products_data_custom_field_save' );

Output

When an admin visits the product data page and clicks on the ‘Linked Products’ tab, a custom field labeled ‘Upsizing Products’ will be displayed. The admin can enter the products they want to highlight as product recommendations on the product page. Lets consider laptop as the main product and the admin enters these product accessories such as wireless mouse, laptop cooling pad, USB-C docking station in the upsizing products field.

The products listed in the upsizing product field will be displayed prominently on the product page, providing additional options for customers to consider right above the “Add to Cart” button.

To conclude, we’ve demonstrated how to add custom fields to the admin section of the ‘Linked Products’ tab. Similarly, you can also add custom fields for variations and dynamically display the corresponding message based on customer selections on the frontend.