Enable select2 for wp_dropdown_categories dropdown in WooCommerce

user_13824850 0
Viewed 1224

I am creating an advance search form for my WooCommerce website and I am using wp_dropdown_categories() to display 2 WooCommerce product category dropdowns (filters).

Here is my code

add_shortcode( 'new_filter_search_shortcode', 'new_filter_search' );
function new_filter_search() { ?>
<form name="myform" method="GET" action="<?php echo esc_url(home_url('/')); ?>">
<?php if (class_exists('WooCommerce')) : ?>
<?php 
    if(isset($_REQUEST['product_cat']) && !empty($_REQUEST['product_cat'])) {
        $optsetlect=$_REQUEST['product_cat'];
    }
    else {
        $optsetlect=0;  
    }

    $args = array(
        'show_option_all' => esc_html__( 'Make / Model', 'woocommerce' ),
        'orderby' => 'name',
        'child_of' => 142,
        'hierarchical' => 1,
        'class' => 'cat',
        'echo' => 1,
        'depth' => 2,
        'show_count' => 1,
        'value_field' => 'name',
        'selected' => $optsetlect
    );
    $args['taxonomy'] = 'product_cat';
    $args['name'] = 'model';              
    $args['class'] = 'cate-dropdown hidden-xs';
    wp_dropdown_categories($args);  
    
    $args = array(
        'show_option_all' => esc_html__( 'Year', 'woocommerce' ),
        'orderby' => 'name',
        'child_of' => 69,
        'hierarchical' => 1,
        'class' => 'cat',
        'echo' => 1,
        'depth' => 2,
        'show_count' => 0,
        'value_field' => 'slug',
        'selected' => $optsetlect
    );
    $args['taxonomy'] = 'product_cat';
    $args['name'] = 'year';              
    $args['class'] = 'cate-dropdown hidden-xs';
    wp_dropdown_categories($args);
    
?>
<?php endif; ?>
        

<button type="submit" title="<?php esc_attr_e('Search', 'woocommerce'); ?>" class="search-btn-bg"><span><?php esc_attr_e('Search','woocommerce');?></span></button>
</form>
<?php }

Here is the screenshot enter image description here

enter image description here

I would like to enable select2 to my dropdown search, Please help.

jquery-select2 woocommerce wordpress php jquery
1 Answers

I have revisited a bit your code as for example in shortcode functions the content should always be returned and not echoed.

I have renamed the shortcode to something better, shorter… and enabled select2 for both dropdowns.

The function code:

add_shortcode( 'new_search', 'new_filter_search_shortcode' );
function new_filter_search_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'taxonomy'  => 'product_cat', // Product category taxonomy (by default)
    ), $atts ) );

    ob_start(); // Start buffering
    ?>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <form name="myform" method="GET" action="<?php echo esc_url(home_url('/')); ?>">
    <?php
     if (class_exists('WooCommerce') ) {
        if(isset($_REQUEST[$taxonomy]) && ! empty($_REQUEST[$taxonomy])) {
            $optsetlect = esc_attr($_REQUEST[$taxonomy]);
        } else {
            $optsetlect = 0;
        }

        $class = 'cate-dropdown hidden-xs';

        wp_dropdown_categories( array(
            'show_option_all'   => esc_html__( 'Make / Model', 'woocommerce' ),
            'orderby'           => 'name',
            'child_of'          => 142,
            'hierarchical'      => 1,
            'echo'              => 1,
            'depth'             => 2,
            'show_count'        => 1,
            'value_field'       => 'name',
            'selected'          => $optsetlect,
            'taxonomy'          => $taxonomy,
            'name'              => 'model',
            'class'             => $class,
        ) );

        wp_dropdown_categories( array(
            'show_option_all'   => esc_html__( 'Year', 'woocommerce' ),
            'orderby'           => 'name',
            'child_of'          => 69,
            'hierarchical'      => 1,
            'echo'              => 1,
            'depth'             => 2,
            'show_count'        => 0,
            'value_field'       => 'slug',
            'selected'          => $optsetlect,
            'taxonomy'          => $taxonomy,
            'name'              => 'year',
            'class'             => $class,
        ) );
    }
    $search_text = esc_html__('Search', 'woocommerce');
    ?>
    <button type="submit" title="<?php echo $search_text; ?>" class="search-btn-bg"><span><?php echo $search_text;?></span></button>
    </form>
    <?php
    // Enable select2 for both dropdowns
    if (class_exists('WooCommerce') ) {
    ?>
    <script>
    jQuery(function($){
        $('select#model').select2();
        $('select#year').select2();
    });
    </script>
    <?php
    wp_enqueue_script( 'select2' );
    }
    return ob_get_clean(); // return buffered content
}

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

USAGE: [new_search] or echo do_shortcode('[new_search]'); (inside PHP code).

user_37307540
Related