CartMagician PRO Augmented Reality for WooCommerce AR

CartMagician PRO Augmented Reality (AR) for iOS and Android users

↑ Back to top

The CartMagician PRO AR plugin has been developed specifically for WooCommerce site owners and developers. We’ve designed it to be the easiest way to seamlessly integrate augmented reality (AR) experiences into your store for iOS and Android users.

What it does

↑ Back to top

The CartMagician PRO for WooCommerce plugin enables augmented reality versions of your products to be added directly into your WooCommerce online store, ready for your customers to interact with on their mobile device. The CartMagician PRO for WooCommerce plugin uses WebAR – an augmented reality experience that is held within a webpage so that it can be accessed using a smartphone. Customers simply open your WooCommerce store using the website browser on their Apple iOS or Android ARCore-enabled device and tap on the product or button to activate the content in front of them. They can then virtually place your products at the correct size, scale and colour wherever they like. Creating the ultimate try-before-you-buy experience for customers.

Viewing Requirements

↑ Back to top

• AR viewable on any Android device enabled with ARCore 1.9+
• AR viewable on Apple iPhone and/or iPad with iOS 13+ (best viewed with Safari).
• Compatible with standard mobile web browsers including Google Chrome, Microsoft Edge, Firefox, Safari.

Features

↑ Back to top

The full-featured CartMagician Pro plugin includes:

• In browser WebAR functionality for your customers
• Add unlimited AR products into WooCommerce
• Import AR-ready files direct from the CartMagician Platform
• Import AR web URLs
• Import AR media files for iOS & iPad OS (USDZ)
• Import AR media files for Android (GLB)
• ‘View in AR’ web embed shortcodes
• Online help desk & chat support

How to install CartMagician Pro

↑ Back to top

Recommended Minimum Requirements

• WordPress 5.0.x
• WooCommerce 3.5.1 or greater
• PHP 7.0+ or greater is recommended
• MySQL version 5.0 or greater (MySQL 5.6 or greater is recommended)
• HTTPS support

 

WordPress installation

↑ Back to top

Installing CartMagician through the WordPress dashboard is the easiest option as WordPress handles the file transfers so you don’t need to leave your web browser.

1. Log in to your WordPress dashboard, navigate to: Plugins > Add New.
2. In the search field type “CartMagician” and click “Search Plugins”.
3. Once you’ve found this plugin you can view details like the point release, rating, and description.
4. Then install it by clicking “Install Now”.

After clicking that button you will be asked if you’re sure you want to install the plugin. Click Yes and WordPress will automatically complete installation. Watch Video – Getting Started: Watch the plugin installation video tutorial Manual installation The manual installation method involves downloading the plugin and uploading it to your server via your favorite FTP application. The WordPress codex contains instructions on how to do this here.  

How to add augmented reality content into WooCommerce products

↑ Back to top

Once CartMagician has been installed and activated on your website, either add a new WooCommerce product or edit an existing product to get started. When in the product page editing screen, you will now see the ‘Augmented Reality’ tab in the Product Data section. This tab contains the ‘Upload or Link your AR Files’ settings where you can start adding your WebAR files. Next, go to the Product Data setting for the product and select the ‘Simple Product’ as your product Data Type. You are now ready to add in both the USDZ and GLB files to the product. You will need to add in both file types to ensure that iOS (.usdz) and Android (.glb) users can view your augmented reality content.

Adding a USDZ file

↑ Back to top

Can be done in one of two ways:

1. ‘Upload USDZ’ which allows you to upload a USDZ file to your Media Library.
2. ‘Edit USDZ link’ which allows you to add a full URL address to your USDZ file if you are hosting files on cartmagician.com or outside this location.

Adding a GLB file

↑ Back to top

Can be done in one of two ways:

1. ‘Upload GLB’ which allows you to upload a GLB file to your Media Library.
2.  ‘Edit GLB link’ which allows you to add a full URL address to your GLB file if you are hosting files on cartmagician.com or outside this location.

Once both files have been added to your product, publish the page to save your settings. You can now test the AR product experience by opening the live product page on your compatible mobile device. Watch Video – How to upload WebAR USDZ & GLB media files video tutorial Watch Video – How to add hosted URL links to USDZ & GLB media files video tutorial  

Adding a [shortcode] to display a ‘View in AR’ button on your product page

↑ Back to top

If you use the ‘Image Gallery’ option on your product page, or would like to add display a clickable AR button, the shortcode feature is perfect for you. The shortcode allows you to display a ‘View in AR’ button anywhere on your product page for customers to select when viewing your product on their device. If you would like to create your own button style you can update with your own CSS and button image. It is commonly used as a workaround when using an image gallery or selecting a product data type other the recommended simple product to display the AR icon on the feature image.

