Important: FPD Support Update

As of March 1, 2025, direct support for Fancy Product Designer has been discontinued. Only customers with an active support license will continue to receive assistance. Our team is now fully dedicated to Chamevo, the next-generation product customization platform built on the foundations of FPD. For help, use the chatbot available on fancyproductdesigner.com or chamevo.com.

Displaying and Positioning Modules and Actions via Shortcodes

Updated April 28, 202516,226 views7 found helpful

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 business card demo. The first step in adding the desired shortcodes is to open the Shortcode Builder. Find the Shortcode Builder in Fancy Product Designer → Utilities.


Click on the Shortcodes button to open the Shortcode Builder:




Via the dropdown menus on the right, you can now select the different actions and modules, the corresponding shortcode will be generated and displayed on the left. For actions, there are three different Layout options available icon tooltip, icon text, and text only:





For Modules, CSS can be added to the wrapper by entering, for example, height and width.


To integrate an action or module into a product page via the shortcode, you simply need to copy the generated shortcode and paste it in the appropriate position on your page.



To further customize the layout of a product page, for example, to move the summary to the left of the designer, please take a look at Customizing the layout of WooCommerce product pages



Default Shortcodes