I have some useful CSS for some of you...

Posted almost 7 years ago by Phil G

Post a topic
Phil G

 Okay, so after playing around a lot with the CSS function on Fancy Product Desiger settings, I've come up with some useful functions which work great for me. But I thought I would share them, I'll explain each function and what it does, and you are free to use and edit as you wish. To use this code, navigate to "Fancy Product Designer > UI & Layout Composer > Custom CSS"

This code will ONLY run on pages running the UI layout you are using and ONLY on pages where the FPD is active.

Blue Design button - stands out more.

.fpd-blue-btn {
    background: #7cafdb;
    color: #fff;
    padding: 10px 10px;
    font-size: 19px;
    letter-spacing: 1.5px;
    text-align: center;

This code makes the "Design It" button a little bigger, and it spans to the width of the area; you can change this very easily. But, this was more to make the button a little more colourful and stand out a little more than the default.

Turn off the annoying thumbnail preview that comes up when highlighting a Design


.fpd-thumbnail-preview {display: none;}


Change pop up size, width, height etc.


.fpd-draggable-dialog {
    width: 350px;
    height: 450px;
    margin-top: 5px;
    background: #fff;
    left: calc(50% - 175px);
    top: calc(45% - 200px);
    min-width: 200px;
    min-height: 100px;
    border-radius: 2px;
    max-width: 100%;

 This one is more personal preference, but I find using these settings work best, especially on larger screens.

Change size of Design Grid

.fpd-grid.fpd-padding > .fpd-item > picture {
    top: 15px;
    left: 20px;
    right: 20px;
    bottom: 10px;


Make the "Add to Cart" button stay in the top right corner of the page when scrolling.

I personally use this code, and chose to have it presented on EVERY page where the FPD is active. This stops customers having to scroll ALL the way down to find the "Add to cart" button, instead using this - it will be presented at the top right of the page. On mobile devices, it appears in the center.

.quick-view-popup .product-info .button, .single-product-page .product-info .button {
    float: left;
    position: fixed;
    top: 20px;
    right: 10px;


If you guys have any questions, or would like some more codes, let me know and I'll be sure to try and help out.

0 Votes


Stathis K posted almost 7 years ago Best Answer

Excellent Phil! Thank you!

Do you do freelancing work? I need someone to setup my FPD settings and 30-40 products! :) 

0 Votes


Sorted by

Halil İbrahim Kırtay posted about 3 years ago

Hello sir, I am using designs as lightbox. But when I used it as a lightbox, I couldn't preview the design. How can I view the preview?


0 Votes


Jim Kulakowski posted over 3 years ago

Any idea how I can change the color of the text dialog that pops up in the bottom-left corner of the screen when adding an item to my cart? (See attached image: dialog-box.png

The dialog only appears after executing the add-to-cart method in Woocommerce. I cannot use the Chrome dev tools to identify the selector while the page is transitioning and it does not stay on the screen long enough for me to search through the DOM elements.

I see where I can change the text for this element under Fancy Product Designer > Settings > Labels > Woocommerce > Add To Cart. (See attached image: add-to-cart-field.png) However, there does not appear to be any styling settings associated with it.

Any help would be greatly appreciated.

0 Votes


Keith Marron posted over 5 years ago

Awesome work!! Anyone know some CSS to change the colour of the background of the main page?

0 Votes


Sabrina Easley posted almost 6 years ago

Phil you da man!!!! I was looking everywhere on how to disable the preview in designer!!! Thank you so much!

0 Votes


Stathis K posted almost 7 years ago Answer

Excellent Phil! Thank you!

Do you do freelancing work? I need someone to setup my FPD settings and 30-40 products! :) 

0 Votes

Login or Sign up to post a comment