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 Blog Post
