在Woocommerce的单个产品页面中添加产品说明字段 [英] Add a product note field in single product pages in Woocommerce
问题描述
我要在单个产品详细信息页面中为用户创建自定义订单注释.这可以使用不带插件的php来完成.我已附上屏幕截图和网站URL供参考.
已尝试在 function.php 中使用此代码，但无法在产品详细信息页面中使用该代码.任何人都可以帮助我实现这一目标.
add_action('woocommerce_after_order_notes'，'customise_checkout_field');函数customise_checkout_field($ checkout){回声'< div id ="customise_checkout_field">< h2>'.__('标题').'</h2>';woocommerce_form_field('customized_field_name'，数组('type'=>'文本'，'class'=>大批(我的领域类表格全行")，'标签'=>__(自定义附加字段")，'占位符'=>__('Guidence')，'required'=>真的，)，$ checkout-> get_value('customised_field_name'));回声'</div>';}
要使其按需工作，请尝试以下代码，其中，产品说明将显示在产品meta下方的产品页面中.在我的代码中，我已经在添加到购物车"表单中添加了一个隐藏字段，并且一些jQuery代码会将文本区域的内容动态添加到该隐藏字段中.这样，产品注释便可以随后作为自定义数据保存在购物车项目中.
现在，此答案将无法处理按顺序保存数据并在结帐后显示数据，因为这对于该问题而言并不明确且范围太广.
///在单个产品页面的产品meta下方添加自定义产品注释add_action('woocommerce_single_product_summary'，'custom_product_note'，100);函数custom_product_note(){回声'< br>< div>';woocommerce_form_field('customer_note'，array('type'=>'textarea'，'class'=>array('my-field-class form-row-wide')，'标签'=>__(产品说明")，'占位符'=>__(请在此处添加您的便笺，……")，'required'=>错误的，)，'');回声'</div>';//?>< script type =文本/javascript">jQuery(函数($){$('#customer_note').on('input blur'，function(){$('#product_note').val($(this).val());});});</script><?php}//添加到购物车表单中的自定义隐藏字段add_action('woocommerce_before_add_to_cart_button'，'hidden_field_before_add_to_cart_button'，5);函数hidden_field_before_add_to_cart_button(){echo'<输入类型=隐藏"名称="product_note"id ="product_note"value =""；}//将客户注释添加到购物车项目数据add_filter('woocommerce_add_cart_item_data'，'add_product_note_to_cart_item_data'，20，2);函数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;}返回$ cart_item_data;} 代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.
如果要在添加到购物车按钮后显示此字段，将使用以下较短的代码:
//在单个产品页面中的添加到购物车"按钮后添加自定义产品注释add_action('woocommerce_after_add_to_cart_button'，'custom_product_note'，10);函数custom_product_note(){回声'< br>< div>';woocommerce_form_field('product_note'，array('type'=>'textarea'，'class'=>array('my-field-class form-row-wide')，'标签'=>__(产品说明")，'占位符'=>__(请在此处添加您的便笺，……")，'required'=>错误的，)，'');回声'</div>';}//将客户注释添加到购物车项目数据add_filter('woocommerce_add_cart_item_data'，'add_product_note_to_cart_item_data'，20，2);函数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;}返回$ cart_item_data;}
代码进入您的活动子主题(或活动主题)的function.php文件中.经过测试，可以正常工作.
可以通过以下方式访问此自定义购物车项目数据:
foreach(WC()-> cart-> get_cart()as $ cart_item){if(isset($ cart_item ['product_note']))echo $ cart_item ['product_note'];} I want create custom order note in single product detail page for user. This one can do using php without plugin. I have attached screenshot and site URL for reference.
The have tried with this code in function.php its working on checkout page not in product detail page. Anyone help me to achieve this.
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>';
}
To make it work as you want try the following code where your product note will be displayed in the product page below the product meta. In my code, I have added a hidden field in the add to cart form, and some jQuery code will add the content of the textarea field into the hidden field on the fly. This way the product note can be saved afterwards in the cart item as custom data.
Now this answer will not handle saving the data in the order and display it after checkout, as this is not explicit and too broad for this question.
// 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;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
If you want to display this field after add to cart button, you will use this shorter code:
// 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;
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
This custom cart item data is accessible this way:
foreach( WC()->cart->get_cart() as $cart_item ){
if( isset($cart_item['product_note']) )
echo $cart_item['product_note'];
}
这篇关于在Woocommerce的单个产品页面中添加产品说明字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
