AR for WooCommerce – 3D Product Viewer & Augmented Reality

AR for WooCommerce adds a 3D product viewer and augmented reality to your WooCommerce product pages. Upload a GLB model for the 3D viewer and Android AR, upload a USDZ model for iOS AR, and shoppers can rotate the product, zoom in, and place it in their own room straight from the product page. No app download, no account, no external service.

A product photo only shows one angle. A shopper looking at a chair, a lamp, a pair of shoes or a piece of furniture usually wants to know how big it really is and what the back looks like. Augmented reality answers that on their own phone, in their own space, before they buy. Stores that let people check size and scale up front tend to get fewer “this was not what I expected” returns.

Quick Links

• View Free Plugin Demo
• View Pro Plugin Demo
• Full Documentation
• Free vs Pro Comparison
• Upgrade to Pro

What you get in the free version

• 3D product viewer on the WooCommerce product page, with a Photos / 3D View toggle in the gallery so the viewer sits beside your normal product images.
• Native AR on mobile. Scene Viewer opens on Android, AR Quick Look opens on iOS. Both are built into the phone, so there is nothing for your customer to install.
• Per-product model uploads. Attach a .glb file and a .usdz file to any product from the product edit screen.
• Simple and variable product support, with one model per product.
• View in AR button that appears only on devices that can actually run AR.
• Theme matching. Set your own active background and text colours for the Photos / 3D toggle so it does not look bolted on.
• Preload poster. Show the product image while the 3D model loads, so the gallery never sits empty.
• Bulk model manager. A Products screen that filters by model status, shows a badge for what each product has, and removes a model in one click.
• Coverage dashboard. See how many products have AR, how many have Android only, iOS only, or both, and which ones are still missing a model.
• Setup wizard that turns the feature on and gets you to your first model quickly.
• Everything served locally. The 3D viewer and its decoders ship inside the plugin, so your storefront makes no third-party CDN request and sends nothing about your visitors anywhere.
• Translation ready.

How it works

1. Install the plugin and finish the short setup wizard.
2. Open a product, upload a .glb file for 3D and Android AR, and a .usdz file for iOS AR.
3. Visit the product page. Desktop shoppers get the 3D viewer, phone shoppers get the 3D viewer plus a View in AR button.

3D model formats

GLB is the format for the on-page 3D viewer and for Android augmented reality. USDZ is the format Apple’s AR Quick Look requires, so it is what powers AR on iPhone and iPad. You can upload one or both. Most 3D tools, including Blender, export GLB directly, and the plugin links a sample GLB and a sample USDZ on its Products screen so you can see exactly what a working file looks like before you upload your own.

Free vs Pro

Nothing in the list above is time limited, usage limited, or locked behind a trial. The free version runs a real 3D and AR experience on every product in your store.

AR for WooCommerce Pro adds:

• AR and 3D view analytics, with daily trends, views by type and device, top viewed products, and per-product counts over a date range you choose.
• Desktop QR hand-off, so a desktop shopper can scan a code and open AR on their phone.
• Advanced AR button styling: 12 ready-made badges, custom badge image upload, a coloured text button with your own icon and colours, and a configurable button position.
• Photos / 3D toggle placement in any corner of the gallery.
• Per-variation models, so each variation of a variable product can carry its own GLB and USDZ, swapped live as the shopper changes options.
• Auto-rotation, so the model spins gently and shoppers notice it can be moved.
• Model dimensions shown as width, height and depth hotspots on the model itself.

Requirements

• WooCommerce 9.5 or newer.
• A GLB model for the 3D viewer and Android AR, and a USDZ model for iOS AR.

External services

The plugin’s admin screens contact the following external services. None of them is used by the storefront, and no data about your customers or store visitors is sent to any of them.

1. DevDiggers extensions catalog. On the admin “DevDiggers Plugins > Extensions” screen, the plugin requests the list of DevDiggers plugins from https://devdiggers.com/wp-json/ddwcs/v1/plugins so it can display them. This is a read-only request and sends no personal data, and the response is cached for 24 hours so it is not repeated on every page load. The catalog entries include an icon image for each listed plugin, which that screen loads from https://devdiggers.com. This happens only while an administrator is viewing the Extensions screen; no other screen, and no storefront page, contacts devdiggers.com.

