php - 在 Woocommerce 的单个产品页面中添加产品备注字段

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

要使其按照您的意愿运行，请尝试使用以下代码，您的产品说明将显示在产品元数据下方的产品页面中。在我的代码中，我在添加到购物车表单中添加了一个隐藏字段，一些 jQuery 代码会动态地将文本区域字段的内容添加到隐藏字段中。这样，产品说明可以作为自定义数据保存在购物车项目中。

现在这个答案不会处理保存订单中的数据并在结帐后显示它，因为这对于这个问题来说并不明确而且过于宽泛。

// 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'];
}