Loading...

Getting Started Guide: CartMagician Pro for WooCommerce

Updated on March 11, 2021

Installing and setting up CartMagician Pro AR only takes a few minutes – here’s how

Before you get started, ensure you have the right software and devices on hand.

CartMagician Pro technical requirements:

  • WordPress 5.0.x or greater
  • WooCommerce 3.5.1 or greater
  • PHP version 7.2 or greater is recommended
  • MIME-Type: (model/usd usdz and model/vnd.pixar.usd .usdz to identify them as AR viewable
  • HTTPS (SSL Certificate applied to your website)

CartMagician Pro viewing requirements:

  • Website augmented reality (known as WebAR) can be viewed on the mobile web using standard browsers including Safari and Chrome on Apple iOS devices, and Google Chrome, Firefox and Microsoft Edge on Android.
  • CartMagician AR supports Apple iPhone and iPads. For an up to date list of Apple devices and AR technology please visit: https://www.apple.com/au/ios/augmented-reality/
  • CartMagician AR supports a host of Android devices. For a full list of ARCore devices please visit: https://developers.google.com/ar/discover/supported-devices

How to install the CartMagician Pro for WooCommerce plugin on WordPress

Installation via the WordPress Dashboard

Installing CartMagician through the WordPress dashboard is the easiest option as WordPress manages the file transfers and there is no need to leave your web browser.

Getting Started: Watch the plugin installation video tutorial

Installation instructions:
  1. Log in to your WordPress dashboard, navigate to the Plugins menu, and click “Add New.”
  2. In the search field type “CartMagician” and click “Search Plugins”.
  3. Once you’ve found the CartMagician plugin you can view details such as the point release, rating, and description.
  4. Install the plugin by clicking “Install Now”.
  5. Once installation has complete, activate the CartMagician Pro for WooCommerce plugin.

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.

How to add augmented reality content into WooCommerce products

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 and Android users can view your AR content.

CartMagician Pro for WooCommerce Augmented reality tab installation

Adding a USDZ file

You now have two options:
  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

You now have two options:
  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.

CartMagician Pro hosted URL or upload usdz or glb media files screen
Watch the How to upload WebAR USDZ & GLB media files video tutorial
Watch the How to add hosted URL links to USDZ & GLB media files video tutorial

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

CartMagician Pro for WooCommerce View in AR button visual
  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.

CartMagician Pro for WooCommerce adding a shortcode View in AR button to product page

Troubleshooting – MIME Types

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.

How to fix

Add the MIME-Type: model/usd usdz and model/und.pixar.usd .usdz to identify them as AR viewable for Wordpress media

Please review this Troubleshooting Guide and options to allow different MIME Types.

Exclude CartMagician pro from minification or caching plugins quick fix

Reference image only. Please refer to your hosting and website setup for instructions.

Troubleshooting – Changed File Path and Caching

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.

Exclude CartMagician pro from minification or caching plugins quick fix

Reference image only. Please refer to your installed plugins and associated documentation

Troubleshooting – Staging website environments

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.

GLB & USDZ sample data

Free Download

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

Start Download
Exclude CartMagician Pro for WooCommerce USDZ &
                     GLB testing files

CartMagician demonstration store

Learn how to add AR to your WooCommerce store.

You can also view our CartMagician AR WooCommerce Demo Store here to see how our AR files look. Follow this link on your Apple iOS or Android compatible device or scan the QR code below.

Visit CartMagician AR WooCommerce Demo Store

demo.cartmagician.com

View CartMagician AR WooCommerce Demo Store

Changelog

*** CartMagician Changelog *** 2020-12-02 - version 2.0.11
* Updates to dashboard upload UI,
* View in AR button update
2020-10-15 - version 1.0.10
* Updates to script support

2020-07-30 - version 1.0.9
* Improved Android exposure management

2020-05-31 - version 1.0.8
* Added shortcode generator and handling
* Improved js performance
* Improved older version support

2020-05-21 - version 1.0.7
* Improved AR Model Viewer display

2020-05-14 - version 1.0.6
* Added support for WooCommerce Variable Product
* Added remove AR button

2020-05-06 - version 1.0.5
* Improved general stability

2020-03-25 - version 1.0.4
* Improved general stability

2020-03-14 - version 1.0.3
* Added Elementor Template Support
* Improved general stability

2020-01-14 - version 1.0.2
* Added direct URL support
* Added How To Start section
* Added clickable AR icon
* Fixed AR icon on Safari

2019-10-11 - version 1.0.1
* Added Android support (gLTF, glb)
* Added iPadOS Support
* Improved plugin assets loading stability
* Improved USDZ viewer stability
* Improved essential CartMagician extension support
* Fixed CartMagician product page media uploader

2019-08-17 - version 1.0.0
* Inital release

Haven't found the answer? We can help.

Submit a request

Login and contact CartMagician support and we’ll get back to you as soon as possible.

Top