WooCommerce：如何显示“产品附加组件”扩展中的字段？

我正在使用 WooCommerce 的 [产品附加组件][1] 扩展，它允许产品的自定义字段。这会自动显示在单个产品模板上。

通过对单一产品模板的一些尝试和错误，它似乎挂在了某个地方woocommerce_single_product_summary（single_meta？）。

我需要将同一组表单字段显示在archive-product模板（产品列表）。就我而言，这是卡请求字段和交货日期字段。两者都需要才能将产品从产品存档添加到购物车。我不确定是否有一个可以调用的函数，如果它涉及一些更高级的编码。

根据 Pelmered 的回答，我能够通过将其添加到functions.php 来显示附加字段：

add_action( 'woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);

第一次尝试

然后，问题是产品存档没有创建表单元素，只是创建“添加到购物车”按钮的锚链接。所以我尝试手动填写表格。代码来自content-product.php:

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<h2><?php the_title(); ?></h2>

<?php // MANUALLY PUT IN FORM, BECAUSE HOOKS ONLY PUT IN A BUTTON AND NO FORM. NEEDED FOR ADD-ON FIELDS ?>
<form class="cart" method="post" enctype='multipart/form-data'>
    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>          
    <div itemprop="description">
        <?php the_content(); ?>
    </div>
    <input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->id ); ?>" />
    <button type="submit" class="single_add_to_cart_button button alt"><?php echo $product->single_add_to_cart_text(); ?></button>
</form>

<?php //do_action( 'woocommerce_after_shop_loop_item' ); ?>

这可行，但有点搞乱了 AJAX 提交和 flash 消息。单击“添加到购物车”按钮后，页面似乎刷新，然后看起来什么也没发生。但是当您转到另一个页面时，它会显示消息（并且可以堆叠多个）。

第二次尝试

所以我看到原始的 AJAX 购物车按钮（不在表单内）使用查询字符串发送产品 ID。因此，我现在尝试通过修改添加到购物车 JS 来添加其他参数。这奏效了。我所做的添加为已接受的答案。

我找到了一个有效的解决方案，使用 jQuery 将表单字段值添加到 AJAX 请求。这需要使用您自己的版本覆盖 add-to-cart.js，因此可能需要合并该文件的未来更新。

在functions.php中

// display add-on fields in woocommerce_after_shop_loop_item_title
add_action( 'woocommerce_after_shop_loop_item_title', array($GLOBALS['Product_Addon_Display'], 'display'), 10);

// Our custom cart JS to allow for product add-on fields on product archive
add_action( 'wp_enqueue_scripts', 'load_woo_scripts', 9 );
function load_woo_scripts() { 
    wp_enqueue_script( 'wc-add-to-cart', get_template_directory_uri() . '/js/add-to-cart.js', array( 'jquery' ), WC_VERSION, true );
}

复制/assets/add-to-cart.js从 woocommerce 插件文件夹中，并将其添加到中引用的文件夹中load_woo_scripts。然后在后面添加以下内容var date = {声明（第 21 行）。

// =========================================================================
// ADD PRODUCT ADD-ON FIELDS TO SUBMISSION (to allow from product archive)
// Store name and value of fields in object.
var addonfields = {}; 
$(this).parent().find(".after-shop-loop-item-title :input").each(function() { 
    addonfields[this.name] = $(this).val(); 
}); 

// Merge new fields and existing data
data = $.extend(data, addonfields);

// Testing: final value of data
console.log( data );
// =========================================================================

这会添加所有输入字段的名称和值.after-shop-loop-item-title分区我已将此 div/类添加到我的主题中woocommerce/content-product.php模板：

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>
<h2><?php the_title(); ?></h2>
<div itemprop="description">
    <?php the_content(); ?>
</div>

<div class="after-shop-loop-item-title">
    <?php
        /**
         * woocommerce_after_shop_loop_item_title hook
         *
         * @hooked woocommerce_template_loop_rating - 5
         * @hooked woocommerce_template_loop_price - 10
         */
        do_action( 'woocommerce_after_shop_loop_item_title' );
    ?>  
</div>

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

请注意，就我而言，我仅使用文本区域和文本输入。两者都不会改变价格。扩展的更高级使用可能需要更多工作。

我真的希望 WooCommerce 将来能让这一切变得更容易......