Question

我想在单品详细信息页面中为用户创建自定义订单备注。这个可以使用没有插件的PHP。我附上了截图和网站网址以供参考。

我们已尝试使用function.php中的此代码处理结帐页面，而不是产品详情页面。任何人都帮助我实现这一目标。

add_action('woocommerce_after_order_notes', 'customise_checkout_field');

    function customise_checkout_field($checkout)
    {
    echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
    woocommerce_form_field('customised_field_name', array(
    'type' => 'text',
    'class' => array(
    'my-field-class form-row-wide'
    ) ,
    'label' => __('Customise Additional Field') ,
    'placeholder' => __('Guidence') ,
    'required' => true,
    ) , $checkout->get_value('customised_field_name'));
    echo '</div>';
    }

website url

Answer 1

要使其正常工作，请尝试以下代码，产品说明将显示在产品元素的产品页面中。在我的代码中，我在add to cart表单中添加了一个隐藏字段，一些jQuery代码将动态地将textarea字段的内容添加到隐藏字段中。这样，产品注释可以在购物车项目中保存为自定义数据。

现在，这个答案将无法处理订单中的数据并在结帐后显示，因为这个问题并不明确且过于宽泛。

// Add a custom product note below product meta in single product pages
add_action('woocommerce_single_product_summary', 'custom_product_note', 100 );
function custom_product_note() {

    echo '<br><div>';

    woocommerce_form_field('customer_note', array(
        'type' => 'textarea',
        'class' => array( 'my-field-class form-row-wide') ,
        'label' => __('Product note') ,
        'placeholder' => __('Add your note here, please…') ,
        'required' => false,
    ) , '');

    echo '</div>';

    //
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('#customer_note').on( 'input blur', function() {
            $('#product_note').val($(this).val());
        });
     });
    </script>

    <?php
}

// Custom hidden field in add to cart form
add_action( 'woocommerce_before_add_to_cart_button', 'hidden_field_before_add_to_cart_button', 5 );
function hidden_field_before_add_to_cart_button(){
    echo '<input type="hidden" name="product_note" id="product_note" value="">';
}

// Add customer note to cart item data
add_filter( 'woocommerce_add_cart_item_data', 'add_product_note_to_cart_item_data', 20, 2 );
function add_product_note_to_cart_item_data( $cart_item_data, $product_id ){
    if( isset($_POST['product_note']) && ! empty($_POST['product_note']) ){
        $product_note = sanitize_textarea_field( $_POST['product_note'] );
        $cart_item_data['product_note'] = $product_note;
    }
    return $cart_item_data;
}

代码放在活动子主题（或活动主题）的function.php文件中。经过测试和工作。

如果要在添加到购物车按钮后显示此字段，您将使用此更短的代码：

// Add a custom product note after add to cart button in single product pages
add_action('woocommerce_after_add_to_cart_button', 'custom_product_note', 10 );
function custom_product_note() {

    echo '<br><div>';

    woocommerce_form_field('product_note', array(
        'type' => 'textarea',
        'class' => array( 'my-field-class form-row-wide') ,
        'label' => __('Product note') ,
        'placeholder' => __('Add your note here, please…') ,
        'required' => false,
    ) , '');

    echo '</div>';
}

// Add customer note to cart item data
add_filter( 'woocommerce_add_cart_item_data', 'add_product_note_to_cart_item_data', 20, 2 );
function add_product_note_to_cart_item_data( $cart_item_data, $product_id ){
    if( isset($_POST['product_note']) && ! empty($_POST['product_note']) ){
        $product_note = sanitize_textarea_field( $_POST['product_note'] );
        $cart_item_data['product_note'] = $product_note;
    }
    return $cart_item_data;
}

代码放在活动子主题（或活动主题）的function.php文件中。经过测试和工作。

此自定义购物车商品数据可通过以下方式访问：

foreach( WC()->cart->get_cart() as $cart_item ){
    if( isset($cart_item['product_note']) )
       echo $cart_item['product_note'];
}

Answer 2

你完全使用一个钩子来结账页面产品页面的Here is a visual Guide个Hooks。

在这些类别中有2个可用的钩子：

woocommerce_product_meta_end
woocommerce_share

