wordpress WooCommerce：向购物车中的每个项目添加输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21650019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WooCommerce: Add input field to every item in cart
提问by Nix
I've been trying to add a single text input field to every item in the cart and submit that user input to product's meta info. It's been 2 days and I haven't succeeded yet.
我一直在尝试为购物车中的每个项目添加一个文本输入字段，并将该用户输入提交到产品的元信息。已经2天了，我还没有成功。
My objective is to:
我的目标是：
- Take input from user for every item added to the cart.
- Display that input in the order's meta info.
- Display that input in confirmation email sent to the customer.
- 为添加到购物车的每个项目获取用户的输入。
- 在订单的元信息中显示该输入。
- 在发送给客户的确认电子邮件中显示该输入。
So far, I have copied the template file to my theme and added an input field inside a cell. I'm having trouble with the hooks, learned about hooks I will need from WooCommerce Product Gift Wrapplugin as indicated in this woocommerce issue.
到目前为止，我已将模板文件复制到我的主题并在单元格中添加了一个输入字段。我在使用钩子时遇到了问题，从WooCommerce 产品礼品包装插件中了解了我需要的钩子，如本woocommerce 问题中所述。
Code I added to the cart.php template copied in my theme directory :
我添加到我的主题目录中复制的 cart.php 模板的代码：
$input_url_data = '<div class="input-url"><input type="text" name="cart-url" value="" title="" class="input-text cart-url text" /></div>';
echo apply_filters( 'woocommerce_add_cart_item_data', $input_url_data, $cart_item_key );
Code I added to my theme's functions.php :
我添加到我的主题的 functions.php 的代码：
add_filter( 'woocommerce_add_cart_item_data','add_cart_item_data', 10, 2 );
add_filter( 'woocommerce_get_cart_item_from_session','get_cart_item_from_session', 10, 2 );
add_filter( 'woocommerce_get_item_data','get_item_data', 10, 2 );
add_filter( 'woocommerce_add_cart_item','add_cart_item', 10, 1 );
add_action( 'woocommerce_add_order_item_meta','add_order_item_meta', 10, 2 );
function add_cart_item_data( $cart_item_meta, $product_id ) {
$input_url_key = "";
$input_url_data['inputurl'] = $input_url_key;
return $input_url_data;
}
function get_cart_item_from_session( $cart_item, $values ) {
if ( ! empty( $values['inputurl'] ) ) {
$cart_item['inputurl'] = true;
}
return $cart_item;
}
function get_item_data( $item_data, $cart_item ) {
if ( ! empty( $cart_item['inputurl'] ) )
$item_data[] = array(
);
return $item_data;
}
function add_cart_item( $cart_item ) {
if ( ! empty( $cart_item['inputurl'] ) ) {
}
return $cart_item;
}
function add_order_item_meta( $item_id, $cart_item ) {
if ( ! empty( $cart_item['inputurl'] ) )
woocommerce_add_order_item_meta( $item_id, __( 'URL by buyer', 'custom_input_url' ), __( 'Yes', 'custom_input_url' ) );
}
Documentation about hook woocommerce_add_cart_item_data isn't very helpful and I'm stuck at this. How do I proceed?
关于 hook woocommerce_add_cart_item_data 的文档不是很有帮助，我被困在这里。我该如何进行？
回答by Sark
There is a wordpress plugin called WC Fields Factoryfor the exact purpose.
有一个名为WC Fields Factory的 wordpress 插件用于确切目的。
You can also achieve this by using the following woocommerce hooks woocommerce_before_add_to_cart_button, woocommerce_add_to_cart, woocommerce_cart_item_name,and 'woocommerce_add_order_item_meta'
您也可以通过以下woocommerce挂钩做到这一点woocommerce_before_add_to_cart_button，woocommerce_add_to_cart，woocommerce_cart_item_name，和'woocommerce_add_order_item_meta'
like for adding text field to product page
喜欢将文本字段添加到产品页面
function add_name_on_tshirt_field() {
echo '<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label"><label for="color">Name On T-Shirt</label></td>
<td class="value">
<input type="text" name="name-on-tshirt" value="" />
</td>
</tr>
</tbody>
</table>';
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_name_on_tshirt_field' );
For displaying custom field on cart item table use the below
要在购物车项目表上显示自定义字段，请使用以下内容
function render_meta_on_cart_item( $title = null, $cart_item = null, $cart_item_key = null ) {
if( $cart_item_key && is_cart() ) {
echo $title. '<dl class="">
<dt class="">Name On T-Shirt : </dt>
<dd class=""><p>'. WC()->session->get( $cart_item_key.'_name_on_tshirt') .'</p></dd>
</dl>';
}else {
echo $title;
}
}
add_filter( 'woocommerce_cart_item_name', 'render_meta_on_cart_item', 1, 3 );
to make your custom meta data on you order details, do some thing like this
要在您的订单详细信息上创建自定义元数据，请执行以下操作
function tshirt_order_meta_handler( $item_id, $values, $cart_item_key ) {
wc_add_order_item_meta( $item_id, "name_on_tshirt", WC()->session->get( $cart_item_key.'_name_on_tshirt') );
}
add_action( 'woocommerce_add_order_item_meta', 'tshirt_order_meta_handler', 1, 3 );
for detailed implementation, i have an article about how to do this without using any plugins. http://sarkware.com/how-to-pass-custom-data-to-cart-line-item-in-woocommerce-without-using-plugins/
对于详细的实现，我有一篇关于如何在不使用任何插件的情况下做到这一点的文章。http://sarkware.com/how-to-pass-custom-data-to-cart-line-item-in-woocommerce-without-using-plugins/
回答by ViszinisA
It's easy. Try searching and reading code of Woocommerce.
这很简单。尝试搜索和阅读 Woocommerce 的代码。
This much of code got me to point where I can add Url @ Cart. And I can see it in Order review as customer and as admin.
这么多代码让我指出可以添加 Url @ Cart 的地方。我可以在订单中以客户和管理员的身份看到它。
I can't test email because I'm lazy. I'm sorry.
我无法测试电子邮件，因为我很懒惰。抱歉。
Something like this goes in templates\cart\cart.php (there is need for some more code as it's seperate column)
像这样的东西在 templates\cart\cart.php 中（需要更多的代码，因为它是单独的列）
<td class="product-url">
<?php
$html = sprintf( '<div class="url"><input type="text" name="cart[%s][url]" value="%s" size="4" title="Url" class="input-text url text" /></div>', $cart_item_key, esc_attr( $values['url'] ) );
echo $html;
?>
</td>
Functions.php
函数.php
// get from session your URL variable and add it to item
add_filter('woocommerce_get_cart_item_from_session', 'cart_item_from_session', 99, 3);
function cart_item_from_session( $data, $values, $key ) {
$data['url'] = isset( $values['url'] ) ? $values['url'] : '';
return $data;
}
// this one does the same as woocommerce_update_cart_action() in plugins\woocommerce\woocommerce-functions.php
// but with your URL variable
// this might not be the best way but it works
add_action( 'init', 'update_cart_action', 9);
function update_cart_action() {
global $woocommerce;
if ( ( ! empty( $_POST['update_cart'] ) || ! empty( $_POST['proceed'] ) ) && $woocommerce->verify_nonce('cart')) {
$cart_totals = isset( $_POST['cart'] ) ? $_POST['cart'] : '';
if ( sizeof( $woocommerce->cart->get_cart() ) > 0 ) {
foreach ( $woocommerce->cart->get_cart() as $cart_item_key => $values ) {
if ( isset( $cart_totals[ $cart_item_key ]['url'] ) ) {
$woocommerce->cart->cart_contents[ $cart_item_key ]['url'] = $cart_totals[ $cart_item_key ]['url'];
}
}
}
}
}
// this is in Order summary. It show Url variable under product name. Same place where Variations are shown.
add_filter( 'woocommerce_get_item_data', 'item_data', 10, 2 );
function item_data( $data, $cart_item ) {
if ( isset( $cart_item['url'] ) ) {
$data['url'] = array('name' => 'Url', 'value' => $cart_item['url']);
}
return $data;
}
// this adds Url as meta in Order for item
add_action ('woocommerce_add_order_item_meta', 'add_item_meta', 10, 2);
function add_item_meta( $item_id, $values ) {
woocommerce_add_order_item_meta( $item_id, 'Url', $values['url'] );
}
400$ is nice price.
400 美元是不错的价格。
回答by Ian
You can do this fairly easily with the Woocommerce Product Add-ons plugin
您可以使用Woocommerce Product Add-ons 插件轻松完成此操作
From the WooThemes website:
来自 WooThemes 网站：
Allow your customers to customise your products by adding new options such as input boxes, dropdowns or checkboxes. With the Product Add-ons extension, gift messages, donations, laser engraving and any other product which may require user input in some way is now an option for your customers!
Product add-ons supports required fields, textareas, checkboxes, radios, select boxes, custom price inputs and file upload boxes.
允许您的客户通过添加新选项（例如输入框、下拉列表或复选框）来自定义您的产品。通过产品附加组件扩展，礼品信息、捐赠、激光雕刻和任何其他可能需要用户以某种方式输入的产品现在是您客户的一个选择！
产品附加组件支持必填字段、文本区域、复选框、收音机、选择框、自定义价格输入和文件上传框。
I've used it before to add an additional donation field to a product purchase and display that on the thank you page/receipt email.
我之前使用过它为产品购买添加了额外的捐赠字段，并将其显示在感谢页面/收据电子邮件中。
It's about $50 US and will get you up and running in no time to add the text input and display the field on thank you page/email like you want. $50 is definitely worth the amount of time you'd save drying to develop this feature yourself.
它大约是 50 美元，可以让您立即启动并运行以添加文本输入并按照您的需要在感谢页面/电子邮件上显示该字段。50 美元绝对值得您为自己开发此功能而节省的干燥时间。
Here's the flow from the end-users perspective:
以下是从最终用户的角度来看的流程：
End user enters in field data and adds product to cart
最终用户输入字段数据并将产品添加到购物车
When User views cart the data they entered into the custom field displays along with the product
当用户查看购物车时，他们在自定义字段中输入的数据会与产品一起显示
After purchase, end user lands on thank you page and receives receipt email with field data included with the product item.
购买后，最终用户登陆感谢页面并收到收据电子邮件，其中包含产品项目中包含的字段数据。
On the backend:
在后端：
Create custom field for each product. The option is located on the Add-Ons menu tab.
为每个产品创建自定义字段。该选项位于附加组件菜单选项卡上。
- Create a new Addon Group
- Enter a group name (for easier organization)
- Add a new option and enter the label (this is what the end user sees and is tied to the product)
- Update/Publish product.
- 创建一个新的插件组
- 输入组名（便于组织）
- 添加新选项并输入标签（这是最终用户看到并与产品绑定的内容）
- 更新/发布产品。
For completed orders, this is what you will see in the Order Details admin:
对于已完成的订单，您将在“订单详细信息”管理中看到以下内容：
Hope this helps and saves you a ton of time in development!
希望这有助于并为您节省大量开发时间！
