如何获取WooCommerce活跃商品变体图片URL并传递至WordPress小工具

我正在尝试将WooCommerce的活跃商品变体信息传递至WordPress小工具。当前小工具中用于显示图片的代码如下：

$product = wc_get_product(get_the_ID());
$artwork_url = wp_get_attachment_url($product->get_image_id());
$unit = get_option('woocommerce_dimension_unit');
$height2 = $product->get_height();
$width2 = $product->get_width();
$height = $height2;
$title = get_the_title();
$price = $product->get_price();
$measurements_display = $widget->dimensions == 1 ? 'WxH' : 'HxW';

其中$artwork_url存在问题：网站前端的变体选项可正常显示对应变体图片，但小工具无法通过该变量获取到活跃变体的图片URL。我尝试过获取缩略图、特色图片等，也定义过$variations、$variable_product等变量，但均未成功，恳请各位提供解决建议。

解决方案 #

1. 通过会话存储传递活跃变体ID #

小工具无法直接感知前端选中的变体，需要先在产品页监听变体选择事件，把选中的变体ID存入会话：

// 产品页添加JS代码，监听变体选择
jQuery(document).ready(function($) {
    $('form.variations_form').on('show_variation', function(event, variation) {
        $.post(ajaxurl, {
            action: 'save_active_variation',
            variation_id: variation.variation_id,
            product_id: variation.product_id
        });
    });
});

在主题的functions.php中添加AJAX处理函数，保存会话：

add_action('wp_ajax_save_active_variation', 'save_active_variation');
add_action('wp_ajax_nopriv_save_active_variation', 'save_active_variation');

function save_active_variation() {
    if(isset($_POST['variation_id']) && isset($_POST['product_id'])) {
        session_start();
        $_SESSION['active_variation_' . $_POST['product_id']] = $_POST['variation_id'];
        wp_die();
    }
}

2. 修改小工具代码读取变体图片 #

在小工具中先检查会话中的活跃变体ID，再获取对应图片：

$product_id = get_the_ID();
$product = wc_get_product($product_id);

// 默认使用父产品图片
$artwork_url = wp_get_attachment_url($product->get_image_id());
$height2 = $product->get_height();
$width2 = $product->get_width();
$price = $product->get_price();

// 读取会话中的活跃变体
session_start();
$active_variation_id = isset($_SESSION['active_variation_' . $product_id]) ? $_SESSION['active_variation_' . $product_id] : false;

if($active_variation_id && $product->is_type('variable')) {
    $variation = wc_get_product($active_variation_id);
    if($variation && $variation->get_image_id()) {
        $artwork_url = wp_get_attachment_url($variation->get_image_id());
    }
    // 同步变体的尺寸和价格
    $height2 = $variation->get_height();
    $width2 = $variation->get_width();
    $price = $variation->get_price();
}

// 其余代码保持不变
$unit = get_option('woocommerce_dimension_unit');
$height = $height2;
$title = get_the_title();
$measurements_display = $widget->dimensions == 1 ? 'WxH' : 'HxW';

3. 备选方案：通过URL参数传递变体ID #

如果会话方式不适用，可在变体选择后修改URL参数：

$('form.variations_form').on('show_variation', function(event, variation) {
    let url = new URL(window.location);
    url.searchParams.set('variation_id', variation.variation_id);
    window.history.replaceState({}, '', url);
});

然后在小工具中读取URL参数：

$active_variation_id = isset($_GET['variation_id']) ? intval($_GET['variation_id']) : false;
// 后续获取变体图片、尺寸的逻辑同会话方案

内容的提问来源于stack exchange，提问作者user3228513