# WooCommerce Integration
### Quick Steps to integrate WooCommerce Store x GMetri Experience
1. [Enable Storefront API access](#enable-storefront-api-access)
2. [Getting Product SKUs](#getting-a-product-sku)
3. [Get GMetri Embed Code](#get-woocommerce-embed-code) and [Add to WooCommerce Page](#add-gmetri-embed-code-to-wordpress-page)
4. [Integrate WooCommerce Products with GMetri](#integration-with-gmetri)
5. [Test your integration](#testing-the-integration) and have fun creating WooCommerce stores in the metaverse.
### Enable Storefront API access
There are a few steps that are required to enable WooCommerce Storefront API access on your wordpress account.
1. Login to your wordpress admin dashboard.
2. From your wordpress admin, click Settings > Permalinks
3. 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](https://woocommerce.com/document/permalinks/).
4. Click on Save Changes once updated.
5. [Get Domain name](#domain-name) and save it for later.
6. [Get Cart URL](#cart-url) and save it for later.
#### Domain name
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.
1. From your wordpress admin, click Settings > General
2. The site address URL is the domain name of your store. Note it down for later.
#### Cart URL
Get the checkout URL for your wordpress store
1. From your wordpress admin, click Pages > Cart page
2. Click on Edit.
3. Copy the page URL from the settings tab on the right side of the page
### Getting a Product SKU
To get a product's SKU
1. From your wordpress admin, click Products > Select a product
2. Click on Inventory and copy the SKU. If there is no SKU, add one and note the SKU for later.
3. If the product has variations, make sure every variation has an SKU added.
4. Only the SKU in the inventory section (Parent SKU) is required for products with variations.
### Get WooCommerce Embed code
1. From your GMetri homepage, open the experience editor.
2. From within the editor, click Publish > Others in Sharing options
3. At the bottom, download the HTML file to be added to your wordpress store.
### Add GMetri Embed Code to Wordpress page
1. From wordpress admin, open Pages section
2. Add or edit a page wherever you want to add your GMetri Experience
3. Add a custom HTML element\
4. Paste the HTML embed code there and publish
### Integration with GMetri​
{% hint style="info" %}
The WooCommerce Plugin will be automatically enabled based on your access and organization subscription. If you do not see the option to select WooCommerce, consider upgrading your subscription.
{% endhint %}
If you are the admin or a collaborator, then you can configure WooCommerce integration with GMetri.
1. From your GMetri homepage, open the experience editor.
2. From within the editor, click Settings > E-Commerce > Select `WooCommerce` from the dropdown
3. Enter the Endpoint noted during wordpress domain name configuration
4. Enter the Checkout URL noted during wordpress cart URL configuration
5. Check `Show Cart Icon` to enable showing a cart counter and checkout link to the wordpress store from within a GMetri experience.
6. 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"
### Testing the integration
1. From your GMetri editor, close the Settings page.
2. Click on `Play` icon on the top right of the page and open a preview link
3. Click on an element which was selected in the Ecommerce section.
4. This should open up the product page with information from the woocommerce store, including pricing details, pictures and variants.
5. Try adding the product to cart, increase and decrease the quantity of purchase.
6. Click on `Cart Icon` on the top left of the page to goto wordpress store and start the payment process.
7. To run this experience, you need to add an embed code in your wordpress website
1. To get embed code, follow Get WooCommerce Embed Code section.
2. Once you have the embed code, follow Add GMetri Embed Code to Wordpress page section to add your GMetri Experience.
