Show attribute name in active filters

Hello,

Is it possible to share your store URL? If it’s not a live site, you can share a screenshot of the page where you want to show your attribute name – I recommend?https://snipboard.io?for easily sharing screenshots – please follow the instructions on the page, then paste the URL in this chat. It works with Chrome, Firefox, Safari, and Edge.

Hi

Thanks for your reply. I managed to solve my issue over the weekend via jQuery, but I still find it strange that this doesn’t work out of the box.

This was what I was trying to accomplish (the underlined texts in the “active filters on products “FILTERS” widget):

https://snipboard.io/JfkQE8.jpg

This is how I solved it:

jq( document ).ready(function() {	    
    var label = [];
	    
    <?php
           // QUERY ALL TAXONOMIES
           $args = array(
                      'public'   => true,
                      '_builtin' => false
   
            ); 

            $output = 'objects'; // or objects
            $operator = 'and'; // 'and' or 'or'
            $taxonomies = get_taxonomies( $args, $output, $operator ); 
            if ( $taxonomies ) {
                foreach ( $taxonomies  as $taxonomy ) {
                    $attr_sing_name = $taxonomy->labels->singular_name;
                    
                    // GETTING THE TRANSLATED LABEL NAME (WPML)
                    $attr_label = apply_filters('wpml_translate_single_string', $attr_sing_name, "WordPress", "taxonomy singular name: " . $attr_sing_name);

                    ?>
                    /* ADDING TO A JS NAMED ARRAY FOR LATER */
                    label["<?php echo strtolower($attr_sing_name); ?>"] = "<?php echo $attr_label; ?>";
                    <?php
                }
            }
	    ?>

            /* GETTING ALL li OBJECTS WITH A CLASS THAT CONTAINS "chosen-" */
	    
	    $('li[class*="chosen-"]').each(function (index) {
	       var obj = $(this);
	       
	       var classes = obj.attr('class');
	       var classList = classes.split(" ");
	       var attName = "";

               /* GETTING THE ATTRIBUTE SINGULAR NAME FROM THE CLASS LIST */	       
	       for (var iloop = 0; iloop<classList.length; iloop++) {
	           var cname = classList[iloop].split("-");
	           if (cname.length == 2) {
	               attName = cname[1];
	           }
	       }
	       
	       attName = attName.toLowerCase();
	       attNamePrint = label[attName] + ": ";
	       
           /* NOW GETTING ALL THE anchors INSIDE THE CURRENT li OBJECT */
    	   obj.find('a').each(function (i) {
    	        var writehtml = "";
    	        var val = $( this ).text();

                /* ADDING THE attribute name IN FRONT OF THE EXISTING VALUE */
  	        writehtml = attNamePrint + val;
        
    	        $(this).html(writehtml);
    	   });    	   
    });
    // ********

});

• This reply was modified 3 years, 11 months ago by mcuypers.
• This reply was modified 3 years, 11 months ago by mcuypers.
• This reply was modified 3 years, 11 months ago by mcuypers.

Hello,

Thank you for the update and sharing your solution! At this moment, core WooCommerce doesn’t show attribute names out of the box. It would be great to have you add your ideas to the Ideas Board, which is where developers go to look for future plugin features and improvements.

I’m marking this thread as closed. If you have any other questions, please feel free to open a new topic.