Question

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

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

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

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

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

Answer 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 文件中。它应该可以工作。

Answer 2

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

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

2 个答案: