0

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>
3
  • 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. Jan 15 at 10:47
  • 1
    Select2 was solution. Tnx Jan 15 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. :-) Jan 15 at 17:53
0

Answer would be:

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/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;}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.