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

最终产品图片
您将要创造的

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

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

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

本教程涵盖了什么?

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

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

然后在第二部分中,我们将研究:

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

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

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

WooCommerce自定义数据面板

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

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

在示例场景中,我们将添加一个“ 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_simpleshow_if_variable类添加到上面的类参数中。 如果我们不想为可变产品类型启用面板,我们将省略show_if_variable类。

添加自定义字段

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

请注意,外部divid属性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_metaupdate_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面板以及自定义字段。 您可以更新字段并保存它们...但是您尚未在前端看到任何内容。

结论

让我们回顾一下到目前为止到目前为止所看到的内容。

我们已经看过一个向WooCommerce添加自定义“ Giftwrap”面板的示例场景。 我们创建了一个插件,并添加了一个类来创建面板。 在该类中,我们还使用了WooCommerce函数添加自定义字段,然后我们清理并保存了这些字段值。

翻译自: https://code.tutsplus.com/tutorials/how-to-create-a-custom-settings-panel-in-woocommerce-part-1-of-2--cms-30383

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值