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:
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