CODEWITHSUNDEEP
phpjquerywoocommerceshortcodecustom-taxonomy
joy
joy

Reputation: 101

Make a dropdown for a WooCommerce taxonomy like product tags

I have found this post (Make tag show as dropdown in woocommerce) that gets part of this function in place, but the output is incorrect. When using this snippet, the results output only post tags instead of product tags.

<label><?php _e('Tags'); ?></label>
<form action="<?php bloginfo('url'); ?>/" method="get">
    <div>
        <?php
        $args = array(
            'taxonomy' => 'product_tag', // Taxonomy to return. Valid values are 'category', 'post_tag' or any registered taxonomy.
            'show_option_none' => 'Select tag',
            'show_count' => 1,
            'orderby' => 'name',
            'value_field' => 'slug',
            'echo' => 0
        );
        $select = wp_dropdown_categories( $args );
        $select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
        echo $select;
        ?>
        <noscript><div><input type="submit" value="View" /></div></noscript>
    </div>
</form>

The current snippet results in this output: https://www.website.com/?cat=books It should result in: https://www.website.com/product-tag/books/

Upvotes: 1

Views: 1070

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253784

You can build a custom dropdown for any WooCommerce product taxonomy as a shortcode that can be used everywhere, this way:

add_shortcode( 'product_tax_dropdown', 'wc_product_taxonomy_dropdown' );
function wc_product_taxonomy_dropdown( $atts ) {
    // Attributes
    $atts = shortcode_atts( array(
        'hide_empty'   => '1', // or '0'
        'show_count'   => '1', // or '0'
        'orderby'      => 'name', // or 'order'
        'taxonomy'     => 'product_tag',
    ), $atts, 'product_tax_dropdown' );

    global $wp_query;

    $taxonomy      = $atts['taxonomy'];
    $taxonomy_name = get_taxonomy( $taxonomy )->labels->singular_name;

    ob_start();

    wp_dropdown_categories( array(
        'hide_empty' => $atts['hide_empty'],
        'show_count' => $atts['show_count'],
        'orderby'    => $atts['orderby'],
        'selected'           => isset( $wp_query->query_vars[$taxonomy] ) ? $wp_query->query_vars[$taxonomy] : '',
        'show_option_none'   => sprintf( __( 'Select a %s', 'woocommerce' ), $taxonomy_name ),
        'option_none_value'  => '',
        'value_field'        => 'slug',
        'taxonomy'   => $taxonomy,
        'name'       => $taxonomy,
        'class'      => 'dropdown_'.$taxonomy,
    ) );

    ?>
    <script type='text/javascript'>
        jQuery(function($){
            var select = '.dropdown_product_tag',
                taxonomy = '<?php echo $taxonomy; ?>';

            function onProductTaxChange() {
                if ( $(select).val() !=='' ) {
                    location.href = '<?php echo esc_url( home_url() ); ?>/?'+taxonomy+'='+$(select).val();
                }
            }
            $(select).change( onProductTaxChange );
        });
    </script>
    <?php

    return ob_get_clean();
}

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

USAGE

1) as a normal shortcode (in the Wordpress text editor or widgets):

[product_tax_dropdown];

2) In PHP templates, pages and functions shortcode:

echo do_shortcode('[product_tax_dropdown]');

Upvotes: 1

Related Questions