如何在WooCommerce中创建自定义设置面板

最新推荐文章于 2024-11-28 10:33:46 发布

cunjie3951

最新推荐文章于 2024-11-28 10:33:46 发布

阅读量1k

点赞数

文章标签： java python php 大数据 javascript ViewUI

本文介绍了如何在WooCommerce中扩展功能，通过创建自定义数据面板添加礼品包装选项。教程详细讲解了如何添加自定义标签、字段，以及保存和前端展示这些字段的步骤。

摘要由CSDN通过智能技术生成

WooCommerce是迄今为止WordPress领先的电子商务插件。在撰写本文时，它的活跃安装量已超过300万，据报道落后于所有在线商店的40％。

WooCommerce受欢迎的原因之一是其可扩展性。与WordPress本身一样，WooCommerce挤满了开发人员可以扩展WooCommerce的默认功能的动作和筛选器。

一个很好的例子是创建自定义数据面板的能力。

本教程涵盖了什么？

本教程分为两个部分。在第一部分中，我们将研究：

向WooCommerce添加自定义面板
将自定义字段添加到面板
清理并保存自定义字段值

然后在第二部分中，我们将研究：

在产品页面上显示自定义字段
根据自定义字段的值更改产品价格
在购物车和订单中显示自定义字段值

什么是WooCommerce自定义数据面板？

在WooCommerce中创建新产品时，您需要在“ 产品数据”部分中输入大多数关键产品信息，例如价格和库存。

在上面的屏幕截图中，您可以看到“ 产品数据”部分分为多个面板：左侧的选项卡（例如General ， Inventory等），每个选项卡都在右侧的主视图中打开不同的面板。

在本教程中，我们将研究为产品数据创建自定义面板，并向其中添加一些自定义字段。然后，我们将研究在前端使用这些自定义字段并将其值保存到客户订单中。

在示例场景中，我们将添加一个“ Giftwrap”面板，其中包含一些自定义字段：

一个复选框，在产品页面上包含该产品的礼品包装选项
一个复选框以启用一个输入字段，客户可以在其中输入产品页面上的消息
输入字段，用于为礼品包装选项添加价格；价格将被添加到购物车中的产品价格中

在后端，它将如下所示：

在前端，它将看起来像这样：

创建一个新插件

我们的插件将包含两类：一类用于处理admin中的内容，一类用于处理前端中的所有内容。我们的插件文件结构如下所示：

管理员班

首先，我们需要创建我们的类来处理后端的所有内容。在名为classes的文件夹中，创建一个名为class-tpwcp-admin.php的新文件。

此类将处理以下内容：

创建自定义标签（标签是“产品数据”部分左侧的可点击元素）。
将自定义字段添加到自定义面板（该面板是单击选项卡时显示的元素）。
确定将在其中启用面板的产品类型。
清理并保存自定义字段值。

将以下代码粘贴到该新文件中。之后，我们将逐步介绍它。

<?php
/**
 * Class to create additional product panel in admin
 * @package TPWCP
 */

// Exit if accessed directly
if( ! defined( 'ABSPATH' ) ) {
    exit;
}

if( ! class_exists( 'TPWCP_Admin' ) ) {
    class TPWCP_Admin {

        public function __construct() {
        }

        public function init() {
    		// Create the custom tab
            add_filter( 'woocommerce_product_data_tabs', array( $this, 'create_giftwrap_tab' ) );
    		// Add the custom fields
            add_action( 'woocommerce_product_data_panels', array( $this, 'display_giftwrap_fields' ) );
    		// Save the custom fields
    		add_action( 'woocommerce_process_product_meta', array( $this, 'save_fields' ) );
        }

		/**
		 * Add the new tab to the $tabs array
		 * @see 	https://github.com/woocommerce/woocommerce/blob/e1a82a412773c932e76b855a97bd5ce9dedf9c44/includes/admin/meta-boxes/class-wc-meta-box-product-data.php
		 * @param	$tabs
		 * @since	1.0.0
		 */
        public function create_giftwrap_tab( $tabs ) {
			$tabs['giftwrap'] = array(
				'label'         => __( 'Giftwrap', 'tpwcp' ), // The name of your panel
				'target'		=> 'gifwrap_panel', // Will be used to create an anchor link so needs to be unique
				'class'			=> array( 'giftwrap_tab', 'show_if_simple', 'show_if_variable' ), // Class for your panel tab - helps hide/show depending on product type
				'priority'      => 80, // Where your panel will appear. By default, 70 is last item
			);
			return $tabs;
		}

		/**
		 * Display fields for the new panel
		 * @see https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html
		 * @since	1.0.0
		 */
         public function display_giftwrap_fields() { ?>

			<div id='gifwrap_panel' class='panel woocommerce_options_panel'>
				<div class="options_group">
					<?php
					woocommerce_wp_checkbox(
						array(
							'id'		=> 'include_giftwrap_option',
							'label'		=> __( 'Include giftwrap option', 'tpwcp' ),
							'desc_tip'	=> __( 'Select this option to show giftwrapping options for this product', 'tpwcp' )
						)
					);
					woocommerce_wp_checkbox(
						array(
							'id'		=> 'include_custom_message',
							'label'		=> __( 'Include custom message', 'tpwcp' ),
							'desc_tip'	=> __( 'Select this option to allow customers to include a custom message', 'tpwcp' )
						)
					);
					woocommerce_wp_text_input(
						array(
							'id'		=> 'giftwrap_cost',
							'label'		=> __( 'Giftwrap cost', 'tpwcp' ),
							'type'		=> 'number',
							'desc_tip'	=> __( 'Enter the cost of giftwrapping this product', 'tpwcp' )
						)
					);
				?>
			</div>
		</div>

		<?php }

		/**
		 * Save the custom fields using CRUD method
		 * @param $post_id
		 * @since 1.0.0
		 */
		public function save_fields( $post_id ) {

			$product = wc_get_product( $post_id );

			// Save the include_giftwrap_option setting
			$include_giftwrap_option = isset( $_POST['include_giftwrap_option'] ) ? 'yes' : 'no';
			// update_post_meta( $post_id, 'include_giftwrap_option', sanitize_text_field( $include_giftwrap_option ) );
			$product->update_meta_data( 'include_giftwrap_option', sanitize_text_field( $include_giftwrap_option ) );

			// Save the include_giftwrap_option setting
			$include_custom_message = isset( $_POST['include_custom_message'] ) ? 'yes' : 'no';
			$product->update_meta_data( 'include_custom_message', sanitize_text_field( $include_custom_message ) );

			// Save the giftwrap_cost setting
			$giftwrap_cost = isset( $_POST['giftwrap_cost'] ) ? $_POST['giftwrap_cost'] : '';
			$product->update_meta_data( 'giftwrap_cost', sanitize_text_field( $giftwrap_cost ) );

			$product->save();

		}

    }
}

创建自定义标签

要创建自定义选项卡中，我们勾入woocommerce_product_data_tabs使用我们的过滤create_giftwrap_tab功能。这将传入WooCommerce $tabs对象，然后使用以下参数对其进行修改：

label ：使用它来定义选项卡的名称。
target ：用于创建锚链接，因此需要唯一。
class ：将应用于面板的一组类的数组。
priority ：定义您希望标签显示的位置。

产品种类

在此阶段，有必要考虑我们希望启用面板的产品类型。默认情况下，有四种WooCommerce产品类型：简单，变量，分组和关联。假设对于我们的示例场景，我们只希望为简单和可变产品类型启用Giftwrap面板。

为此，我们将show_if_simple和show_if_variable类添加到上面的类参数中。如果我们不想为可变产品类型启用面板，我们将省略show_if_variable类。

添加自定义字段

我们使用的下一个挂钩是woocommerce_product_data_panels 。此操作使我们可以为Giftwrap面板输出我们自己的标记。在我们的类中，函数display_giftwrap_fields创建了几个div包装器，在其中我们使用了一些WooCommerce函数来创建自定义字段。

请注意，外部div的id属性giftwrap_panel与我们传递到上方giftwrap选项卡的target参数中的值匹配。这是WooCommerce在单击Giftwrap选项卡时将知道如何显示此面板的方式。

WooCommerce自定义字段功能

在我们的示例中，我们用于创建字段的两个函数是：

woocommerce_wp_checkbox
woocommerce_wp_text_input

这些功能由WooCommerce提供，专门用于创建自定义字段。它们采用一系列参数，包括：

id ：这是您的字段的ID。它必须是唯一的，我们将在以后的代码中引用它。
label ：这是标签，它将显示给用户。
desc_tip ：这是可选的工具提示，当用户将鼠标悬停在标签旁边的问号图标上时会显示。

还要注意的是， woocommerce_wp_text_input功能还需要一个type参数，在这里你可以指定number的号码输入字段或text的文本输入字段。我们的字段将用于输入价格，因此我们将其指定为number 。

保存自定义字段

管理员类的最后一部分使用woocommerce_process_product_meta操作保存我们的自定义字段值。

为了标准化和优化其存储和检索数据的方式，WooCommerce 3.0采用了CRUD（创建，读取，更新，删除）方法来设置和获取产品数据。您可以在WooCommerce 3.0公告中找到有关此思想的更多信息。

考虑到这一点，我们不再使用过去可能更熟悉的get_post_meta和update_post_meta方法，而是使用$post_id创建WooCommerce $product对象，然后应用update_meta_data方法保存数据。例如：

$product = wc_get_product( $post_id );
$include_giftwrap_option = isset( $_POST['include_giftwrap_option'] ) ? 'yes' : 'no';
$product->update_meta_data( 'include_giftwrap_option', sanitize_text_field( $include_giftwrap_option ) );
$product->save();

主插件文件

创建readme.txt文件和主插件文件tutsplus-woocommerce-panel.php ，可以将此代码添加到主文件中。

<?php
/**
 * Plugin Name:     		Tutsplus WooCommerce Panel
 * Description: 			Add a giftwrap panel to WooCommerce products
 * Version: 				1.0.0
 * Author: 					Gareth Harris
 * Author URI: 				https://catapultthemes.com/
 * Text Domain: 			tpwcp
 * WC requires at least:    3.2.0
 * WC tested up to: 	    3.3.0
 * License:			    	GPL-2.0+
 * License URI:		    	https://www.gnu.org/licenses/gpl-2.0.txt
*/

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Define constants
 */
if ( ! defined( 'TPWCP_PLUGIN_VERSION' ) ) {
	define( 'TPWCP_PLUGIN_VERSION', '1.0.0' );
}
if ( ! defined( 'TPWCP_PLUGIN_DIR_PATH' ) ) {
	define( 'TPWCP_PLUGIN_DIR_PATH', plugin_dir_path( __FILE__ ) );
}

require( TPWCP_PLUGIN_DIR_PATH . '/classes/class-tpwcp-admin.php' );

/**
 * Start the plugin.
 */
function tpwcp_init() {
    if ( is_admin() ) {
        $TPWCP = new TPWCP_Admin();
        $TPWCP->init();
    }
}
add_action( 'plugins_loaded', 'tpwcp_init' );

这将启动您的管理员课程。

当您在网站上（与WooCommerce一起）激活插件然后创建新产品时，您将看到可用的新Giftwrap面板以及自定义字段。您可以更新字段并保存它们...但是您尚未在前端看到任何内容。