This is the complete step-by-step WooCommerce integration tutorial for adding the DTFGSA AI gang sheet builder to your WordPress storefront. Total install time: 15-20 minutes. No code required for the standard install — copy-paste shortcode embed.
By the end of this tutorial, your WooCommerce site will accept 24/7 DTF gang sheet orders with AI auto-nesting, automatic white channel + adaptive choke, and RIP-ready production file generation — all running inline on a product page on your domain, with WooCommerce handling checkout, payment, and order management.
Create a free account at builder.dtfgangsheetapp.com. Once logged in, navigate to Settings → Embed Tokens → Create new token.
You'll get an embed token that looks like tok_live_abc123def456.... This token authenticates your WooCommerce site with DTFGSA. Save it — you'll need it in step 3.
From your WordPress admin: Plugins → Add New → Search "DTFGSA". Install and activate the official "DTFGSA Gang Sheet Builder for WooCommerce" plugin.
After activation, go to Settings → DTFGSA in your WP admin. Paste your embed token from step 1. Save changes.
Plugin not available? If the plugin isn't yet in the official WordPress directory for your region, use the universal HTML embed approach instead (see "Alternative: Universal HTML embed" section below). The capability is identical — the plugin just adds WooCommerce-specific conveniences.
From WooCommerce: Products → Add New. Configure as follows:
0.05 kg for accurate shipping calculations on small flat shipmentsIn the product description (using the WordPress block editor), insert the DTFGSA builder. Two options:
In the block inserter, search for "DTFGSA Gang Sheet Builder" and add the block. Done.
Paste this shortcode into the product description:
[dtfgsa_builder product_id="{{product_id}}"]Save the product. Set its visibility to "Catalog and search" and click Publish.
Open your site in an incognito browser and navigate to the new product page. You should see:
If the builder appears but pricing isn't updating, the most common cause is the WooCommerce price filter not running. Verify the DTFGSA plugin is activated and the embed token is configured.
When a customer completes checkout, you want the production-ready TIFF file delivered to your fulfillment system. Three options:
The DTFGSA WordPress plugin adds a "DTFGSA File" column to WooCommerce → Orders. Click the download icon on any order row to fetch the production-ready file. Best for shops doing under 30 orders/day.
From WP admin: WooCommerce → Settings → Advanced → Webhooks → Add webhook. Configure:
The webhook payload will contain a line_items[].meta_data entry with the DTFGSA file URL.
Configure the DTFGSA plugin to email the production-ready file to your operations email when each order completes. Useful for shops without a dedicated fulfillment system.
If the file opens cleanly in your RIP without manual prep, your integration is working correctly.
If you prefer not to install the plugin (or the plugin isn't available in your region), use the universal HTML embed approach. Drop this snippet into the product description's "Custom HTML" block, replacing YOUR_TOKEN_HERE with your embed token:
<div id="dtfgsa-builder-mount"></div>
<script async src="https://builder.dtfgangsheetapp.com/embed.js"
data-token="YOUR_TOKEN_HERE"
data-mount="dtfgsa-builder-mount"
data-platform="woocommerce">
</script>For dynamic pricing without the plugin, add this filter to your theme's functions.php or a custom plugin:
add_filter('woocommerce_add_cart_item_data', 'dtfgsa_add_price', 10, 3);
function dtfgsa_add_price($cart_item_data, $product_id, $variation_id) {
if (!empty($_POST['dtfgsa_calculated_price'])) {
$cart_item_data['dtfgsa_price'] = floatval($_POST['dtfgsa_calculated_price']);
$cart_item_data['dtfgsa_file_url'] = sanitize_url($_POST['dtfgsa_file_url']);
}
return $cart_item_data;
}
add_action('woocommerce_before_calculate_totals', 'dtfgsa_set_price', 10, 1);
function dtfgsa_set_price($cart) {
foreach ($cart->get_cart() as $cart_item) {
if (isset($cart_item['dtfgsa_price'])) {
$cart_item['data']->set_price($cart_item['dtfgsa_price']);
}
}
}This is roughly 12 lines of PHP that the plugin handles automatically. Either approach works equivalently in production.
| Issue | Cause | Fix |
|---|---|---|
| Embed shows blank | Token not recognized | Verify in DTFGSA dashboard; regenerate if needed |
| Cart price shows $0.01 | Plugin not active or filter not running | Activate the plugin or paste the PHP filter from above |
| Builder loads but doesn't fit theme | Theme has aggressive responsive CSS | Add .dtfgsa-mount{max-width:100%;overflow:visible} to your child theme CSS |
| Customer can't checkout | WooCommerce checkout fields blocked | Verify WooCommerce checkout pages exist and "WooCommerce Endpoints" are functioning |
| White channel missing in export | Free tier doesn't include adaptive choke | Upgrade to Growth ($159/mo) or use default choke |
| Order shows up but no file | File delivery not configured | Set up Option A, B, or C from step 5 |
WooCommerce gives DTF shops some unique advantages over Shopify:
The trade-off: you manage hosting, SSL, backups, and updates yourself (or via your WordPress hosting plan).
Free to use. No subscription required to start. Get your embed token in 60 seconds and have the builder live on WooCommerce within 20 minutes.
Get started →