使用附加输入字段自定义 WooCommerce 单一产品

Question

嗯，我有一个问题，我想知道如何在“商品数量”和“添加到购物车”部分之上创建额外的输入，以便客户可以为自己个性化他们的产品。我希望能够在我的主题中自己完成此操作，无需插件，除非任何插件实际上满足了这些目标。

我想知道使用“woocommerce_before_add_to_cart_button”连接是否是一个好的选择？稍后我如何将这些输入的值添加到该产品中以便能够在订单摘要中显示它们？

目前我有这段代码可以添加字段本身。

不幸的是，这些字段不会显示在购物车、订单摘要或 ACP 中的订单中。我究竟做错了什么？这是正确的方法吗？

function my_personalization_field() {
    $html = '<div class="personalization-field">';
        $html .= '<label for="personalization">Personalization:</label>';
        $html .= '<input type="text" id="personalization" name="my_personalization" />';
    $html .= '</div>';

    echo $html;
}
add_action('woocommerce_before_add_to_cart_button', 'my_personalization_field');


function my_adding_custom_data_in_order_items_meta( $item_id, $values, $cart_item_key ) {
    if ( isset($values['my_personalization']) ) {
        $custom_value = $values['my_personalization'];
        wc_add_order_item_meta($item_id, 'my_personalization', $custom_value );
    }
}
add_action('woocommerce_add_order_item_meta','my_adding_custom_data_in_order_items_meta', 10, 3 );

function my_display_personalization_data_in_cart($product_name, $cart_item, $cart_item_key) {
    if(isset($cart_item['my_personalization'])) {
        $product_name .= '<br><small>Personalization: ' . esc_html($cart_item['my_personalization']) . '</small>';
    }

    return $product_name;
}
add_filter('woocommerce_cart_item_name', 'my_display_personalization_data_in_cart', 10, 3);

Answer 1

您需要将该数据添加到购物车会话中，然后您可以在购物车/结帐/订单页面上访问该数据。

// This captures additional posted information
function custom_add_item_data($cart_item_data, $product_id) {

    global $woocommerce;

    if(!isset($_POST['my_personalization']))
       return $cart_item_data;
    
    $new_value = array();
    $new_value['my_personalization'] = $_POST['my_personalization'];

    if(empty($cart_item_data)) {
        return $new_value;
    } else {
        return array_merge($cart_item_data, $new_value);
    }
}
add_filter('woocommerce_add_cart_item_data','custom_add_item_data',1,10);

// This captures the information from the previous function and attaches it to the item.
function custom_get_cart_items_from_session($item,$values,$key) {

    if (array_key_exists( 'my_personalization', $values ) ) {
        $item['my_personalization'] = $values['my_personalization'];
    }

    return $item;
}
add_filter('woocommerce_get_cart_item_from_session', 'custom_get_cart_items_from_session', 1, 3 );

Answer 2

您的代码有点过时且不完整。尝试使用以下替换代码在购物车、结帐、订单和电子邮件通知中显示您的自定义字段值：

add_action('woocommerce_before_add_to_cart_button', 'single_product_custom_field_display');
function single_product_custom_field_display() {
    echo '<div class="personalization-field">
    <label for="personalization">'.__('Personalization:').'</label>
    <input type="text" id="personalization" name="personalization" />
    </div>';
}

// Save custom fields as custom cart item data
add_filter('woocommerce_add_cart_item_data', 'add_custom_cart_item_data', 20, 2 );
function add_custom_cart_item_data( $cart_item_data, $product_id ) {
    if ( isset($_POST['personalization']) ) {
        $cart_item_data['personalization'] = sanitize_text_field($_POST['personalization']);
    }
    return $cart_item_data;
}

// Display custom fields in Cart and Checkout
add_filter( 'woocommerce_get_item_data', 'display_custom_cart_item_data', 20, 2 );
function display_custom_cart_item_data( $cart_data, $cart_item ) {
    if( isset($cart_item['personalization']) ) {
        $cart_data[] = array(
            'key'   => __('Personalization'),
            'value' => $cart_item['personalization'],
        );
    }
    return $cart_data;
}

// Save and display custom fields (custom order item metadata)
add_action( 'woocommerce_checkout_create_order_line_item', 'save_order_item_custom_meta_data6', 10, 4 );
function save_order_item_custom_meta_data6( $item, $cart_item_key, $values, $order ) {
    if( isset($values['personalization']) ) {
        $item->update_meta_data('personalization', $values['personalization']); 
    }
}

// Add readable "meta key" label name replacement
add_filter('woocommerce_order_item_display_meta_key', 'filter_wc_order_item_display_meta_key6', 10, 3 );
function filter_wc_order_item_display_meta_key6( $display_key, $meta, $item ) {
    if( $item->get_type() === 'line_item' ) {
        if( $meta->key === 'personalization' ) {
            $display_key = __('Personalization');
        }
    }
    return $display_key;
}

代码位于子主题的functions.php 文件中（或插件中）。已测试并有效。

您将得到：

在购物车和结帐页面上：

在客户订单页面：

关于电子邮件通知：

在管理订单页面上：