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

Question

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

Answer 1

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.

Answer 2

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.