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.
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
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.
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.
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.
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
Change pop up size, width, height etc.
This one is more personal preference, but I find using these settings work best, especially on larger screens.
Change size of Design Grid
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.
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 6 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
5 Comments
Halil İbrahim Kırtay posted almost 2 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?
https://www.hizliresim.com/7szjcns
0 Votes
Jim Kulakowski posted over 2 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.
Attachments (2)
add-to-cart-....png
252 KB
dialog-box.png
24.6 KB
0 Votes
Keith Marron posted over 4 years ago
Awesome work!! Anyone know some CSS to change the colour of the background of the main page?
0 Votes
Sabrina Easley posted over 4 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 6 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