[model-viewer]
What is AR Model Viewer for WooCommerce?
AR Model Viewer for WooCommerce is a personal WordPress plugin project for displaying 3D objects and Augmented Reality on WooCommerce products, useful for stores selling 3D models or any E-Commerce that wants to stand out by offering their customers the ability to view products in Augmented Reality.
Project Description
The idea of this project is for it to be a free plugin, and it is intended to be published in the WordPress plugin repository once the plugin development is completed, or at least to release a stable version. This plugin uses the Google library (modelviewer.dev) which, through a web component, enables the rendering of interactive 3D models, optionally displaying these interactive 3D models in Augmented Reality. This library allows this to be done easily, compatible with as many browsers and devices as possible.
Additionally, this plugin is integrating the use of CMB2 from Custom Metaboxes 2, a developer toolkit for creating metaboxes, custom fields, and forms for WordPress.
How did I create the plugin?
This plugin follows the recommendations in the Plugin Developer Handbook official WordPress. This plugin uses object-oriented programming with WordPress and PHP.
To create the plugin, I used the well-known DevinVinson boilerplate which allowed me to quickly and easily organize WordPress Hooks and Actions.
Plugin Documentation
Code documentation is still pending, but if you want to contribute with code, you can support me by making your Pull Request on GitHub.
How does the plugin work?
The plugin essentially consists of downloading the plugin from the GitHub repository and installing it like a normal plugin. Upon installing the plugin, it will display a new menu option in Dashboard > Settings > AR Model Viewer for WooCommerce as shown in the following image.
If we click on “AR Model Viewer for WooCommerce,” it will display the plugin menu, which includes author information, the library, and some additional settings for Augmented Reality visualization.
How to load a 3D model on a WooCommerce product?
After installing the “AR Model Viewer for WooCommerce” plugin, when editing any WooCommerce product, we can see that a Meta box has been created, allowing us to upload files in .glb format for Android and .usdz format for iOS, as well as an Image or Poster to display while our 3D model fully loads, in addition to an alt=”” attribute where we can enter a brief description of our 3D model to aid accessibility.
Once both files of our 3D model are uploaded, we save our product and can view the result.
Depending on the plugin settings, we can display the model in different parts of our project, such as before the add-to-cart button on individual WooCommerce product tabs.
Do you want to download this plugin?
Remember that this plugin is still under development on GitHub, and stable versions will be released through the official WordPress.org plugin repository. You can support the project by adding a star to the project on GitHub, or by making your Pull Requests for issue resolution.
Do you have a Web Project?
Do you need help with a web project? Don't hesitate to contact me. I develop complete and customized solutions with WordPress and PHP, using modern tools and processes, HTML, CSS, SCSS, PHP, JavaScript, Bootstrap, and more. Ready? Send me a message and let's talk about your web project!