Add a custom multi-select field to admin product options settings in Woocommerce

Question

I have followed this answer How to add more custom field in Linked Product of Woocommerce to add a custom select field to my Linked Product screen in Woocommerce. This new field is meta key is subscription_toggle_product.

It's working fine, but once you have selected a product, you can't delete it (there is no "Empty" option or cross symbol). I haven't got a clue how I can allow the selection to be deselected. I've tried adding an <option> with an empty value, but it hasn't worked.

Here is my code:

// 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;
    $product = wc_get_product( $post->ID );
?>
<p class="form-field">
    <label for="subscription_toggle_product"><?php _e( 'Subscription Toggle Product', 'woocommerce' ); ?></label>
    <select class="wc-product-search" style="width: 50%;" id="subscription_toggle_product" name="subscription_toggle_product" 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_id = get_post_meta( $post->ID, '_subscription_toggle_product_id', true );            

            if ( $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>
</p>

<?php
}

// Function the save the custom fields
function woocom_linked_products_data_custom_field_save( $post_id ){
    if (isset($_POST['subscription_toggle_product'])) {
        $product_field_type =  $_POST['subscription_toggle_product'];
        update_post_meta( $post_id, '_subscription_toggle_product_id', $product_field_type );
    }
}

LoicTheAztec · Accepted Answer · 2018-11-06 16:57:13Z

4

This kind of select field only works with a defined multiple attribute and work with an array of values. so you can't use it for a simple ID. If you add to your select field multiple="multiple" attribute it will work.

Also since Woocommerce 3 things have changed:
- There are better hooks to save the data.
- You can now use CRUD Objects and related methods.

The following code will work for multiple product IDs (an array of products IDs):

// Display a custom select field in "Linked Products" section
add_action( 'woocommerce_product_options_related', 'display_linked_products_data_custom_field' );
function display_linked_products_data_custom_field() {
    global $product_object, $post;
    ?>
    <p class="form-field">
        <label for="subscription_toggle_products"><?php _e( 'Subscription Toggle Products', 'woocommerce' ); ?></label>
        <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="subscription_toggle_ids" name="_subscription_toggle_ids[]" 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 = $product_object->get_meta( '_subscription_toggle_ids' );

                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>
    </p>
    <?php
}

// Save the values to the product
add_action( 'woocommerce_admin_process_product_object', 'save_linked_products_data_custom_field_value', 10, 1 );
function save_linked_products_data_custom_field_value( $product ){
    $data = isset( $_POST['_subscription_toggle_ids'] ) ? array_map( 'intval', (array) $_POST['_subscription_toggle_ids'] ) : array();
    $product->update_meta_data( '_subscription_toggle_ids', $data );
}

Code goes in function.php file of your active child theme (active theme). Tested and works.

edited Nov 6, 2018 at 16:57

answered Nov 6, 2018 at 15:42

LoicTheAztec

257k25 gold badges403 silver badges451 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sarah Over a year ago

Are you saying that the deselect is only possible if it is a multiple field? Because, apart from the missing deselect, the field is otherwise working and saving as a single select. It is important that on our site we restrict the selection to only one product, so for us it can't be a multiselect.

LoicTheAztec Over a year ago

@Sarah, Yes the deselect only works with the "multiple" attribute… so you should better use a normal select field (that uses selectWoo or select2), because it will not work just for one restricted value. This select field kind is made for multiple values usage (without restrictions).

Juraj Over a year ago

@LoicTheAztec I have followed all instructions and I'm getting output in frontend like "Array". I only wanted to display something like loop products in archive with images and prices...

Savan Dholu Over a year ago

@LoicTheAztec How to show this selected product on the product page.?

Sarah Over a year ago

@SavanDholu In my example, I save the subscription_toggle_product_id in the product's post meta, so to get the value I do $id = (int) get_post_meta( $product_id, '_subscription_toggle_product_id', true); and then use that ID however you want to load the product etc.

|

Collectives™ on Stack Overflow

Add a custom multi-select field to admin product options settings in Woocommerce

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related