Installation
The Spiff Connect plugin ("Spiff 3D Product Customizer and Product Designer for WooCommerce") adds a personalization button to your product pages, adds the customer's design to the cart, and sends the order to Spiff Commerce when it is placed. The source is public at github.com/spiffdev/woocommerce-plugin.
The plugin currently launches the hosted experience for a single product and records that design's transaction ID against the cart item. It does not yet use activations. If the experience returns a bundle, only the first design in it is added to the cart.
Requirements
- WordPress with WooCommerce.
- An integration in the Spiff Commerce Hub, and its application key.
- Each product you want to personalize must exist as an integration product in the Hub.
Installing the plugin
Install Spiff Connect from the WordPress plugin directory, or upload the spiff-connect directory from the repository to wp-content/plugins, then activate it from the Plugins page. The first time the plugin is activated it notifies Spiff Commerce of the installation.
Configuration
Open Spiff Connect in the WordPress admin menu.
Integration details
| Setting | Description |
|---|---|
Application Key | The application key from your integration in the Spiff Commerce Hub. |
Infrastructure | The region your Spiff Commerce account was created in: Australia or United States. This must match your account. |
Cart
| Setting | Description |
|---|---|
Show customer selections | Lists the customer's selections on the cart item. |
Show preview images | Replaces the product thumbnail in the cart with a preview of the design. |
Personalize button
Text, Font Size, Font Weight, Text Color, Background Color, Width and Height control the appearance of the button shown on product pages. They default to Personalize, 20px, 700, #fff, #da1c5c, 100% and 50px.
Customer portal button
The customer portal button lets customers return to their saved designs. Add it to any page with the [spiff_customer_portal_button] shortcode. Its text and styling are configured with the same settings as the personalize button. Designs chosen in the portal are added to the cart.
Enabling personalization on a product
Edit the product and, in the General tab of the product data panel, set:
| Field | Description |
|---|---|
Enable Personalize Button | Replaces the product's Add to Cart button with the personalize button, and the shop page button with View details. |
Spiff Integration Product ID | The integration product ID from the Hub. Find the product on your integration page in the Hub to get this ID. |
How it works
- On a product page with the button enabled, the plugin loads the Spiff Commerce hosted API and shows the personalize button once the integration product is confirmed as active.
- When the customer presses the button, the plugin launches a hosted experience for the product.
- When the customer finishes, the plugin adds the product to the WooCommerce cart, stores the design's transaction ID and selections against the cart item, and redirects the customer to the cart. The cart item's price is set from the product's base price plus the cost of the customer's selections.
- When the order moves to the
processingstatus, the plugin sends it to Spiff Commerce, including each design's transaction ID and quantity, the WooCommerce order number, customer contact details, billing and shipping addresses, coupon codes, and the customer's note. Orders already paid are marked as paid.
Failures when creating cart items or orders are written to the PHP error log and are not retried, so check the log if an order doesn't appear in the Hub.
See Additional Use Cases for customization options.