ClemC

OK… jQuery, indeed, makes the life simpler 😀

jQuery( document ).ready( function( $ ) {
	$( '.widget_layered_nav' ).wrapAll( '<div id="layered-nav">' );
} );

This works perfectly fine for me.

I still can css from the first or last widget ID but each of them change depending of the current archive page. For exemple in transport category, the first layered nav widget will be woocommerce_layered_nav-3, while on bed category, the first will be woocommerce_layered_nav-6, etc… Not very elegant and dynamic…

But if even you can’t figure out how I can accomplish it using PHP, looks like I have to try it with jQuery.

Will add the jQuery snippet when I’ve done it to help readers in futur.

Also would be very nice if the group of dynamic layered nav widgets would be implemented by defaut in 1 separate element from other aside elements in the sidebar.

The problem was with the line where I search the form. It should be this:

form = $(this).closest(‘form’);
parent() returns the parent (and only if it matches the selector specified). On the other hand, closest() searches all ancestors and return the first match.