SudoMock
Integration

WooCommerce Integration

Automatically generate product mockups for your WooCommerce store using webhooks or custom plugins.

WordPress + WooCommerce

Product published → Generate mockup → Set as featured image → Live on store

Integration Methods

WooCommerce Webhooks

Trigger on product create/update events

Custom PHP Plugin

Hook into WooCommerce actions directly

n8n/Zapier

No-code automation with WooCommerce triggers

REST API Script

Batch process existing products

Method 1: WooCommerce Webhooks

1

Create Webhook Endpoint

Deploy an endpoint to receive WooCommerce webhooks:

WooCommerce Webhook Handler
1// Express.js webhook handler for WooCommerce
2import express from 'express';
3import crypto from 'crypto';
4
5const app = express();
6app.use(express.json());
7
8const WC_WEBHOOK_SECRET = process.env.WC_WEBHOOK_SECRET;
9const SUDOMOCK_API_KEY = process.env.SUDOMOCK_API_KEY;
10const WC_API_URL = process.env.WC_API_URL;
11const WC_CONSUMER_KEY = process.env.WC_CONSUMER_KEY;
12const WC_CONSUMER_SECRET = process.env.WC_CONSUMER_SECRET;
13
14const TEMPLATES = {
15 't-shirt': { mockup: 'tshirt-uuid', so: 'so-uuid' },
16 'hoodie': { mockup: 'hoodie-uuid', so: 'so-uuid' },
17 'poster': { mockup: 'poster-uuid', so: 'so-uuid' }
18};
19
20// Verify WooCommerce webhook signature
21function verifyWebhook(req) {
22 const signature = req.headers['x-wc-webhook-signature'];
23 const hash = crypto
24 .createHmac('sha256', WC_WEBHOOK_SECRET)
25 .update(JSON.stringify(req.body))
26 .digest('base64');
27 return signature === hash;
28}
29
30app.post('/webhooks/woocommerce/product-created', async (req, res) => {
31 if (!verifyWebhook(req)) {
32 return res.status(401).send('Invalid signature');
33 }
34
35 const product = req.body;
36
37 // Get design URL from product meta or custom field
38 const designUrl = product.meta_data?.find(m => m.key === 'design_url')?.value;
39 const productType = product.categories?.[0]?.slug || 't-shirt';
40
41 if (!designUrl) {
42 console.log('No design URL, skipping');
43 return res.status(200).send('Skipped');
44 }
45
46 try {
47 // Generate mockup
48 const mockupUrl = await generateMockup(designUrl, productType);
49
50 // Upload to WooCommerce media library and set as featured image
51 await setProductImage(product.id, mockupUrl);
52
53 console.log(`Generated mockup for product ${product.id}`);
54 res.status(200).send('OK');
55
56 } catch (error) {
57 console.error('Error:', error);
58 res.status(500).send('Error');
59 }
60});
61
62async function generateMockup(designUrl, productType) {
63 const template = TEMPLATES[productType] || TEMPLATES['t-shirt'];
64
65 const response = await fetch('https://api.sudomock.com/api/v1/renders', {
66 method: 'POST',
67 headers: {
68 'X-API-KEY': SUDOMOCK_API_KEY,
69 'Content-Type': 'application/json'
70 },
71 body: JSON.stringify({
72 mockup_uuid: template.mockup,
73 smart_objects: [{
74 uuid: template.so,
75 asset: { url: designUrl }
76 }],
77 export_options: {
78 image_format: 'webp',
79 image_size: 2000,
80 quality: 95
81 }
82 })
83 });
84
85 const result = await response.json();
86 if (!result.success) throw new Error(result.detail);
87
88 return result.data.print_files[0].export_path;
89}
90
91async function setProductImage(productId, imageUrl) {
92 const auth = Buffer.from(`${WC_CONSUMER_KEY}:${WC_CONSUMER_SECRET}`).toString('base64');
93
94 await fetch(`${WC_API_URL}/wp-json/wc/v3/products/${productId}`, {
95 method: 'PUT',
96 headers: {
97 'Authorization': `Basic ${auth}`,
98 'Content-Type': 'application/json'
99 },
100 body: JSON.stringify({
101 images: [{ src: imageUrl }]
102 })
103 });
104}
105
106app.listen(3000);
2

Register Webhook in WooCommerce

Go to WooCommerce → Settings → Advanced → Webhooks, add:

  • Name: SudoMock Mockup Generator
  • Topic: Product created
  • Delivery URL: https://your-server.com/webhooks/woocommerce/product-created
  • Secret: Your webhook secret

