使用自定义字段自定义 WooCommerce 变量产品

Question

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

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

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

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

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

Answer 1

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

Answer 2

需要一些步骤。

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 文件。它应该有效。

使用自定义字段自定义 WooCommerce 变量产品

Customization on WooCommerce variable product with custom fields

php

wordpress

woocommerce

custom-fields

product-variations