Whilst we endeavour to make our plugins as easy to use as possible. There will inevitably be queries on how to do certain things with them. Please find answers to the most common queries below and for further support please check our 3D Resources or contact Web and Print Design if you need further assistance.
Augmented Reality (AR) is an interactive technology that superimposes digital objects onto the real world, allowing users to see and interact with a virtual representation of the physical environment. Integrating AR into a website can provide several benefits for business owners, including:
Overall, using AR on a website can provide a range of benefits for business owners, including enhanced customer experience, increased engagement and conversion, improved brand awareness, better product visualization, and cost-effective marketing.
Are there additional costs?
If you use the free version of the plugins then there are no costs involved, however you will have limitations to the number of 3D models you can have on your site.
If you use a premium version of the plugins then there is a monthly subscription fee for the plugin to support unlimited models and to receive the plugin updates for the duration of your subscription.
How to install the plugin?
How to install
To get started, you’ll need to install the AR for WordPress plugin. You can do this by navigating to the WordPress plugin repository and searching for “AR for WordPress” or “AR for Woocommerce”. Once you’ve found the plugin, click “Install Now” and then “Activate”.
Manually
/wp-content/plugins/ directory and unzip itWhat 3D model formats are supported
AR for WordPress and AR for WooCommerce display your 3D models using the model-viewer html5 tags. This system supports the use of USDZ, GLB and GLTF 3D model file formats. For further information please visit our 3D resources section.
Do you support iOS and Android Devices?
Yes, our system supports both iOS and Android devices. You can upload a GLB or GLTF file for display on both Android and iOS, or you can also upload a USDZ file for iOS.
iOS devices need to be running iOS version 12 or newer.
Android devices must be running Android 7.0 or newer with ARCore supported and Google Play Services for AR installed. Please see the ARCore supported devices information at https://developers.google.com/ar/devices. Instructions on How to Enable ARCore on Any Android Device can be found here.
What browsers are supported?
The plugins utilise the model-viewer open source scripts which according to their site currently support the following browsers, however Safari works too. https://modelviewer.dev/#section-browser-support
Why does my model sit in a strange position in AR?
Your model must be centred to its origin in your 3D software before exporting to ensure it sits in the correct position when viewed using the plugins. Details and instructions on how to do this can be found here. https://resources.turbosquid.com/training/training-scene-organization/centering-at-the-origin/
What if I don’t have any 3D models
If you don’t have 3D models there are a number of solutions available to you, including downloading existing models from online libraries, creating your own models using your mobile phone or tablet’s cameras or commissioning a 3D model to be created. Please visit our 3D Model Resources section for more details.
Support Included?
Support for our plugins is provided via the WordPress.org support forums.
How do I find the ID of my category?
1. Log in to your WordPress site dashboard
2. Under AR Models click on Categories to open the category page
3. Choose the category you want to find the category ID
4. Hover on the category’s edit link and you will see the URL at the bottom with the category ID
5. Alternatively, open the category by clicking on it.
6. Check the category ID from the page URL
Can I use put the AR viewer in and iframe?
You can embed the page of your website containing your AR shortcode into an iframe on your site. or another site. However you may need to do the following to ensure it will work.
In the .htaccess file for your parent site, add this line:
Header Feature-Policy: xr-spatial-tracking *;
Then in your iframe tag add:
allow=”xr-spatial-tracking”
What happens when my subscription expires?
When your subscription expires the support for unlimited products, categories and product variations will no longer be available. You will need to renew your subscription for these functionalities to continue to work.
What about Refunds?
If you are not satisfied with the plugin then we offer a full refund within 30 days of purchasing. Please contact us should you wish to receive a refund.
To get started, you’ll need to install the AR for WordPress plugin. You can do this by navigating to the WordPress plugin repository and searching for “AR for WordPress” or “AR for Woocommerce”. Once you’ve found the plugin, click “Install Now” and then “Activate”.
Manually
/wp-content/plugins/ directory and unzip itAR for WordPress
Browse to the AR Models Settings Page found on the left hand side admin menu AR Models -> Settings.
AR for Woocommerce
Browse to the AR Models Settings Page found on the left hand side admin menu WooCommerce -> Settings =>AR Display (tab)
License Key – Enter your Premium Licence Key to unlock the customisation options.
Custom AR Button – Upload an image file to replace the AR button in the model viewer on AR capable devices.
Custom Fullscreen Button – Upload an image file to replace the fullscreen popup icon in the model viewer on desktop and laptops.
Custom Play Button – Upload an image file to replace the play button in the model viewer for models with animations.
Custom Pause Button – Upload an image file to replace the pause button in the model viewer for models with animations.
Custom QR Logo – Upload an image file to replace the Logo that appears in the QR code in the model viewer on desktop and laptops.
Hide Dimensions – Disable the Dimensions option in the model viewer
Hide AR View – Disable the AR view button in the model viewer on AR capable devices.
Hide QR Code – Disable the QR Code in the model viewer on desktop and laptops.
Hide Reset – Disable the Reset button in the model viewer.
Disable Fullscreen – Disable the Fullscreen button in the model viewer on desktop and laptops.
Android – Prioritise Scene Viewer over WebXR – By default Android users will view models using WebXR, you can prioritise this to use Scene Viewer instead if preferred.
QR Code Destination – When a user scans the AR code on their device it can take them to either the ‘Parent Page’ which is the page currently displaying the AR model, or ‘Model Viewer’ which opens the model directly in the browser and automatically triggers the AR view once loaded.
Dimension Units – Choose what units to display the dimensions in – meters, centimeters, millimiters or inches.
Element Positions and CSS Styles – Choose the position in the model viewer for each of the following elements: AR Button, Dimensions, Fullscreen Button, QR Code, Thumbnail Slides, Play/Pause, Reset Button, Call To Action
CSS Styling – Add your own custom CSS Styles to change the appearance of various elements.
The first thing to do is gather your 3D model fils in the correct formats and settings. Please make sure you do the following:
Then browse to the add model pages:
AR for WordPress
AR Models -> Add New
AR for Woocommerce
Products -> Add New => Product Details -> AR Models (tab)
GLB/GLTF 3D Model – Upload your model file to the media library or insert a URL to your model. URLs should always be served via https://. GLB/GLTF files can be used for both Android and iOS (the iOS Quick Look app can convert them on the fly, though perfect results are not guaranteed).
USDZ/REALITY 3D Model – For guaranteed AR dispay on iOS, upload your model file to the media library or insert a URL to your model. URLs should always be served via https://
Skybox/Background Image – Upload your image file to serve as a skybox-image which links to an equirectangular projection that is used as the skybox, and applied as an environment map to the model.
Environment Image – Upload your image file to set environmental lighting without changing the background.
Model Placement – Select whether you model should be displayed on horizontal or vertical surfaces when viewed in AR.
Scale – Set the X, Y, Z scale to change the size of your model in the desktop view, not available in AR.
Field of View – Control the extent of the observable area within the 3D model’s environment, specifying the angular range that the viewer can see within the 3D scene.
Exposure – Change the exposure of your model.
Shadow Intensity – Change the shadow intensity of your model.
Shadow Softness – Change the shadow softness of your model.
Animation – Play/Pause button – Enable the Play Pause Button if your model contains Animations.
Animation – Auto Play – Auto play the chosen animation for your model.
Legacy lighting – By default a neutral lighting environment is used that is evenly lit on all sides, but there is also a baked-in legacy lighting primarily for frontward viewing that van be enabled.
Model includes variants – enable this if your model includes variants and a drop down menu will appear in the model viewer for users to choose the variant.
Rotation – Set Limits – Restrict the amount users can rotate the model in both the X and Y axis.
Disable/Hide Elements – Choose which elements and functionalities you wish to disable including AR View Button, Auto Rotate, Dimensions, Interaction Prompt, Resizing in AR, QR Code and the Reset Button
Zoom Restraints – restrict how much the user can zoom in and out
QR Code Destination – When a user scans the AR code on their device it can take them to either the ‘Parent Page’ which is the page currently displaying the AR model, or ‘Model Viewer’ which opens the model directly in the browser and automatically triggers the AR view once loaded.
Custom QR Logo – Upload an image file to replace the Logo that appears in the QR code in the model viewer on desktop and laptops.
Custom QR Code URL – Set a custom URL for your QR code to go to.
Call To Action Button – Place a CTA button within the model viewer. Button Displays in 3D Model view and in AR view on Android only.
Call To Action URL – Set the URL for your CTA button to go to.
Hotspots – Add your text, click the Add Hotspot button, then click on your model where you would like it placed.
Then rotate your model to each of your desired limits and click the arrows to apply.
Insert one of the following shortcodes within your Post, Page or Product content to display the model viewer. Shortcodes must be surrounded in square brackets.
ardisplay id=X – Displays the 3D model for a given model/post id.
ardisplay id=’X,Y,Z’ – Displays the 3D models for multiple comma seperated model/post ids within 1 viewer and thumbnails to select model.
ardisplay cat=X – Displays the 3D models for a given category within 1 viewer and thumbnails to select model.
ardisplay cat=’X,Y,Z’ – Displays the 3D models for multiple comma seperated category ids within 1 viewer and thumbnails to select model.
ar-view id=X text=true OR buttons=true – Display either the AR View button, text links “View in AR / View in 3D” or button links for a given model/post id to view it directly.
ar-qr – QR Code shortcode display for the page or post the shortcode is added to.
ar-view default
ar-view text links
/ar-view button links
ar-qr
You can add the AR Display to your pages using the AR for WordPress and AR for Woocommerce Gutenberg blocks. You will also find AR for WordPress and AR for Woocommerce Widgets and Elementor elements.
To display your product’s 3D model in place of the Woocommerce product image on the single product page, copy the woocommerce folder found in the AR for Woocommerce plugin templates folder to your theme’s folder.
Copy – /wp-content/plugins/ar-for-woocommerce/templates/woocommerce/single-product/product-image.php
To – /wp-content/themes/YOURTHEME/woocommerce/single-product/product-image.php
Introducing the 3D Gallery Builder — your gateway to transforming ordinary images into stunning 3D art pieces! Immerse yourself in a world where your creativity knows no bounds. With this powerful tool, you can effortlessly upload your favorite jpg or png image, and with a few clicks, watch it come to life ready to hang on the wall.
Tailor your masterpiece by choosing from a frame type and size to perfectly suit your style and space. Ideal for artists, photographers, and anyone with an eye for aesthetics, the 3D Gallery Builder opens up a realm of possibilities for showcasing your visual stories.
Step into a virtual art gallery of your own creation, where each image becomes a captivating centerpiece on your walls. Whether you’re looking to exhibit your photography, display digital artwork, or simply add a touch of sophistication to your living space, the 3D Gallery Builder makes it effortless.
Unlock the potential of your images and turn them into immersive 3D experiences. Elevate your artistry, share your stories, and bring your vision to life with the 3D Gallery Builder — where every image becomes a masterpiece.
To display multiple models in the 1 viewer instance, you simply need to add a list of id numbers id=1,2,3′ or you can add a category id number ‘cat=123’ to your ardisplay shortcode, where 123 is the ID number of the category the models/products belong to. This will display their Featured Images as thumbnails in the bottom corner of the viewer.
ardisplay id=1,2,3 (Contained within square brackets).
ardisplay cat=123 (Contained within square brackets).
Using the AR For WordPress plugin you can find the category ID by going to the ‘AR Models’ -> ‘AR Categories’ page and edit a desired category. When editing your category, the URL for the edit page will tell you the ID number for that category. e.g. https://yourdomain.com/wp-admin/term.php?taxonomy=model_category&tag_ID=123&post_type=armodels
Using the AR For Woocommerce plugin you can find the category ID by going to the ‘Product’ -> ‘Categories’ page and edit a desired category. When editing your category, the URL for the dit page will tell you the ID number for that category. e.g. https://yourdomain.com/wp-admin/term.php?taxonomy=product_cat&tag_ID=25&post_type=product
With the AR for Woocommerce plugin you can have your model display in place of Woocommerce’s featured image. Copy the woocommerce folder found in the AR for Woocommerce plugin “templates” folder to your theme folder.
If you model includes an animation sequence you display this animation using the autoplay and the custom play & pause buttons features.
When editing your model you can enable the autoplay of your animation and whether to show the play and pause buttons by ticking the checkboxes in your model settings.
If you would like to use a custom Play and Pause button you can upload these images to your media library on the AR plugin’s Settings page.
‘AR view’ example will load an animated robot in Android and an animated flying pteradactal in iOS.
GLTF Models can also include variants to allow the user to change textures and colours in a model. Be sure to select the ‘Model includes variants’ option when adding your AR model to your website.
Please contact us with your support enquiries and we will endeavour to assist you. Please include details of any issue you may be having and url’s to the page where you are displaying your AR models using the plugins if applicable.
If you have any ideas or features you would like to see included in the AR plugins, please get in touch and we would love to explore how we can improve both the user and admin experience of the plugins.
AR for WCFM Add-On Plugin
$10.00 / month with 1 month free trial
AR for WordPress Premium Plugin Subscription
$20.00 / month
AR for WooCommerce Premium Plugin Subscription
$20.00 / month
AR for WordPress Premium Plugin Subscription - Developers
$50.00 / month
