WooCommerce Integration

This guide shows how to connect to the WooCommerce REST API to display products in YOOtheme Pro.

Prerequisites

• WooCommerce store with REST API enabled
• API credentials (Consumer Key & Secret)
• API Mapper Pro or Developer license (for unlimited products)

Step 1: Generate WooCommerce API Keys

1. In your WooCommerce store, go to WooCommerce → Settings → Advanced → REST API
2. Click Add Key
3. Enter a description (e.g., "API Mapper")
4. Set Permissions to Read
5. Click Generate API Key
6. Copy the Consumer Key and Consumer Secret

Step 2: Create the Connection

1. Open API Mapper settings
2. Click Add Connection
3. Configure:
   • Name: WooCommerce Products
   • Base URL: https://your-store.com/wp-json/wc/v3

Step 3: Configure Authentication

WooCommerce uses a special authentication method:

1. Set Authentication to Basic Auth
2. Enter your Consumer Key as username
3. Enter your Consumer Secret as password

Step 4: Set Up the Endpoint

1. Endpoint: /products
2. Method: GET

Optional Query Parameters

Step 5: Map Product Fields

Add these field mappings:

Step 6: Test and Save

1. Click Test Connection
2. Verify you see product data
3. Click Save

Using in YOOtheme

1. Open YOOtheme Pro Customizer
2. Add a Grid element
3. Set Dynamic Content to API Mapper: WooCommerce Products
4. Map fields:
   • Title → Name
   • Image → Image
   • Content → Short Description
   • Link → Link

Displaying Price

To show formatted prices, use a Text element with the Price field. You may need to add currency formatting in your template.

Advanced: Categories

To display product categories:

1. Create a new connection
2. Endpoint: /products/categories
3. Map fields:
   • id → ID
   • name → Name
   • image.src → Image
   • count → Product Count

Troubleshooting

"Consumer key is invalid"

• Verify the key was copied correctly
• Check if the key has Read permissions
• Ensure the WooCommerce REST API is enabled

Empty response

• Check if products exist and are published
• Verify the status=publish parameter
• Check API permissions

CORS errors

• This happens when testing from browser console
• API Mapper makes server-side requests, so CORS shouldn't affect it

Next Steps

• Field Mapping
• Caching