FacetWP – use images for checkbox options

mgibbs189

{{gist file=”test.js” lang=”javascript”}}
<script>
(function($) {
$(document).on(‘facetwp-loaded’, function() { // on each refresh

$(‘.facetwp-facet-style .facetwp-checkbox’).each(function() { // foreach “style” checkbox option
var val = $(this).attr(‘data-value’); // grab its “data-value” attribute

if (‘black’ == val) { // is the value “black”?
var img = ‘http://your/path/to/black.png’;
}
else if (‘white’ == val) { // is it “white”?
var img = ‘http://your/path/to/white.png’;
}
// add more “else if” statements as needed

$(this).html(‘<img src=”‘ + img + ‘” />’); // replace checkbox content with the image
});
});
})(jQuery);
</script>
{{/gist}}