2. Newsletter subscription (opt-in). If a logged-in admin enters their email in the DevDiggers newsletter box and submits it, that email address and your site URL are sent to https://devdiggers.com/ (FluentCRM) to create the subscription. This request is only made when you explicitly submit the form.

3. Gravatar (avatar images). The plugin’s admin screens greet the logged-in administrator with their avatar, using the WordPress core function get_avatar_url(). WordPress resolves that to Gravatar, so the browser requests the image from https://secure.gravatar.com/ and an MD5 hash of the logged-in administrator’s email address is included in the image URL. This happens only while an administrator is viewing one of the plugin’s admin screens. No customer or store data is involved, and no storefront page requests an avatar.

Services 1 and 2 are provided by DevDiggers (https://devdiggers.com). Terms: https://devdiggers.com/terms-and-conditions/ – Privacy: https://devdiggers.com/privacy-policy/

Service 3 is provided by Automattic (https://gravatar.com). Terms: https://automattic.com/terms/ – Privacy: https://automattic.com/privacy/

Source code and build tools

The admin and frontend JavaScript and CSS are compiled from the src/ folder with webpack and Babel. The complete, human-readable source code (admin, frontend, and all build configuration) is published in our public GitHub repository:

https://github.com/DevDiggers-Technologies/ar-for-woocommerce

To build the assets from source:

1. Run npm install to install the build dependencies listed in package.json.
2. Run npm run build to compile the production assets into assets/js and assets/css.

The build configuration is in webpack.config.js and babel.config.js.

Third-party libraries are bundled with the plugin and served from it. Nothing is loaded from a CDN or any remote host:

• <model-viewer> 4.x (assets/js/model-viewer.min.js) – Google LLC, BSD-3-Clause – https://github.com/google/model-viewer
• Draco decoder 1.5.6 (assets/js/decoders/draco/) – Google LLC, Apache-2.0 – https://github.com/google/draco
• Basis Universal transcoder (assets/js/decoders/basis/) – Binomial LLC / Google LLC, Apache-2.0 – https://github.com/BinomialLLC/basis_universal
• Chart.js 4.5.1 (devdiggers-framework/assets/js/chart.js) – MIT – https://github.com/chartjs/Chart.js

• Select2 4.1.0 (devdiggers-framework/assets/js/select2.js) – MIT – https://github.com/select2/select2

  ships with default CDN locations for its Draco and Basis decoders. Those defaults have been blanked out in the bundled copy, and the plugin points the viewer at the local assets/js/decoders/ copies instead, so a compressed model still renders without any external request.

Two of the bundled decoder files are WebAssembly binaries: assets/js/decoders/draco/draco_decoder.wasm and assets/js/decoders/basis/basis_transcoder.wasm. They are the unmodified prebuilt binaries published by their upstream projects, taken from the official releases linked above, and they are not compiled or modified by us. Both are open source under Apache-2.0, and the complete C++ source and build instructions for each are in the upstream repositories listed above, so the binaries can be rebuilt and compared against the copies shipped here.

These two files are data read by the browser’s own WebAssembly runtime, not code the plugin executes on the server. They are what lets <model-viewer> open Draco-compressed geometry and KTX2/Basis-compressed textures, which is the format most 3D authoring tools export. They are included in the plugin so that no decoder is ever fetched from a third-party CDN at runtime.

The sample models in assets/sample/ are demo media, not code. sample.glb is the Android / desktop sample and sample.usdz is the iOS sample, since Apple’s AR Quick Look only accepts USDZ. Both are linked from the plugin’s admin Products screen so a store owner can see the exact formats to upload.

The bundled demo models in assets/sample/ are derived from the “Sheen Chair” model in the Khronos glTF Sample Assets collection (© 2020 Wayfair, LLC, dedicated to the public domain under CC0 1.0 Universal). Textures were downscaled, the mesh was decimated, and the USDZ was generated from the same source. Original: https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main/Models/SheenChair