Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


Hexidecimal Color Names do not display when placing color menu "after short description"

Can you please fix this in the next update? 


This is not a bug, its done with purpose. As some custom names could be too long for color items, I am thinking about to use the color names only in a tooltip in next update.

Okay, that sounds like a good idea. I will probably just try to hide the hex codes via CSS for now.


Yes please, the tooltip seems like a good idea. The Hexadecimal value won't help most users anyway.

So I added the Tooltips myself.

I use FPD Plus Color Selection and don't want the Product Designer Color Selection (its buggy, confusing to users).

But i want Color Titles to be shown as Tooltips in the FPD Plus Color Selection.

So first i disable the first view, first layer (which is my color layer). Then I add Tooltip titles to the Colors and Update the Tooltip Framework.

I hope somebody finds this useful.


jQuery( document ).ready( function( $ ) {

 // FPD fixes after init
 $selector.on('productCreate', function(evt, viewInstance) {
  // lock layer for fist view, first layer
  fancyProductDesigner.getElements(0)[0].evented = false;
  // Add color names to color selection items
  var $colors = $(fancyProductDesigner.mainOptions.colorSelectionPlacement);
  $colors.children().each(function() {
   var hex = $(this).children().first().text();
   var tooltipTitle = fancyProductDesigner.mainOptions.hexNames[ hex.replace('#', '') ];
   tooltipTitle = tooltipTitle ? tooltipTitle : hex;
  // Activate the Tooltips
  FPDUtil.updateTooltip( $colors );


That is a great idea. would you mind telling me how you would implement that code? thank you


@Gregory St. Gelais
Make sure this script is loaded after all the other scripts (in this case fpd-plus and jquery-fpd)
So for WP, add this to your functions.php:

// include after fpd-plus script
wp_register_script('myscript', get_stylesheet_directory_uri() . '/js/myscript.js', array('fpd-plus','jquery-fpd'), '1.0', true);

Obviously create the file /js/myscript.js in your template dir. and fill it with the snippet i posted before.
I hope that works for you.
Thank You very much, i got that to work. But i still have the hex colors under the color swatches, which i know will confuse people. is there a way to get rid of those??


with a hack like this:


.fpd-color-selection.fpd-custom-pos > div > .fpd-label{
    display: none!important;




Thank you again, it didnt come up initially, but when i refreshed the page it did. nice job!


Thanks Blasche for the contribution. I would like to know if this same snippet works to display the color names in shopping cart or if you can modify it, thanks


For prefefinded colors, yes.
For randomly picked colors, no. (you would have to name 16 Million colors)

Here is the FAQ:


Hi Blasche, thanks for replay, I recognize that you are very smart. 

Actually I have my color palette with color names , but they are not showing in cart. 

even, I would like to know how to put multiple views of the same custom product in cart for example: front, back and sleeve, do you have some idea?

Included in V1.1, now you can enable a tooltip to display the hex name.

Hi M Radykal

This does not work for the cart yet only for color palette. Color names still do not appear in the shopping cart, only the hex codes. 

What is the trick to activate them?

thanks for your help

Login or Signup to post a comment