Not sure how to get your product configurator displayed on your product page with Elementor or other page builders? In this post we will share a quick get started guide on how to get your configurator displayed on your custom product page template 1. Customize WooCommerce Single Product Page Template First we will tell you how to display the configurator on a default WooCommerce single product page template 1. Use the default product page template By default, WooCommerce uses the Single Product Page template for the products display If you are selling configurator products only, or the configurator is the only product in your store, you can customize the default Single Product Page template. We will show you how it is done in Elementor. If you have other page builder, the steps should be quite the same actually. Go to Templates > Theme Builder and edit the Single Product template
Remove the default WooCommerce blocks and add in the shortcode block. Enter the shortcode: and hit Publish
Make sure your shortcode block is contained by a section that is full width, or is the top level element:
Now your configurator should show up on the product page template. 2. Create custom page template for the configurator If you are selling other (regular) products as well, you may want to create a new custom template for the configurator product page With page builders you can create your own templates as well to be used in certain conditions. You can create a new single product template in Elementor by following these 4 steps. First go to Templates > Theme Builder > Single Product > Add New
From the dropdown choose Single Product, give it a name, and click Create Template. Choose the Shortcode block and enter the Staggs configurator shortcode: Optionally add in more elements underneath the shortcode and click Publish. Set the display condition to display this template when product is equal to the configurator product or equal to the configurator product category Click to learn about conditions. 2. Customize Regular Page Template You can also display the configurator with a shortcode on a regular page Simply edit the page you like and use the Shortcode block again. Enter the shortcode: Click here to find out which other shortcodes you can use Make sure the shortcode block is full width so the Staggs configurator template has enough room to breathe Finally, save the page (template) And that concludes this article. If you still have trouble making the configurator visible on the page template, feel free to let us know.