How to style FacetWP checkbox hierarchy results using jQuery

facetwp checkbox style with jquery
Here’s an example facet with extra indention applied.

I recently invested many hours trying to target and style a FacetWP taxonomy facet that uses hierarchy for display. It should be noted that you can use straight up CSS for some styling (and should use css wherever possible), but sometimes you need javascript to target parent elements and such.

I thought I’d document the solution here and, perhaps, save you some time in case you get stuck in a similar rabbit hole. Just update the targeted styles and add the following jQuery script via whatever method you prefer (fwiw, I added the script to my functional plugin and loaded it via wp_enqueue_script()):

jQuery(document).ready(function($) {
	(function($) {
		$(document).on('facetwp-loaded', function() {
			
			$( ".facetwp-depth.visible .facetwp-checkbox"  ).parent().parent().css( "text-transform", "uppercase" );
			$( ".facetwp-depth.visible .facetwp-checkbox"  ).css( "text-transform", "none" );
			
			
			/* Use the "!important" CSS override */
			
			$( '.facetwp-checkbox' ).each(function () {
			    this.style.setProperty( 'font-weight', 'bold', 'important' );
			});
			
			
		});
	})(jQuery);
})

Is this helpful?

Posted in

Toby Cryns

Toby Cryns is a freelance CTO, expert WordPress consultant, and teacher.

He offers free advice to improve your freelance biz.

He also publishes small droppings every now and then to twitter.com/tobycryns and twitter.com/themightymo

Follow Toby's contributions on Github and WP.org.