Advanced Topics
13 articles
Using FPD with page builder plugins like Elementor
If you are using the Page Builder plugins to customize your WooCommerce product page, you will need to use the shortcode [fpd] to position FPD, as the...
Moving your Website to another domain
If you move your site to another domain or the protocol (http or https) has been updated, image sources can easily be reset by entering your old domai...
Show Share Buttons with Shortcode
If you want to display the share buttons via a shortcode, you only need to add this shortcode in your page: [fpd_share] Find more about Shortcodes in ...
Displaying and Positioning Modules and Actions via Shortcodes
Action buttons, as well as modules, can be positioned freely on a product page through the use of shortcodes. An example of this can be seen in the bu...
Giving access to other roles
By default only the administrator can view the backend of FPD in WordPress. FPD comes with an own capability "edit_fancy_product_desiger". You can ass...
Developers
API Check if post/product has the product designer enabled. global $post; if( is_fancy_product($post->ID) ) { echo "This is a fancy product."; } CSS c...
Controlling the allowed addable media types in views
You can easily control which media types can be added in the views of your Fancy Product. Go to Fancy Products → Edit View in Product Builder → View O...
Sync relevant design images in multiple views
You now have the capability to seamlessly sync or replace various design images across multiple views. For instance, when a user chooses a design from...
Using text link groups to sync the content between text layers
In certain instances, it may be desirable to synchronize the content of text layers. This ensures that when the user modifies the content of one text ...
Define specific design categories per product or product view
Learn basics about design elements and how to add them to Fancy Product Designer, add them to categories, and enable specific settings for design cate...
Using an overlay image as mask
In this DEMO, we have employed a particular technique. We have fashioned an image that mirrors the dimensions of the stage (canvas), albeit with a tra...
Using an SVG as mask for a view
SVG vector graphics can be used as masks for views. Please note, that the SVG mask can currently only contain one path or combined paths, that will be...
Custom CSS
Reason Image Location Snippet I want to hide the toolbar completely UI-Composer .fpd-element-toolbar-smart{display:none!important} If you're using the...