What could be easy way to modify source and to make that Select options searchable for attributes in product page? Something like while I typing, it suggest value.

<div id="product_attributes" class="panel wc-metaboxes-wrapper hidden">
<div class="toolbar toolbar-top">
    <span class="expand-close">
        <a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'woocommerce' ); ?></a> / <a href="#" class="close_all"><?php esc_html_e( 'Close', 'woocommerce' ); ?></a>
    </span>
    <select name="attribute_taxonomy" class="attribute_taxonomy">
        <option value=""><?php esc_html_e( 'Custom product attribute', 'woocommerce' ); ?></option>
        <?php
        global $wc_product_attributes;

        // Array of defined attribute taxonomies.
        $attribute_taxonomies = wc_get_attribute_taxonomies();

        if ( ! empty( $attribute_taxonomies ) ) {
            foreach ( $attribute_taxonomies as $tax ) {
                $attribute_taxonomy_name = wc_attribute_taxonomy_name( $tax->attribute_name );
                $label                   = $tax->attribute_label ? $tax->attribute_label : $tax->attribute_name;
                echo '<option value="' . esc_attr( $attribute_taxonomy_name ) . '">' . esc_html( $label ) . '</option>';
            }
        }
        ?>
    </select>
    <button type="button" class="button add_attribute"><?php esc_html_e( 'Add', 'woocommerce' ); ?></button>
</div>

What could be easy way to modify source and to make that Select options searchable for attributes in product page? Something like while I typing, it suggest value.

<div id="product_attributes" class="panel wc-metaboxes-wrapper hidden">
<div class="toolbar toolbar-top">
    <span class="expand-close">
        <a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'woocommerce' ); ?></a> / <a href="#" class="close_all"><?php esc_html_e( 'Close', 'woocommerce' ); ?></a>
    </span>
    <select name="attribute_taxonomy" class="attribute_taxonomy">
        <option value=""><?php esc_html_e( 'Custom product attribute', 'woocommerce' ); ?></option>
        <?php
        global $wc_product_attributes;

        // Array of defined attribute taxonomies.
        $attribute_taxonomies = wc_get_attribute_taxonomies();

        if ( ! empty( $attribute_taxonomies ) ) {
            foreach ( $attribute_taxonomies as $tax ) {
                $attribute_taxonomy_name = wc_attribute_taxonomy_name( $tax->attribute_name );
                $label                   = $tax->attribute_label ? $tax->attribute_label : $tax->attribute_name;
                echo '<option value="' . esc_attr( $attribute_taxonomy_name ) . '">' . esc_html( $label ) . '</option>';
            }
        }
        ?>
    </select>
    <button type="button" class="button add_attribute"><?php esc_html_e( 'Add', 'woocommerce' ); ?></button>
</div>

• taxonomy
• select

• 1 This is not something that’s offered by standard HTML or anything you can do just by tweaking this code. It will require a lot of JavaScript. You’d be better off just using a library like select2. Implementing that is not something specific to WordPress. – Jacob Peattie Commented Jan 15, 2022 at 10:47
• 1 Select2 was solution. Tnx – My display name Commented Jan 15, 2022 at 12:21
• 1 You should post your Select2 solution as an answer to your own question and accept it, that way if someone else is looking for a similar solution they can see what worked for you. That way your WPSE reputation will increase. :-) – Tony Djukic Commented Jan 15, 2022 at 17:53

1 Answer 1

Answer would be:

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/select2.min.js"></script>
<div id="product_attributes" class="panel wc-metaboxes-wrapper hidden">
<div class="toolbar toolbar-top">
<span class="expand-close">
<a href="#" class="expand_all"><?php esc_html_e( 'Expand', 'woocommerce' ); ?></a> / <a href="#" class="close_all"><?php esc_html_e( 'Close', 'woocommerce' ); ?></a>
</span>
<select name="attribute_taxonomy" class="attribute_taxonomy js-ao-select-options">
<option value=""><?php esc_html_e( 'Custom product attribute', 'woocommerce' ); ?></option>
<?php
global $wc_product_attributes;
$attribute_taxonomies = wc_get_attribute_taxonomies();
if ( ! empty( $attribute_taxonomies ) ) {
foreach ( $attribute_taxonomies as $tax ) {
$attribute_taxonomy_name = wc_attribute_taxonomy_name( $tax->attribute_name );
$label                   = $tax->attribute_label ? $tax->attribute_label : $tax->attribute_name;
echo '<option value="' . esc_attr( $attribute_taxonomy_name ) . '">' . esc_html( $label ) . '</option>';
}} ?>
</select>
<script>
jQuery(document).ready(function($){
$('.js-ao-select-options').select2();
});
</script>
<button type="button" class="button add_attribute"><?php esc_html_e( 'Add', 'woocommerce' ); ?></button>

After submiting from Select area, width getting smaller value, so I directly modified CSS (Plugin/Woocomerce/admin.css) to get it better, but usualy shouldn't be modified directly as I did. This part is responsable for width of Select area:

.select2-container .select2-selection--single .select2-selection__rendered{line-height:40px;padding-right:24px;width:500px;}