1. Install and Activate the Plugin #

1. Automatic Installation:
   • Log in to your WordPress Admin Panel.
   • Navigate to Plugins > Add New.
   • In the search bar, type AR Model Viewer for WooCommerce.
   • Click Install Now next to the plugin, and once installed, click Activate.
2. Manual Installation:
   • Download the plugin’s ZIP file from WordPress.org.
   • Go to Plugins > Add New > Upload Plugin.
   • Select the downloaded ZIP file and click Install Now.
   • After installation, click Activate Plugin.
3. Verification:
   • After activation, verify that the plugin appears in your WordPress Admin under Settings > AR Model Viewer for WooCommerce.

2. Configure Plugin Settings #

After activating the plugin, configure it to suit your store’s needs:

1. Navigate to Settings:
   • Go to Settings > AR Model Viewer for WooCommerce in your WordPress Admin Panel.
2. Basic Settings:
   • Default Model Dimensions: Set the initial dimensions for displaying 3D models. Adjust these to match the typical size of your products.
   • Enable AR Support: Toggle this setting to allow AR viewing on compatible devices.
   • Max File Size: Specify the maximum upload size for 3D model files to ensure large models can be added without errors.
3. meshy.ai Integration:
   • If using the Pro version, enter your meshy.ai API Key to unlock AI-powered 3D model generation.
   • Configure default AI settings, such as preferred model output resolution.
4. Shortcode Customization:
   • Review and adjust shortcode settings if you plan to display 3D models outside of WooCommerce product pages.
5. Save Changes:
   • Click the Save Changes button to apply your configurations.

3. Add 3D Models to Your Products #

1. Navigate to WooCommerce Products:
   • Go to Products > All Products in your WordPress Admin Panel.
   • Select an existing product to edit, or click Add New to create a new product.
2. Locate the AR Model Viewer Metabox:
   • In the product edit page, scroll down to find the AR Model Viewer section.
3. Upload a 3D Model:
   • Click Choose File and upload a .glb or .gltf file for your product.
   • For large models, ensure the file size does not exceed the upload limit configured in the plugin settings.
4. Set Model Properties:
   • Initial Position and Zoom: Define the default orientation and zoom level for the model when displayed in 3D.
   • Lighting and Background: Customize how the model appears, including lighting and the background color or texture.
5. Save the Product:
   • Click Update (for existing products) or Publish (for new products) to save your changes.

4. Preview in AR #

1. View the Product Page:
   • Open the product page on your WooCommerce store.
2. Check for 3D and AR Buttons:
   • Ensure that a View in 3D button is displayed for all users.
   • Confirm that a View in AR button appears for devices with AR compatibility (e.g., mobile devices with ARCore or ARKit support).
3. Test the AR Feature:
   • On a compatible mobile device:
     • Click the View in AR button.
     • Follow the device prompts to place the product in your environment using the camera.
4. Verify Customer Experience:
   • Ensure the model loads properly and that AR interaction works as expected.
   • Adjust the model’s dimensions, rotation, or lighting settings in the product editor if necessary.

5. Advanced Configuration (Optional) #

1. Custom Shortcodes:
   • Use the [ar_model_viewer] shortcode to embed 3D models on posts, pages, or other parts of your website.
   • Configure additional attributes such as width, height, or specific model files.
2. Enable AI Model Generation (Pro Feature):
   • Go to Settings > AR Model Viewer for WooCommerce > AI Features.
   • Choose to generate a model from text descriptions or images.
   • Test generated models and link them to your WooCommerce products.
3. Test Across Devices:
   • Verify functionality on various devices (desktop, mobile, tablet) to ensure seamless compatibility.