How to install the Complete 3D viewer on WooCommerce

Before you start

In Complete Dashboard, open “My products”, choose the piece and copy the embed code:

<iframe src="https://www.completemagazine.com.br/ar/PRODUCT-CODE" width="100%" height="520" frameborder="0" allow="xr-spatial-tracking; fullscreen; camera" style="border:0;border-radius:12px"></iframe>

Step by step

1. 01

   Open the product

   In the WordPress dashboard, go to Products and open the product that will get the 3D viewer.

2. 02

   Use the editor’s code mode

   In the product description, switch from the Visual tab to the Text tab. In Visual mode, the editor may alter the code when you paste it.

3. 03

   Paste the code

   Paste the embed code where the viewer should appear. If you would rather have it near the price, use the product short description, which most themes display beside the gallery.

4. 04

   Update and check

   Click Update, open the product page on a computer and on a phone, and tap the augmented reality button to confirm that the camera opens.

The width of the code follows the column it is pasted into, and the height can be changed in the code itself by editing the height value. In the short description, which is usually a narrow column next to the photos, a lower height keeps the price and the buy button in view without scrolling.

The permission that strips the iframe

WordPress only keeps iframes in the description when the person saving the product has the unfiltered HTML permission. In a typical store, administrators have it; other roles may not, and on multisite installations it is usually restricted. When the permission is missing, the code is removed on save, without warning: the description comes back without the viewer and the rest of the text stays intact. Because nothing signals the problem, it is easy to mistake it for a faulty code.

If this happens, ask a store administrator to paste the code, or to adjust the permission for the role that manages products. Security plugins can also filter iframes; in that case the problem is not the Complete address but the plugin’s general rule, which needs to allow iframes in product descriptions.

To add it to every product

With many products, pasting code into each description becomes tedious. In that case, the store developer can create a custom field on the product that holds only the piece’s code, the part after /ar/, and a snippet in the theme that builds the iframe next to the gallery whenever the field is filled in. The address, width and permissions should match the Dashboard code. Once that is in place, adding a new product in 3D comes down to generating the piece in the Dashboard and pasting its code into the field, without touching the theme again.

If something does not appear

If the viewer disappears after saving, it is the permission described above. If it appears blank, check that the whole code was pasted. If the piece rotates but augmented reality does not open, check the allow attribute and test on the phone itself. Caching plugins may show the old version of the page for a while; clear the cache before concluding that it did not work.