WordPress Plugin in Elementor

Before you start

• The Simplio3D WordPress plugin, version 2.0.3 or newer, connected to your account — see WordPress Plugin. Earlier versions accept fewer shortcode settings.
• The plugin in Simplio3D v3 mode. New installs start in it; a site updated from the earlier plugin switches in WordPress → Simplio3D → Migration.
• A published project: Share dialog → share link on, no password. If you restrict domains, add your website’s domain.
• Elementor. The free version is enough.
• For Add to Cart: WooCommerce and a simple product with a price.

The five shortcodes

Step 1: Copy the shortcodes from the block editor

Option ids aren’t shown in Simplio3D, so the quickest way to get every id — and every setting — is to set the page up once with blocks and copy the result.

1. 1In WordPress, open Simplio3D → Account & Settings → “New page: Viewer + sidebar”. This creates a draft page with every block in place.
2. 2Select the Viewer, click “Select project” and choose your project. The other blocks take the same project.
3. 3Select each Simplio3D Options block and choose its option. Add more Options blocks until every option you want is there, and change any block settings you like — layout, labels, button text. Save the draft.
4. 4Select a block, open its settings → Simplio3D advanced → “Copy shortcode”. The shortcode includes every setting you changed, so it shows exactly what the block shows.

Step 2: Build the layout in Elementor

1. 1Open the page with “Edit with Elementor” and add a two-column container (about 60 % / 40 %).
2. 2Search the Elements panel for “Shortcode”, drag it into the left column and paste the Viewer shortcode. The 3D view appears in the editor preview.
3. 3In the right column, add one Shortcode widget per option, then one each for Price, Summary and Submit / Add to Cart.
4. 4Publish and open the page. Change an option: the 3D view, price and summary update together.

Step 3: Add to Cart (WooCommerce)

In the block editor, choosing a product in the Add to Cart block also links it to your project. A shortcode can’t do that, so link the product yourself:

1. 1In WordPress, go to Products and edit a simple product with a regular price.
2. 2In Product data → Simplio3D, choose your project and set Cart price to “Simplio3D calculated price (verified server-side)” — or keep the product’s WooCommerce price. Click Update.
3. 3Note the product id: hover over the product in the Products list (“ID: 123”).
4. 4Use it in the widget: [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"].

Useful settings

Add these inside a shortcode. Type straight quotes "…": quotes copied from Word, Google Docs or Slack can turn curly, and WordPress then ignores the setting.

• Set the viewer’s height on desktop and phones

  height="620px" mobile_height="400px"

• Show a product without controls (hero section)

  toolbar="hide" ar="off" auto_rotate="on"

• Show the full Simplio3D configurator in one widget (no option ids needed)

  display="hosted"

• Show an option as a dropdown, list or text buttons (where its type allows it)

  layout="dropdown" (or list, buttons)

• Fit more thumbnails in a row

  columns="4" thumbnails="small"

• Show the price before tax, as in the WooCommerce cart

  tax_display="exclude"

• Let the shopper choose the quantity, then go to the cart

  quantity_mode="selector" after_add="cart"

• Rename the quote button

  button="Request a quote"

Styling

• Each Shortcode widget’s Advanced tab in Elementor sets its margin, padding, background, border and responsive visibility.
• The blocks use the page’s text colour and font. Set the accent colour (selected choice, buttons) in Appearance → Customize → Additional CSS, or in Elementor Pro’s Custom CSS. Classic themes such as Hello Elementor get a near-black accent until you do.
• To style one widget only, add class="my-finish" to its shortcode and target .my-finish.

If something doesn’t work