> ## Documentation Index
> Fetch the complete documentation index at: https://sudomock.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> The base URL is https://api.sudomock.com.
> Authenticate every request with the x-api-key header. Keys begin with sm_.
> A render returns the finished image at data.print_files[0].export_path. A request sent with is_async true returns a job_id to poll at GET /api/v1/jobs/{job_id}.
> Prefer the official SDKs over hand-written HTTP calls: npm install sudomock for Node, pip install sudomock for Python.

# Customize products with WooCommerce and SudoMock

> Let shoppers personalise products in WooCommerce.

[WooCommerce](https://woocommerce.com) turns WordPress into a store. The
official [SudoMock Product Customizer](https://wordpress.org/plugins/sudomock-product-customizer/)
plugin puts a customization studio on your product pages. A shopper uploads
artwork, sees it rendered on your own PSD mockup, and adds the result to the
cart. The rendered image is kept on the order, so the file you fulfil is the
file the shopper approved.

## Before you start

* WordPress 6.0 or newer, with WooCommerce 8.0 or newer, on PHP 7.4 or newer.
* A SudoMock account with at least one uploaded template.

## Set up the plugin

**1. Install from the plugin directory**

Open the
[SudoMock Product Customizer listing](https://wordpress.org/plugins/sudomock-product-customizer/)
and install it from **Plugins, Add New** in your WordPress admin, then
activate it.

**2. Connect your SudoMock account**

Open **SudoMock** in the admin sidebar and select **Connect account**. The
plugin keeps the credential encrypted in your WordPress install, and the
storefront receives a short lived session token instead.

**3. Map a mockup to a product**

Upload your templates in the
[SudoMock dashboard](https://sudomock.com/dashboard), then open the
**Products** tab and map a template to each product you want to make
customizable. [Upload a PSD](https://sudomock.com/docs/psd-mockups/upload-a-psd.md) covers what a good
template looks like.

**4. Place the Customize button**

Where the button lives depends on your theme.

| Theme type | How to place the button |
| - | - |
| Block theme | Add the Product Customizer block in the Site Editor |
| Classic theme | Set the button options in the WordPress Customizer |

> [!NOTE]
>
> The plugin follows WooCommerce high performance order storage and the
> checkout blocks, so the rendered preview survives from cart to order on a
> current store.

## What the shopper's design becomes

The studio renders against your PSD template, so the preview a shopper approves
is the same render your fulfilment step downloads. The preview appears on the
cart line, and the finished image is written to the order alongside the line
item.

## When you want the API instead

The plugin covers the storefront path, where a shopper does the designing. If
you want to generate images yourself, from a spreadsheet, a catalogue feed, or
your own backend, call the render API directly and keep the plugin for the
storefront. Start at the [Quickstart](https://sudomock.com/docs/quickstart.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.