Skip to main content
WooCommerce turns WordPress into a store. The official 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 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, then open the Products tab and map a template to each product you want to make customizable. Upload a PSD covers what a good template looks like.
4

Place the Customize button

Where the button lives depends on your theme.
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.