> For the complete documentation index, see [llms.txt](https://vu-custom.gitbook.io/vu-custom/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vu-custom.gitbook.io/vu-custom/integrations-connections/woocommerce-integration-guide.md). # 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](https://vu-custom.gitbook.io/vu-custom/integrations-connections/pages/X6K5wDbkbKTg3PRSlWUm#id-1.-out-of-the-box-ootb-configurations) 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](/vu-custom/onboarding/embedding-the-vu-customizer.md) 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](#step-3-configure-product-templates) 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 for further assistance with your WooCommerce Integration