WooCommerce & WordPress Hook Integration

专为 WooCommerce 独立站打造的 AI 虚拟试衣间

Name: Anddress
Author: Anddress

无需安装臃肿的 WordPress 插件，通过轻量 Web Component 直接接入，服务器零负担。

查看套餐并开始下载 .zip 插件客户登录

零 PHP 开销

不占用你 WordPress 服务器的 CPU 和内存。全部 GPU 推理都在 Anddress 的基础设施上完成。

原生 WooCommerce 钩子

原生挂载到 woocommerce_after_add_to_cart_button 等标准动作点，无需改动核心模板。

兼容页面构建器

在 Elementor Pro 单品模板、Divi Builder 或 Gutenberg 商品区块中都能顺畅运行，使用隔离的 Shadow DOM。

官方 WordPress / WooCommerce 插件

在 WordPress 后台一键上传安装

下载 ZIP 文件并通过“插件 > 安装插件 > 上传插件”直接安装。填入公钥即可在所有商品页自动启用。

下载 .zip 插件

functions.php

把这段代码加到你的子主题里

wp-content/themes/child-theme/functions.php:

// 1. Anddress loader (~5 KB)
add_action('wp_footer', function() {
    echo '<script src="https://app.anddress.com/widget/anddress-loader.js" data-brand-key="pk_live_..." async></script>';
});

// 2. Try-on button on the WooCommerce product page
add_action('woocommerce_after_add_to_cart_button', function() {
    global $product;
    if (!$product) return;
    $img_id  = $product->get_image_id();
    $img_url = wp_get_attachment_image_url($img_id, 'full');
    ?>
    <div style="margin-top: 14px;">
      <anddress-tryon-button
        data-garment-image="<?php echo esc_url($img_url); ?>"
        data-garment-category="tops"
        data-garment-id="<?php echo esc_attr($product->get_sku() ?: $product->get_id()); ?>"
        data-garment-name="<?php echo esc_attr($product->get_name()); ?>">
      </anddress-tryon-button>
    </div>
    <?php
});

// 3. Sales attribution on the order-received page
add_action('woocommerce_thankyou', function($order_id) {
    if (!$order_id) return;
    $order = wc_get_order($order_id);
    if (!$order) return;
    ?>
    <script>
      window.Anddress?.trackPurchase({
        orderId: '<?php echo esc_js($order_id); ?>',
        value: <?php echo esc_js($order->get_total()); ?>,
        currency: '<?php echo esc_js($order->get_currency()); ?>'
      });
    </script>
    <?php
});