For the complete documentation index, see llms.txt. This page is also available as Markdown.

WooCommerce Integration Guide

Overview

The VU Custom + WooCommerce integration enables brands to power their WooCommerce catalog for customization/personalization within the VU Customizer. This guide walks through the setup of the customizer on WooCommerce, and the import of orders from WooCommerce into VU.

WooCommerce does not provide a standardized Cart API that third-party applications can use to add products directly to a shopper's cart. Because of this, the integration consists of two primary components:

  • Catalog Synchronization between WooCommerce and VU Admin

  • Custom Add-to-Cart (ATC) implementation within your WooCommerce storefront


Prerequisites

Before beginning the integration, ensure the following are available:

  • WooCommerce store

  • WordPress administrator access

  • VU Admin account

  • WooCommerce REST API credentials

  • Ability to customize your WooCommerce theme or install custom plugins


Step 1: Connect WooCommerce Catalog

The WooCommerce catalog must first be connected to VU Admin.

Within VU Admin, configure the WooCommerce integration using your WooCommerce REST API credentials.

Once connected, VU Admin imports:

  • Products

  • Product IDs

  • Product names

  • SKUs

  • Pricing (optional depending on implementation)

This catalog becomes the source for mapping configurable products to their WooCommerce counterparts.

Learn more about connecting a store within VU Custom.


Step 2: Embed the VU Customizer

The VU Customizer can be embedded directly within a WooCommerce product page.

The customizer is embedded via a JavaScript snippet on a page, and looks for context of what product it should load the corresponding configuration for. The store connection in the previous step establishes the connection between the product and corresponding configuration created within VU Admin. Ensure all of the variables are passed correctly upon page and customizer load.

The embedded customizer should receive:

  • Product ID

  • Store ID

  • Environment

  • Authentication (if applicable)

Learn more about how to embed the VU Customizer within a page


Step 3: Configure Product Templates

Templates house the options configured to a user when interacting with a product through the customizer. Brands can create and manage their custom offering directly within VU Admin, and assign products from their catalog to make the offering available for. This is called Product Linking.

Template Configuration consists of piecing together different selections available within a given product experience, such as custom image upload or selection of an icon. This is done through the configuration of Elements within a Template. Learn more about the template building process.


Step 4: Implement Add-to-Cart

Important

WooCommerce does not expose a native Cart API that external applications can use to add products directly into the customer's cart.

Because of this limitation, the Add-to-Cart workflow must be implemented within your WooCommerce storefront.

The custom implementation is responsible for:

  • Receiving the generated RecipeID from the VU Customizer

    • The recipe contains all configuration information required for manufacturing, including:

      • Selected options

      • Personalization

      • Materials

      • Colors

      • Uploaded assets

      • Configuration metadata

  • Creating the WooCommerce cart item

  • Associating the Recipe Token with the cart item

  • Redirecting the customer to the cart or checkout

Typical implementation methods include:

  • Custom WordPress plugin

  • AJAX endpoint

  • Custom REST endpoint

  • Theme-level JavaScript integration

The exact implementation depends on your WooCommerce architecture.


Required Cart Data

Each Add-to-Cart request should include:

Field
Description

WooCommerce Product ID

Product being purchased

Quantity

Quantity selected

Recipe Token

Unique VU configuration identifier

Customization Metadata

Optional configuration information

Pricing

Optional if dynamically calculated

Customer Information

Customer First and Last Name, and Shipping Address

The Recipe Token should always be stored alongside the WooCommerce cart item so it is available during checkout and order fulfillment.


Checkout

Once the customer proceeds through checkout, the WooCommerce order should preserve the Recipe Token as order metadata.

This allows downstream systems to retrieve:

  • Manufacturing data

  • Rendered images

  • Configuration selections

  • Personalization

  • Production files


Order Processing

After checkout, the WooCommerce order can be imported into VU using the existing order import process.

The Recipe Token links each order line back to the original configuration created in the customizer.

This enables the following via VU's OMS:

  • Production Art Generation

  • Production Document Generation (Order Traveler)

  • Order/Artwork Review

  • Order history/status updates


Summary

The WooCommerce integration combines VU's configurable product experience with WooCommerce's ecommerce capabilities through:

  • WooCommerce catalog synchronization

  • Product mapping in VU Admin

  • Embedded VU Customizer

  • Custom Add-to-Cart implementation

  • Recipe Token persistence

  • Standard WooCommerce checkout

Reach out to VU Custom's support team at support@vucustom.com for further assistance with your WooCommerce Integration

Last updated