使用自定义字段自定义 WooCommerce 可变产品答案

【问题标题】：Customization on WooCommerce variable product with custom fields使用自定义字段自定义 WooCommerce 可变产品
【发布时间】：2021-04-16 16:00:23
【问题描述】：

我们使用 WooCommerce 和 WordPress 以及预定义的产品创建了一个网站。但是，产品 A 必须有变化，为了解决这个问题，我们添加了自定义字段，例如颜色、尺寸等......

现在，一旦最终用户导航到产品，我们就可以获取自定义字段值。我们还修改了 UI，以便用户可以从这些自定义字段中进行选择。（我们通过 JS/CSS 预览了修改），例如，如果他们选择绿色，我们使用 JS 添加一层绿色，以便实时预览。

现在，我们面临一个挑战。 -> 添加此产品以及对购物车所做的所有修改的最佳方法是什么？例如，使用从自定义字段中提取的数据修改了产品 A（在前端），以包括颜色：绿色和尺寸：100x100，而不是默认值。我们如何存储这个并将定制的产品传递到购物车？

感谢您的帮助！。如果有不清楚的地方，很高兴添加更多细节。

（有一些插件可以提供此功能；类似于 WooCommerce 产品插件等的东西......但是，我们必须自定义开发该功能。）

【问题讨论】：

标签： php wordpress woocommerce custom-fields product-variations

【解决方案1】：

这需要一些步骤。

1)。对于您的产品页面：

首先，您可能需要将隐藏字段添加到每个自定义字段的添加到购物车表单中，例如（示例）：

add_action( 'woocommerce_before_add_to_cart_button', 'add_hidden_empty_input_fields' );
function add_hidden_empty_input_fields() {
    ?>
    <input type="hidden" name="hidden_color" id="hidden_color" value="">
    <input type="hidden" name="hidden_dimensions" id="hidden_dimensions" value="">
    <?php
}

然后您必须对您的 Javascript 代码进行一些更改，以便在这些隐藏字段中设置自定义字段选择值。

2)。将自定义字段选择值作为自定义购物车项目数据传递 （示例）：

add_filter('woocommerce_add_cart_item_data', 'add_custom_field_data', 10, 3 );
function add_custom_field_data( $cart_item_data, $product_id, $variation_id ) {
    if ( isset($_POST['hidden_color']) && ! empty($_POST['hidden_color']) ) {
        $cart_item_data['color'] = esc_attr($_POST['hidden_color']);
    }
    if ( isset($_POST['hidden_dimensions']) && ! empty($_POST['hidden_dimensions']) ) {
        $cart_item_data['dimensions'] = esc_attr($_POST['hidden_dimensions']);
    }
    return  $cart_item_data;
}

并且可选地在购物车物品上显示值（示例）：

add_filter( 'woocommerce_get_item_data', 'display_custom_cart_item_data', 10, 2 );
function display_custom_cart_item_data( $cart_data, $cart_item ) {
    if ( isset($cart_item['color']) ) {
        $cart_data[] = array( "name" => __("Color"),  "value" => $cart_item['color']  );
    }
    if ( isset($cart_item['dimensions']) ) {
        $cart_data[] = array( "name" => __("Dimensions"), "value" => $cart_item['dimensions'] );
    }
    return $cart_data;
}

3)。将自定义购物车商品数据保存为自定义订单商品元数据 （示例）：

add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_order_item_meta_data' , 10, 4 );
function save_custom_order_item_meta_data( $item, $cart_item_key, $values, $order ) {
    if ( isset($values['color']) ) {
        $item->add_meta_data( __("Color"), $values['color'] );
    }

    if ( isset($values['dimensions']) ) {
        $item->add_meta_data( __("Dimensions"), $values['dimensions'] );
    }
}

注意： 数据将显示在订单和电子邮件通知的任何地方。

代码位于活动子主题（或活动主题）的functions.php 文件中。它应该可以工作。

【讨论】：

【解决方案2】：

变体有一个 post_id，您只需使用变体 post_id 而不是主要产品。

【讨论】：