Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


Designer Doesn't Load all Subcategories


in my use case I am going to create a great hierarchy of design categories. For example, I created a category "Emblem" with the subcategories "Ball Sport" and "Recreational Sport" (and many others).


For some product view, I've chosen the main category "Emblem" for design selection in the customizer definitions.


However, the user can only see and select designer from the interim sub cagegory "Ball Sport":


This looks definitively like a bug. Can someone support or give me an introduction into the JS code (about 18k LOC...) so I can fix it on my own?


Thomas Kellermeier

PS: I saw the following thread but don't understand the reasoning why this should be intended.

1 person has this question

Has there been any resolution to this?

I added a JS script to my theme which would catch the $.fn.click event and avoids this bug. In general, FPD triggers the element if there is only one which I just aborted. If you like, I can share my script with you.

Please post your script here, I'd like to apply it until this gets fixed. I hope radykal would fix this in the future versions. I have encountered this same issue in latest version also.

Over the time, I enhanced my script with some more custom logic so you may not need everything. The basic logic is to catch the click if (arguments.length == 0 && this.hasClass('fpd-category')) and if there was already a click just before (or FPD tries to click everything at once so this.length > 1).

I also left my logic for showing a title in the view button in case you want to use it :)


jQuery(function ($) {

var _oldClick = $.fn.click;

var isCategoryClickBlocked = false;

var fpdTopDesigns = (window.fpdDesignsJSON || []).map(function (x) {

return x.title;


// Overwrite the JQuery click event to inject custom logic

$.fn.click = function () {

var clickedThis = this;

// If arguments exist, this call defines the click event and shouldn't be blocked

// Don't block a click on the uppermost design category, so we already start within this category

if (

arguments.length == 0 &&

this.hasClass("fpd-category") &&

fpdTopDesigns.every(function (x) {

return x != clickedThis.text();


) {

// After clicking the first design category, block further calls (FancyProductDesigner.js:11882)

// Also avoid a click event triggered on all visible categories at once

if (isCategoryClickBlocked || this.length > 1) {


"Block automatic click on design category",






} else {

isCategoryClickBlocked = true;

setTimeout(() => {

isCategoryClickBlocked = false;

}, 200);



const returnValue = _oldClick.apply(this, arguments);

return returnValue;


// Add a label on each view button with the text from the tooltip

$(document.body).on("productCreate", medOnViewCreated);

function medOnViewCreated(event, fpdViewInstance) {

const $designer = $(event.target);

const $views = $designer.find(".fpd-views-selection .fpd-item");

$views.each(function (i, tooltip) {

if ($(tooltip).find(".fr-fpd-view-label").length) return;


'<span class="fr-fpd-view-label">' +

fpdViewInstance[i].title +










In some cases with expected a conflict with some other themes and the "Lazy Load" feature in our plugin. Just disable "Lazy Load" in the advanced settings of FPD.

@Thomas Kellermeier  Thank You So Much!!!! this fixed my issue, even using DIVI theme - just stuck it in the theme options code section and automagic goodness!

Login or Signup to post a comment