Reading list Switch to dark mode

    WooCommerce WebAR (Augmented Reality) Product

    Updated 7 February 2024

    Introduction

    The WebAR products image plugin for WooCommerce allows to you enable WebAR products image in your WooCommerce online store. And in WooCommerce WebAR (Augmented Reality) Product, the admin can add the 3D image to their WooCommerce online store. With the help of the WebAR product image for WooCommerce, you can experience augmented reality products and you can access this plugin on iOS and Android phones also.

    The customers can access our WooCommerce WebAR (Augmented Reality) Product on their smartphones also.

    The WebAR product image for the WooCommerce WebAR (Augmented Reality) Product is provided to customers virtually with a product use before-buying facility.

    NOTE – Some devices do not support the WebAR functionality due to their old version because the old version devices can not have the functionality to view the AR products maybe you can update your device version and try here is the link to know which devices support WebAR.

    This module is now compatible with WooCommerce’s new High-Performance Order Storage (HPOS) feature.

    Start your headless eCommerce
    now.
    Find out More

    Check a brief overview of the plugin –

    VIhSvOofr_U

    Features

    • This Plugin gives functionality for customers to see the product in a 3D view.
    • With the help of the WooCommerce WebAR (Augmented Reality) Product, Admin can add products image to their online store.
    • With the help of this module, the admin can upload a 3D product image for the online store.
    • Admin can upload GLB and USDZ files for Android and iOS respectively.
    • This Plugin gives functionality for customers to see the product in a 3D view.
    • If we don’t upload GLB and USDZ image files then the product image will be visible.
    • Suppose we don’t upload product images and any GLB and USDZ files then the default image given by WooCommerce will be visible.
    • If your GLB  and USDZ files are large in size then ask your hosting provider to increase the upload size limit. So that one can upload large GLB and USDZ files.

    Installation

    First of all, the user will get a zip file that needs to be uploaded in the “Add New” menu option in the WordPress admin panel.

    For this login to the WordPress admin panel and in the Dashboard hover your mouse over the “Plugins” menu option and select the “Add New” option.

    Screenshot-from-2021-07-09-14-47-00

    Following this, the user will see an option on the top of the page that is “Upload Plugin”, click the option to upload the zip file.

    wooCommerce WebAR install module

    Next, on clicking the “Upload Plugin” option, the user will see a “Choose File” button. Click on the button to browse for the zip file as per the image below.

    wooCommerce WebAR module file

    After browsing the file, click on the “Install Now” button to install the plugin as per the snapshot.

    wooCommerce WebAR install module

    Furthermore, Once the user installs the plugin, a message “Plugin installed successfully” displays and an “Activate Plugin” is visible to activate the plugin.

    In the end, the user needs to click on the “Activate Plugin” button to activate the plugin.

    Screenshot-from-2021-07-09-14-54-48

    Module Translation

    And, to know how to translate the module, you can click here.

    Configuration

    Henceforth, after the successful installation of the WooCommerce WebAR (Augmented Reality) Product, now the admin needs to configure the module.

    Here the admin can enable/disable the plugin and similarly, they can allow the module for simple, variable and external or affiliate products.

    WooCommerce-Web-AR-‹-WooCommerce-Webar-Module-—-WordPress

    The admin needs to follow “Products > Add new”.

    Products-‹-WooCommerce-Webar-Module-—-WordPress

    After clicking on the Add New tab then you can write a product name.

    Add-new-product-‹-WooCommerce-Webar-Module-—-WordPress

    How Admin can set the images?

    Admin needs to click on the AddNew button then admin needs to scroll down the page and click on the

    “Product Image > Select Product Image”

    Add-new-product-‹-WooCommerce-Webar-Module-—-WordPress-2

    Android File

    The Android File section is used to upload a media file (Image) for android and the format of the image for android is GLB.

    iOS File

    The iOS File section is used to upload a media file (Image) for iOS (Apple) and the format of the image for iOS is USDZ.

    For uploading an Android File,

    “Android File > Upload”

    And select the Image format for Android is GLB.

    Add-new-product-‹-WooCommerce-Webar-Module-—-WordPress-3

    For uploading an iOS File,

    “iOS File > Upload”

    And select the Image format for iOS that is USDZ.

    Add-new-product-‹-WooCommerce-Webar-Module-—-WordPress-4

    After completing this configuration you will save the product by using the “Publish” button.

    Add-new-product-‹-WooCommerce-Webar-Module-—-WordPress-5

    After publishing the product the admin can see their product in the product list “Products > All Products”

    Products-‹-WooCommerce-Webar-Module-—-WordPress-1

    Once the configuration is completed from the admin end. Now we will move to the front end to view the products.

    Front End View

    wooCommerce WebAR Shop

    Now, customers can access this website on their mobile devices and also see the product at its proper place by using their mobile device camera before buying the product.

    And you can access this website on your mobile device by scanning this bar code.

    For this bar code, you need to click on the live demo on the module page.

    WooCommerce-Webar-Module-–-By-Webkul

    After scanning this Bar Code with your mobile, you can redirect to the website and you will see all AR products.

    To view the AR image in your real space you need to click on this cube.

    Screenshot_20210520-174847_Chrome-2_pixel_very_silver_portrait

    After clicking on the cube button, you can see the product in your real space with the help of your mobile camera like this.

    but first, you need to permit this module to access your mobile camera to view the AR images on your device.

    Screenshot_20210603-195048_Google1_pixel_very_silver_portrait

    After your satisfaction with your product, you can add the product to the cart list.

    Screenshot_20210520-174847_Chrome-1_pixel_very_silver_portrait

    After adding the products to the cart list then you can view the products in your cart.

    and you also can add many products to your cart list.

    Screenshot_20210520-175028_Chrome_pixel_very_silver_portrait

    Now you can checkout your selected product from the cart.

    With the help of Proceed checkout button.

    And all your product details are mentioned in the cart.

    Subtotal.

    Shipping Method.

    Total Amount.

    screenshot_20210526_101556_pixel_very_silver_portrait

    After the checkout of your product from the cart. Admin will receive your order and you will get a proper bill.

    And all the things are mentioned on the order receiving slip.

    Order Number.

    Date.

    Total Amount.

    Payment Method.

    AR-bill_pixel_very_silver_portrait

    That’s all about the WooCommerce WebAR (Augmented Reality) Product. For any further queries and suggestions please raise a ticket to the HelpDesk System.

    Don’t give us a low rate without contacting support on the issue you’ve come across. We are always happy to help you.

    Current Product Version - 1.0.3

    Supported Framework Version - wordpress: 6.4.3, Woocommerce: 8.5.2

    Blog Version - wordpress: 6.4.3, Woocommerce: 8.5.2
    • Version wordpress: 6.4.3, Woocommerce: 8.5.2
    • Version wordpress: 6.2, Woocommerce: 7.2
    • Version wordpress: 5.8, Woocommerce: 5.6
    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home