1. Follow the above instructions to add your USDZ and GLB files.
2. Once added, select the ‘Display AR automatically’ button to reveal ‘Display AR manually’ and the ‘View in AR’ button shortcode.
3. Copy the shortcode then add anywhere on your product page.

Once the shortcode has been added to your product page, publish the page to save your settings. You can now test the AR product experience by opening the live product page on your compatible mobile device and tapping on the ‘View in AR’ button.

GLB & USDZ sample data for Testing

Free Download CartMagician comes with some sample USDZ & GLB assets for you to test. Simply download our Getting Started test files here then follow the instructions to add them to the CartMagician AR tab in your WooCommerce store.      

CartMagician WooCommerce Store Demo

↑ Back to top

Visit the CartMagician demo store website to learn how to add augmented reality products to your WooCommerce store and to see how your AR files could look.

    demo.cartmagician.com    

Frequently Asked Questions

↑ Back to top

Is CartMagician Pro easy to use? Absolutely. For website owners, adding augmented reality content to your WooCommerce products is as easy as copy and pasting a URL or uploading a media file (USDZ or GLB file formats). What is a USDZ file? A USDZ file is a web-based 3D AR file format which is viewable as AR content on a website when you click on it while browsing the web or shopping online using an iOS device. Created by Pixar, USDZ is a rich format that can display vivid and detailed objects as well as animations. Built-in apps, such as Safari, Messages, Mail, News, and Notes, use AR Quick Look to display USDZ files of virtual objects in 3D or AR on iPhone and iPad. USDZ files can be viewed directly in Safari and Chrome web browsers on all new Apple devices with iOS 12+ and beyond. What is a GLB file? GLB is a 3D file format that’s used in augmented reality (AR), virtual reality (VR), games, and web applications on Android devices because it supports motion and animation. Another advantage of the format is its small size and fast load times. Interactive websites, eCommerce stores and adverts use the GLB format to display objects that users can interact with (like a couch that they can rotate and view from any angle). Do I need both USDZ and GLB files to offer WebAR experiences on my website? You do need both if you wish to offer WebAR for iOS and Android users. This is because the different systems require different files e.g., iOS displays USDZ files and Android displays GLB files. How do I create a USDZ or GLB file? You can convert your existing 3D models into AR experiences and add them directly to your site with the CartMagician Conversion Tool. Learn more here.  

Troubleshooting Guides

↑ Back to top

Every website is setup differently so after installing CartMagician Pro, checking your setup and find you are having trouble uploading USDZ files to your Media Library you may need to include the MIME Type that allows USDZ and GLB files to be included in your Media Library.      

Changed File Path and Caching

↑ Back to top

Please ensure that CartMagician Pro plugin file paths are unchanged in your website setup. Some caching plugins can change file paths or minify .css and .js files. If you find that CartMagician is not loading correctly it could be because the CartMagician Pro plugin .js and .css paths have been changed or relocated.

How to fix

Please exclude the CartMagician Pro plugin folder and enclosed files from minification and concatenation. See reference image. Once settings have been made please allow 15 minutes for changes to take effect as some caching plugins or CDN networks have different refresh times so please check your own setup if changes do not happen immediately.  

Staging Website Environments

↑ Back to top

If you are planning to have frontend login security on your staging site during development you may find that your AR content will stop loading. This is normal and due to the added security preventing the normal operation of WebAR content on your WooCommerce product page.

How to fix

When you are ready to test your WooCommerce added AR content and products turn of the login security/firewall so that you are testing your website under normal operation and as your customers would view your products an AR content.  

About CartMagician

↑ Back to top

Helping WooCommerce store owners and developers create augmented reality experiences for e-commerce products and websites, super-fast.

↑ Back to top

CartMagician streamlines the process of creating hyper-realistic, augmented reality content for the mobile web by converting 2D images and 3D models you already have.

There are already more than 2.85 billion devices around the world with in-built AR capabilities. CartMagician can help you access them. So, what will you create? You can start creating AR content for free here.

 

Additional Support, feedback and roadmaps

↑ Back to top

You’re never alone. Get in touch anytime, from anywhere. You can rely on our customer support team to answer your technical queries about the CartMagician for WooCommerce plugins, 2D/3D content creation, USDZ / GlTF / GLB file conversion tools, and publishing, integration and embedding WebAR on your website. Latest release and roadmap notes are available on the CartMagician.com website.