Это стандартный виджет категории товаров, модифицированный через js ну и плюс стили
скрипт там такой :
// Woocommerce Widget Toggle
(function(theme, $) {
theme = theme || {};
var instanceName = '__wooWidgetToggle';
var WooWidgetToggle = function($el, opts) {
return this.initialize($el, opts);
};
WooWidgetToggle.defaults = {
};
WooWidgetToggle.prototype = {
initialize: function($el, opts) {
if ($el.data(instanceName)) {
return this;
}
this.$el = $el;
this
.setData()
.setOptions(opts)
.build();
return this;
},
setData: function() {
this.$el.data(instanceName, this);
return this;
},
setOptions: function(opts) {
this.options = $.extend(true, {}, WooWidgetToggle.defaults, opts, {
wrapper: this.$el
});
return this;
},
build: function() {
var self = this,
$el = this.options.wrapper;
$el.parent().removeClass('closed');
if (!$el.find('.toggle').length) {
$el.append('<span class="toggle"></span>');
}
$el.find('.toggle').click(function() {
if ($el.next().is(":visible")){
$el.parent().addClass('closed');
} else {
$el.parent().removeClass('closed');
}
$el.next().stop().slideToggle(200);
theme.refreshVCContent();
});
return this;
}
};
// expose to scope
$.extend(theme, {
WooWidgetToggle: WooWidgetToggle
});
// jquery plugin
$.fn.themeWooWidgetToggle = function(opts) {
return this.map(function() {
var $this = $(this);
if ($this.data(instanceName)) {
return $this.data(instanceName);
} else {
return new theme.WooWidgetToggle($this, opts);
}
});
}
}).apply(this, [window.theme, jQuery]);