所以，只需替换

woocommerce_after_order_notes

带

woocommerce_product_meta_end

你的add_action（）

中的

add_action('woocommerce_product_meta_end', 'customise_checkout_field');

function customise_checkout_field($checkout)
{
echo '<div id="customise_checkout_field"><h2>' . __('Heading') . '</h2>';
woocommerce_form_field('customised_field_name', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'label' => __('Customise Additional Field') ,
'placeholder' => __('Guidence') ,
'required' => true,
) , $checkout->get_value('customised_field_name'));
echo '</div>';
}

Answer 3

以下是完整的流程如何在产品页面添加自定义字段，该值将保存，显示在订单详细信息和电子邮件中。

  // Display custom field on single product page
    function d_extra_product_field(){
        $value = isset( $_POST['extra_product_field'] ) ? sanitize_text_field( $_POST['extra_product_field'] ) : '';
        printf( '<label>%s</label><input name="extra_product_field" value="%s" />', __( 'Enter your custom text' ), esc_attr( $value ) );
    }
    add_action( 'woocommerce_before_add_to_cart_button', 'd_add_extra_field', 9 );

    // validate when add to cart
    function d_extra_field_validation($passed, $product_id, $qty){

        if( isset( $_POST['extra_product_field'] ) && sanitize_text_field( $_POST['extra_product_field'] ) == '' ){
            $product = wc_get_product( $product_id );
            wc_add_notice( sprintf( __( '%s cannot be added to the cart until you enter some text.' ), $product->get_title() ), 'error' );
            return false;
        }

        return $passed;

    }
    add_filter( 'woocommerce_add_to_cart_validation', 'd_extra_field_validation', 10, 3 );

     // add custom field data in to cart
    function d_add_cart_item_data( $cart_item, $product_id ){

        if( isset( $_POST['extra_product_field'] ) ) {
            $cart_item['extra_product_field'] = sanitize_text_field( $_POST['extra_product_field'] );
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_add_cart_item_data', 'd_add_cart_item_data', 10, 2 );

    // lodat data from session
    function d_get_cart_data_f_session( $cart_item, $values ) {

        if ( isset( $values['extra_product_field'] ) ){
            $cart_item['extra_product_field'] = $values['extra_product_field'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_get_cart_item_from_session', 'd_get_cart_data_f_session', 20, 2 );


    //add meta to order
    function d_add_order_meta( $item_id, $values ) {

        if ( ! empty( $values['extra_product_field'] ) ) {
            woocommerce_add_order_item_meta( $item_id, 'extra_product_field', $values['extra_product_field'] );           
        }
    }
    add_action( 'woocommerce_add_order_item_meta', 'd_add_order_meta', 10, 2 );

    // display data in cart
    function d_get_itemdata( $other_data, $cart_item ) {

        if ( isset( $cart_item['extra_product_field'] ) ){

            $other_data[] = array(
                'name' => __( 'Your extra field text' ),
                'value' => sanitize_text_field( $cart_item['extra_product_field'] )
            );

        }

        return $other_data;

    }
    add_filter( 'woocommerce_get_item_data', 'd_get_itemdata', 10, 2 );


    // displayed custom field data in order view
    function d_dis_metadata_order( $cart_item, $order_item ){

        if( isset( $order_item['extra_product_field'] ) ){
            $cart_item_meta['extra_product_field'] = $order_item['extra_product_field'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_order_item_product', 'd_dis_metadata_order', 10, 2 );


    // ad field data in email
    function d_order_email_data( $fields ) { 
        $fields['extra_product_field'] = __( 'Your extra field text' ); 
        return $fields; 
    } 
    add_filter('woocommerce_email_order_meta_fields', 'd_order_email_data');

    // agin order
    function d_order_again_meta_data( $cart_item, $order_item, $order ){

        if( isset( $order_item['extra_product_field'] ) ){
            $cart_item_meta['extra_product_field'] = $order_item['extra_product_field'];
        }

        return $cart_item;

    }
    add_filter( 'woocommerce_order_again_cart_item_data', 'd_order_again_meta_data', 10, 3 );

在Woocommerce的单个产品页面中添加产品注释字段

3 个答案: