如何将表单添加到产品页面 WooCommerce

已发表: 2021-07-21

WooCommerce 将表单添加到产品页面 您想在产品页面上添加自定义表单吗？ 请继续阅读，因为这篇文章旨在为您提供解决方案。

WooCommerce 继续为许多商店提供支持，因为它可以灵活定制。 例如，您可能希望向产品页面添加一些额外信息。 实现这一点的最佳方法是向产品添加自定义字段。

自定义字段也称为项目元。 它们也可以显示在购物车页面、结帐页面和电子邮件中。 购物车项目元是将在额外产品字段中收集的信息添加到购物车中的产品并可以为订单保存。

因此，我们需要一个将自定义数据字段添加到产品页面并将此信息添加到购物车项目元数据的解决方案。 之后，收集的数据会显示在购物车、结帐和订单详细信息上。

但是，WooCommerce 没有用于添加此功能的内置解决方案。 这意味着我们需要创建一个自定义代码片段来实现这一点。 仅当您希望对您的网站进行重大更改时，我们才推荐插件。

WooCommerce 将表单添加到产品页面

在今天的教程中，我们将分享一个我们创建的自定义代码片段，用于添加包含两个字段的表单。 我们将创建一个名称和消息字段，并将字段数据显示为购物车项目元数据和订单项目元数据。 这意味着它将在整个订单周期中显示。

在我们继续之前，我们建议安装或创建一个子主题。 这是因为我们将修改一些核心文件。 子主题将确保更新期间更改不会丢失。

让我们直接进入它。

向 WooCommerce 产品页面添加表单的步骤

以下是您需要遵循的步骤：

  1. 登录您的 WordPress 站点并以管理员用户身份访问仪表板。
  2. 从仪表板菜单中，单击外观菜单 > 主题编辑器菜单。 打开主题编辑器页面后，查找主题函数文件以添加将表单添加到 WooCommerce 产品页面的函数。
  3. 将以下代码添加到php文件中： 
add_action( 'woocommerce_before_add_to_cart_button', 'njengah_fields_before_add_to_cart' );
function njengah_fields_before_add_to_cart( ) {
	?>
	<table>
		<tr>
			<td>
				<?php _e( "Name:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card">
			</td>
		</tr>
		<tr>
			<td>
				<?php _e( "Message:", "aoim"); ?>
			</td>
			<td>
				<input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card">
			</td>
		</tr>
	</table>
	<?php
}
/**
 * Add data to cart item
 */
add_filter( 'woocommerce_add_cart_item_data', 'njengah_cart_item_data', 25, 2 );
function njengah_cart_item_data( $cart_item_meta, $product_id ) {
	if ( isset( $_POST ['customer_name'] ) && isset( $_POST ['customer_message'] ) ) {
		$custom_data  = array() ;
		$custom_data [ 'customer_name' ]    = isset( $_POST ['customer_name'] ) ?  sanitize_text_field ( $_POST ['customer_name'] ) : "" ;
		$custom_data [ 'customer_message' ] = isset( $_POST ['customer_message'] ) ? sanitize_text_field ( $_POST ['customer_message'] ): "" ;
		$cart_item_meta ['custom_data']     = $custom_data ;
	}
		return $cart_item_meta;
}
/**
 * Display the custom data on cart and checkout page
 */
add_filter( 'woocommerce_get_item_data', 'njengah_item_data' , 25, 2 );
function njengah_item_data ( $other_data, $cart_item ) {
	if ( isset( $cart_item [ 'custom_data' ] ) ) {
		$custom_data  = $cart_item [ 'custom_data' ];
				$other_data[] =   array( 'name' => 'Name',
					 'display'  => $custom_data['customer_name'] );
		$other_data[] =   array( 'name' => 'Message',
					 'display'  => $custom_data['customer_message'] );
	}
		return $other_data;
}
/**
 * Add order item meta
 */
add_action( 'woocommerce_add_order_item_meta', 'njengah_order_item_meta' , 10, 2);
function njengah_order_item_meta ( $item_id, $values ) {
	if ( isset( $values [ 'custom_data' ] ) ) {
		$custom_data  = $values [ 'custom_data' ];
		wc_add_order_item_meta( $item_id, 'Name', $custom_data['customer_name'] );
		wc_add_order_item_meta( $item_id, 'Message', $custom_data['customer_message'] );
	}
}
  1. 这是产品页面上的结果： 产品页面
  2. 这是购物车页面上的结果： 自定义消息
  3. 这是结帐页面上的结果： 结帐页面
  4. 这是订单详情页面上的结果： 订单详细信息
  5. 这是编辑订单页面上的结果： 编辑页面

包起来

在今天的教程中，我们分享了一个自定义解决方案，用于在产品页面上添加表单。 正如我们在这篇文章中所展示的，收集的详细信息将出现在整个订单详细信息中。

但是，在编辑 WooCommerce 商店的核心文件时应该非常小心。 如果您犯了任何错误，将显示错误。

我们希望此解决方案能帮助您了解订单周期的工作原理。

类似文章

  1. 如何从 Shopify 迁移到 WooCommerce
  2. 如何更改 WooCommerce 结帐错误消息
  3. WooCommerce 创建自定义单个产品页面
  4. 如何设置 WooCommerce 店面主题产品页面全宽
  5. 如何在 WooCommerce 中发送有关状态更改的电子邮件
  6. 如何在结帐页面 WooCommerce 上获取订单 ID
  7. 如何更改优惠券代码占位符 WooCommerce
  8. 如何在页面店面主题顶部添加搜索框
  9. 如何添加自定义产品字段 WooCommerce
  10. 如何在 WooCommerce 订单页面上添加新列
  11. 如何在购物车页面上添加 WooCommerce 运费计算器
  12. 如何向 WooCommerce 产品添加自定义分类
  13. 如何为 WooCommerce 产品添加星级
  14. 如果可以免费送货，如何隐藏运费 WooCommerce
  15. 如何翻译 WooCommerce 结帐页面
  16. 如何访问 WooCommerce 数据库
  17. 如何获取当前产品 WooCommerce
  18. 前 30 多个最佳 WordPress 表单插件 » 最佳 WordPress 表单插件
  19. 如何设置 WooCommerce 买一送一
  20. 如何在不使用插件的情况下在 WordPress 中创建登录页面