Custom dropdown list of terms as links (woocommerce, wordpress)

user_9047436 0
Viewed 215

I want to add a custom dropdown list of an attribute (in this case it's the brand), with the options lead to the attribute page as a link.

I got this working

add_filter('woocommerce_before_shop_loop','wc_reg_for_menus', 1, 2);
function wc_reg_for_menus() {
    $terms = get_terms( 'pa_marke' );
    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
        echo '<select>';
        foreach ( $terms as $term ) {
            echo '<option value="'.$term->name.'">'.$term->name.'</option>';
        }
        echo '</select>';
    }
}

And I think I somehow need to add this part

get_term_link( WP_Term|int|string $term, string $taxonomy = '' )

Thank you! Felix

dropdown woocommerce wordpress php
2 Answers

Your code works well for getting values for a specific taxonomy (attribute).
I only changed the get_terms function.

I also added some data attributes to get the taxonomy and slug of each term (option).

add_filter( 'woocommerce_before_shop_loop','wc_reg_for_menus' );
function wc_reg_for_menus() {

    $terms = get_terms( array(
        'taxonomy' => 'pa_marke',
        'hide_empty' => false,
    ));

    if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
        echo '<select id="shop_pa_marke">';
        foreach ( $terms as $term ) {
            echo '<option value="' . $term->name . '" data-taxonomy="' . $term->taxonomy . '" data-slug="' . $term->slug . '">' . $term->name . '</option>';
        }
        echo '</select>';
    }
}

Then you will need to use a jQuery script to redirect the user based on the chosen attribute option.

add_action( 'wp_footer', 'redirect_after_select_option' );
function redirect_after_select_option() {
    ?>
    <script type="text/javascript">
        jQuery( function($){
            $('#shop_pa_marke').change(function(){

                const url = window.location.href;
                const taxonomy = $(this).children("option:selected").data('taxonomy').replace('pa_','filter_');
                const slug = $(this).children("option:selected").data('slug');

                let urlParams = new URLSearchParams(window.location.search);
                urlParams.set(taxonomy, slug);
                window.location.replace( '?'+urlParams.toString() );

            });
        });
    </script>
    <?php
}

The code has been tested and works. Add it to your active theme's functions.php.

user_104471970

Thank you!

Just now I found a solution without jQuery, that works quite fine as well:



add_filter('woocommerce_before_shop_loop','wc_reg_for_menus', 1, 2);
function wc_reg_for_menus() {
     $terms = get_terms( 'pa_marke' );
 
if ( ! empty( $terms ) && ! is_wp_error( $terms ) ){
 
echo '<select onchange="location = this.value;">';
 
foreach ( $terms as $term ) {
 
echo '<option value="'.get_term_link( $term ).'">'.$term->name.'</option>';
}
 
echo '</select>';
 
}
}

Only after the new page loaded, the first option of the menu is selected again, but that´s ok for me, because it won't be displayed there later on.

user_90474360
Related