Method 2: Custom PHP Plugin

For direct WordPress integration, create a simple plugin:

WordPress Plugin (mu-plugins/sudomock-auto-mockups.php)
1<?php
2/**
3 * Plugin Name: SudoMock Auto Mockups
4 * Description: Automatically generate mockups for new products
5 * Version: 1.0.0
6 */
7
8defined('ABSPATH') || exit;
9
10class SudoMock_Auto_Mockups {
11
12 private $api_key;
13 private $templates;
14
15 public function __construct() {
16 $this->api_key = get_option('sudomock_api_key');
17 $this->templates = [
18 't-shirt' => ['mockup' => 'your-uuid', 'so' => 'your-so-uuid'],
19 'hoodie' => ['mockup' => 'your-uuid', 'so' => 'your-so-uuid'],
20 ];
21
22 // Hook into product save
23 add_action('woocommerce_update_product', [$this, 'generate_mockup'], 10, 1);
24 }
25
26 public function generate_mockup($product_id) {
27 $product = wc_get_product($product_id);
28
29 // Skip if already has images
30 if ($product->get_image_id()) {
31 return;
32 }
33
34 // Get design URL from custom field
35 $design_url = get_post_meta($product_id, 'design_url', true);
36 if (!$design_url) {
37 return;
38 }
39
40 // Get product type from category
41 $categories = wp_get_post_terms($product_id, 'product_cat');
42 $product_type = !empty($categories) ? $categories[0]->slug : 't-shirt';
43
44 // Generate mockup
45 $mockup_url = $this->call_sudomock_api($design_url, $product_type);
46
47 if ($mockup_url) {
48 // Upload to media library
49 $image_id = $this->upload_image($mockup_url, $product_id);
50
51 if ($image_id) {
52 $product->set_image_id($image_id);
53 $product->save();
54 }
55 }
56 }
57
58 private function call_sudomock_api($design_url, $product_type) {
59 $template = $this->templates[$product_type] ?? $this->templates['t-shirt'];
60
61 $response = wp_remote_post('https://api.sudomock.com/api/v1/renders', [
62 'headers' => [
63 'X-API-KEY' => $this->api_key,
64 'Content-Type' => 'application/json',
65 ],
66 'body' => json_encode([
67 'mockup_uuid' => $template['mockup'],
68 'smart_objects' => [[
69 'uuid' => $template['so'],
70 'asset' => ['url' => $design_url]
71 ]],
72 'export_options' => [
73 'image_format' => 'webp',
74 'image_size' => 2000,
75 'quality' => 95
76 ]
77 ]),
78 'timeout' => 30
79 ]);
80
81 if (is_wp_error($response)) {
82 error_log('SudoMock API error: ' . $response->get_error_message());
83 return false;
84 }
85
86 $body = json_decode(wp_remote_retrieve_body($response), true);
87
88 if (!$body['success']) {
89 error_log('SudoMock API error: ' . $body['detail']);
90 return false;
91 }
92
93 return $body['data']['print_files'][0]['export_path'];
94 }
95
96 private function upload_image($image_url, $product_id) {
97 require_once(ABSPATH . 'wp-admin/includes/media.php');
98 require_once(ABSPATH . 'wp-admin/includes/file.php');
99 require_once(ABSPATH . 'wp-admin/includes/image.php');
100
101 $image_id = media_sideload_image($image_url, $product_id, '', 'id');
102
103 if (is_wp_error($image_id)) {
104 error_log('Image upload error: ' . $image_id->get_error_message());
105 return false;
106 }
107
108 return $image_id;
109 }
110}
111
112new SudoMock_Auto_Mockups();

Plugin Installation

Save this file as sudomock-auto-mockups.php in yourwp-content/mu-plugins/ folder for automatic loading.

Method 3: Using n8n (No Code)

n8n WooCommerce Workflow
1// n8n Workflow Structure
21. WooCommerce Trigger
3 - Event: Product Created
4 - Credentials: Your WooCommerce store
5
62. IF Node
7 - Check if design_url meta field exists
8
93. HTTP Request (SudoMock)
10 - POST https://api.sudomock.com/api/v1/renders
11 - Generate mockup from design URL
12
134. WooCommerce Node
14 - Update Product
15 - Set images array with mockup URL

Automate Your WooCommerce Store

Get your API key and start generating product mockups automatically.