WooCommerce Integration
Looking to host your WooCommerce store in the metaverse? Your search ends here!
Last updated
Was this helpful?
Looking to host your WooCommerce store in the metaverse? Your search ends here!
Last updated
Was this helpful?
Test your integration and have fun creating WooCommerce stores in the metaverse.
There are a few steps that are required to enable WooCommerce Storefront API access on your wordpress account.
Login to your wordpress admin dashboard.
From your wordpress admin, click Settings > Permalinks
Make sure the permalink structure is not plain. This integration does not work with plain permalink structure. To read more about permalinks, visit this page.
Click on Save Changes once updated.
Get Domain name and save it for later.
Get Cart URL and save it for later.
WooCommerce creates a unique domain name for each of the stores created on their platform. The domain name is required in conjunction with the API credentials to enable a successful integration.
From your wordpress admin, click Settings > General
The site address URL is the domain name of your store. Note it down for later.
Get the checkout URL for your wordpress store
From your wordpress admin, click Pages > Cart page
Click on Edit.
Copy the page URL from the settings tab on the right side of the page
To get a product's SKU
From your wordpress admin, click Products > Select a product
Click on Inventory and copy the SKU. If there is no SKU, add one and note the SKU for later.
If the product has variations, make sure every variation has an SKU added.
Only the SKU in the inventory section (Parent SKU) is required for products with variations.
From your GMetri homepage, open the experience editor.
From within the editor, click Publish > Others in Sharing options
At the bottom, download the HTML file to be added to your wordpress store.
From wordpress admin, open Pages section
Add or edit a page wherever you want to add your GMetri Experience
Paste the HTML embed code there and publish
If you are the admin or a collaborator, then you can configure WooCommerce integration with GMetri.
From your GMetri homepage, open the experience editor.
From within the editor, click Settings > E-Commerce > Select WooCommerce from the dropdown
Enter the Endpoint noted during wordpress domain name configuration
Enter the Checkout URL noted during wordpress cart URL configuration
Check Show Cart Icon to enable showing a cart counter and checkout link to the wordpress store from within a GMetri experience.
Above setup will internally create a set of rules to open and pull information for the relevant products from shopify storefront whenever an element is clicked. The resulting rules would read out like so: "When Books-Image is clicked, then show product with SKU"
From your GMetri editor, close the Settings page.
Click on Play icon on the top right of the page and open a preview link
Click on an element which was selected in the Ecommerce section.
This should open up the product page with information from the woocommerce store, including pricing details, pictures and variants.
Try adding the product to cart, increase and decrease the quantity of purchase.
Click on Cart Icon on the top left of the page to goto wordpress store and start the payment process.
To run this experience, you need to add an embed code in your wordpress website
To get embed code, follow Get WooCommerce Embed Code section.
Once you have the embed code, follow Add GMetri Embed Code to Wordpress page section to add your GMetri Experience.
Add a custom HTML element
