Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search