افزودن فیلدهای اختصاصی به صفحه محصول ووکامرس فارسی

WooCommerce  مسلما محبوب ترین راه برای فروش محصولات با استفاده از وردپرس است. نرم افزار وردپرس حدود 25 درصد از سایت های اینترنت و  WooCommerce  تقریبا 39٪ از تمام فروشگاه های آنلاین را به خود اختصاص داده اند، شرط استفاده اگر شما به دنبال بازار کالا و فروش به مشتریان باشید.

اما در هر نرم افزار ما و یا مشتریان ما اغلب می خواهیم به گسترش مجموعه ای از ویژگیفراتر از چیزی که ارائه شده است بپردازیم.

نکته: در WooCommerce، اجازه دهید بگویم که شما می خواهید یک محصول ساده به فروش برسانید اما می خواهید که شامل اطلاعات کمی بیشتر در مورد محصول برای نمایش در جلویی و قبل از خرید در سایت باشد برای همین این مقاله نوشته شده است.

با استفاده از یک قلاب یا همان (هوک hooks) ارائه شده توسط WooCommerce و قابلیت های سفارشی که ما می نویسیم، ما می توانیم دقیقا همان کار را انجام دهیم.

ابزارهای مورد نیاز:

قبل از شروع، من فرض کنم  مجموعه راه اندازی زیر (یا چیزی شبیه با آن) بر روی دستگاه شما باشد:

سیستم عامل خود را از انتخاب کنید – ویندوز یا مک فرقی ندارد
حداقل PHP 5.6.25، هر چند من از پی اچ پی 7 استفاده می کنم.
ماژول 5.6.33
آپاچی یا Nginx
وردپرس 4.7 یا آخرین نسخه.
آخرین ووکامرس فارسی WooCommerce
IDE مورد علاقه

برای بقیه آموزش، فرض کنیم که همه از این نصب شده است، فعال، و در حال اجرا باشند.

اگر شما به طور خاص برای این آموزش  WooCommerce را دانلود کنید، نیاز به نگرانی در مورد چیزهایی مانند صفحات پرداخت، شرایط و ضوابط و یا چیزی شبیه به آن وجود ندارد. در واقع ما فقط در متا باکس محصول ساده در این آموزش متمرکز می شویم.

اضافه کردن زمینه های سفارشی

وقتی که صحبت کار با وردپرس می آید، مفهوم زمینه های سفارشی معمولا با آن مختلف تعریف می شوند:

وردپرس توانایی اجازه دادن به نویسندگان به اختصاص زمینه های سفارشی به یک پست را می دهد. این اطلاعات اضافی به عنوان شناخته شده داده های متا نام برده میشود و ما از همین ویژگی استفاده میکنیم .

برای غیر طراحان وب سایت این اطلاعات غیرضروری است اما برای توسعه دهندگان یکی از اطلاعات و ابزار مورد نیاز برای ساخت چیزی فراتر از محصول ارائه شده با امکانات مختلف و مخصوص برای هر استارت آپ و ایده اختصاصی است.

در عوض، من در مورد کادرهای متنی بخش Linked Product که به معرفی محصولات مرتبط با محصولات ساده (Simple Product) است صحبت می کنم.

اما ما بعد در ادامه آموزش از آن استفاده می کنیم. در حال حاضر، اجازه دهید شروع کنید.

• 1.هوک ها (HOOk)

همانند وردپرس ووکامرس از کدهای به اصطلاح API در چرخه عملکرد خود استفاده میکنید تا دستورات آن اجرا شود که ما با کمک قلاب یا HOOk به هر کدام از این API ها وصل می شویم البته متا داده های یا کدهای دستوری ووکامرس با وردپرس کاملا فرق دارد.

در کل دو نوع قلاب یا هوک مهم هستند که بایستی بدانید که عبارتند از:

1.  ما از این تابع برای ایجاد یک توضیحات و متن ورودی استفاده می کنیم که مقدار (values ) ما را قابل استفاده کند. woocommerce_product_options_grouping .
2.  ما از این قلاب به پردازش ، هماهنگی و ذخیره مقدار (values ) متن ورودی استفاذه میکنیم. woocommerce_process_product_meta .

مانند تمامی هوک های استفاده شده در وردپرس ، این کار مستلزم تعریف کردن هوک و تعریف فانکشن اختصاصی برای آن است. برای این کار بایستی برنامه خاصی برای آن بنویسید ، در این آموزش مانند از برنامه نوشته شده object-oriented استفاده می کنیم.

•  2.دستور العمل (The Functionality)

ابتدا، ما باید کلاس تعریف کنیم که متغییر به عنوان داده داشته باشد. این متغییر ID فیلدی که ما بعد از درج در سایت ظاهر خواهد شد را دارد:

<?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
 private $textfield_id;
}

بعد، ما این متغیر در کلاس مقداردهی اولیه قرار می دهیم :

<?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
    private $textfield_id;
 
    public function __construct() {
        $this->textfield_id = 'tutsplus_text_field';
    }
}

ذر این لحظه، ما می توانیم از هوک درج شده در بالا استفاده کنیم، برای این کار، هر چند، یک تابع مقدار دهی اولیه که دو توابع سفارشی را با قلاب ثبت کردایم.

در دو بخش زیر، دقیقا ببینید که چگونه به پیاده سازی توابع سفارشی می پردازیم.

1. افزودن Text Input Field یا فیلد متنی

ابتدا ، ما می خواهیم تابع یا فنکشن اضافه کنیم که به woocommerce_product_options_grouping قلاب شده اند  . در تابع init انجام شده که ما در بخش قبلی تعریف کردیم، دقیقا همان را انجام می دهیم.

 <?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
    private $textfield_id;
 
    public function __construct() {
        $this->textfield_id = 'tutsplus_text_field';
    }
 
    public function init() {
 
            add_action(
                'woocommerce_product_options_grouping',
                array( $this, 'product_options_grouping' )
            );
    }
 
    public function product_options_grouping() {
        
    }
}

توجه کنید که  تابع به نام product_options_grouping است تا یافتن این کد کمی آسان تر شود. گرچه کارکرد، با نام آن ممکن است توصیفی از آنچه تابع انجام می دهد مشخص نکند ، اما آن را به قلاب مربوط می کند.

بعد، ما نیاز به پیاده سازی تابع داریم. برای انجام این کار، ما برخی از اطلاعات را نیاز داریم:

• ما یک ID منحصر به فرد در شناسایی فیلد متنی نیاز داریم. به عنوان مثال ما داده مجموعه در سازنده استفاده کنیم.
• برچسب استفاده خواهد شد که برخی از توضیحات را به فیلد ورودی دهد.
• ما به صورت اختیاری می توانیم یک جای متن ایجاد کنیم، برای درج مثال .
• یک گزینه برای نمایش راهنمای ابزار یا همان tooltip که هر زمان که کاربر ماوس را روی یک آیکون قرار دهد راهنما ظاهر شود.
•  گزینه توضیح برای شرح متن راهنمای ابزار یا همان tooltip  را لازم داریم.

همه اطلاعات فوق  در یک آرایه انجمنی تنظیم و پس از آن  به woocommerce_wp_text_input صادر خواهد شد. این یک تابع  WooCommerce API است طراحی شده تا  یک عبارت متن با شرایط فوق را خارج نماید.

 <?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
 private $textfield_id;
 
 public function __construct() {
 $this->textfield_id = 'tutsplus_text_field';
 }
 
 public function init() {
 
 add_action(
 'woocommerce_product_options_grouping',
 array( $this, 'product_options_grouping' )
 );
 }
 
 public function product_options_grouping() {
 
 $description = sanitize_text_field( 'Enter a description that will be displayed for those who are viewing the product.' );
 $placeholder = sanitize_text_field( 'Tease your product with a short description.' );
 
 $args = array(
 'id' => $this->textfield_id,
 'label' => sanitize_text_field( 'Product Teaser' ),
 'placeholder' => 'Tease your product with a short description',
 'desc_tip' => true,
 'description' => $description,
 );
 woocommerce_wp_text_input( $args );
 }
}

در این نقطه، ما باید در بخش اول از پلاگین استفاده میکنیم . ما هنوز به نوشتن کدی نیاز داریم که همه چیز مجموعه در تغییر باشد ، و نیز ما هنوز به نوشتن کدی که موجب ذخیره اطلاعات در پایگاه داده شود ، بنابراین اجازه دهید در حال حاضر آن کار را انجام دهیم .

2. ذخیره اطلاعات

بعد، اضافه کردن خطوط زیر از کد را به روش init:

 <?php
 
add_action(
 'woocommerce_process_product_meta',
 array( $this, 'add_custom_linked_field_save' )
);

پس از آن، مطمئن شوید که تابع add_custom_linked_field_save را اضافه کنید

 <?php
 
public function add_custom_linked_field_save( $post_id ) {
 
 if ( ! ( isset( $_POST['woocommerce_meta_nonce'], $_POST[ $this->textfield_id ] ) || wp_verify_nonce( sanitize_key( $_POST['woocommerce_meta_nonce'] ), 'woocommerce_save_data' ) ) ) {
 return false;
 }
 
 $product_teaser = sanitize_text_field(
 wp_unslash( $_POST[ $this->textfield_id ] )
 );
 
 update_post_meta(
 $post_id,
 $this->textfield_id,
 esc_attr( $product_teaser )
 );
}

ما کمی در مورد اجرای تابع در بخش بعدی صحبت می کنیم .

پاک سازی داده

توجه کنید که در تابع فوق، سه چیز اتفاق می افتد:

1. بررسی کنید تا مطمئن شوید چندین مقدار فعلی حضور دارند. اگر نه، پس ما بازگشت falseداریم. این یک اقدام احتیاطی امنیتی استاندارد است. مقدار فعلی با داده های افزونه WooCommerce شناسایی و در کد منبع است.
2. پاکسازی داده ها در مجموعه  POST_$ متناظر با ورودی کاربر .
3. ذخیره اطلاعات در جدول ارسال متاداده ها.

توجه داشته باشید که ما در واقع  به ارائه اطلاعات مربوط به نمایه نمی پردازیم. پس get_post_meta نیست ، با این حال، با اینکار می خواهیم اطلاعات در بخش جلویی یا نمایه قرار دهیم.

3. نمایش تیزر در نمایه جلویی

ارائه اطلاعات مربوط به نمایه، ما نیاز به یک کلاس داریم که بسیاری از همین کارهایی که در حال حاضر انجام داده ام را انجام خواهد داد. به طور دقیق، ما نیاز داریم:

• یک textfield ID
• مقدار دهی اولیه از ID در سازنده
• یک تابع مقدار دهی اولیه برای اتصال کد دلخواه ما را به نمایه
• رندر داده واقعی

تنظیم این موارد در واقع مشکل نیست از آنجایی که ما در حال حاضر این را انجام داده ایم، بنابراین به تصویب این کلاس با پایان زیر می پردازیم؛ با این حال، چند دیدگاه در مورد تنظیم این کلاس تا پس از پایان آن را داشته باشیم:

<?php
 
class TutsPlus_Custom_WooCommerce_Display {
 
 private $textfield_id;
 
 public function __construct() {
 $this->textfield_id = 'tutsplus_text_field';
 }
 
 public function init() {
 
 add_action(
 'woocommerce_product_thumbnails',
 array( $this, 'product_thumbnails' )
 );
 }
 
 public function product_thumbnails() {
 
 $teaser = get_post_meta( get_the_ID(), $this->textfield_id, true );
 if ( empty( $teaser ) ) {
 return;
 }
 
 echo esc_html( $teaser );
 }
}

نتیجه نهایی باید چیزی شبیه به این باشد:

در این لحظه، برخی از کد ها برداشته شده است. به طور دقیق، عموم مردم و آدمین هر دو از یک textfield_ID  استفاده می کنند تنظیم آن را در سازنده خود است. این کد ها با عنوان برنامه نویسی شی گرا هستند.

تعدادی از راه هایی است که ما می توانیم آن ها را کاهش ذهیم ، مانند عبور از ارزش به سازنده زمانی که کلاس ها نمونه، با استفاده از یک الگوی طراحی ساده به کمک هماهنگ  کننده اطلاعات بین دو کلاس ها، و غیره وجود دارد.

در فایل است که به همراه این آموزش است ، که می تواند با استفاده از لینک دانلود شده نمایید، شما در واقع می خواهید دید که چگونه من داده های گذاشتیم تا کمی مدیریت آن ها ساده تر شود.

در مرحله دوم، توجه داشته باشید که با استفاده از قلاب   woocommerce_product_thumbnailsبرای رندر ارائه اطلاعات استفاده کردیم. تعدادی از قلاب های WooCommerce در دسترس  وجود دارد، و یکی از قلاب های موجود را انتخاب کنیم. شما می توانید رایگان از طریق  مستندات  قلاب بهتر برای نیازهای شما را انتخاب نمایید.

4. آوردن  همه با هم

در نهایت، آخرین چیزی که ما باید انجام دهیم راه اندازی یک فایل bootstrap که این شروع افزونه خواهد بود.در تعدادی از انجام آموزش های قبلی روش ساخت  آن قرار دارد.

کد زیر که ما چگونه به شکستن آن می پردازیم:

<?php
/**
 * The plugin bootstrap file
 *
 * This file is read by WordPress to generate the plugin information in the
 * plugin admin area. This file also includes all of the dependencies used by
 * the plugin, and defines a function that starts the plugin.
 *
 * @link              https://marketfarsi.ir/
 * @package           CWF
 *
 * @wordpress-plugin
 * Plugin Name:       Tuts+ Custom WooCommerce Field
 * Plugin URI:        https://marketfarsi.ir/
 * Description:       Demonstrates how to add a custom field to a Simple Product.
 * Version:           1.0.0
 * Author:            Asakereh
 * Author URI:       https://marketfarsi.ir/
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
defined( 'WPINC' ) || die;
 
include_once 'admin/class-tutsplus-custom-woocommerce-field.php';
include_once 'public/class-tutsplus-custom-woocommerce-display.php';
 
add_action( 'plugins_loaded', 'tutsplus_wc_input_start' );
/**
 * Start the plugin.
 */
function tutsplus_wc_input_start() {
 
    if ( is_admin() ) {
 
        $admin = new TutsPlus_Custom_WooCommerce_Field( 'tutsplus_text_field' );
        $admin->init();
    } else {
 
        $plugin = new TutsPlus_Custom_WooCommerce_Display( 'tutsplus_text_field' );
        $plugin->init();
    }
}

توجه داشته باشید که پس از راه افتادن تابع ،  چک کنید داشبورد آن را نمایش داده یا نه. اگر چنین است، پس بخش مناسب از پلاگین لود است. در این صورت، صفحه نمایش استاندارد لود شده است، که شما می توانید در صفحه محصول آن را مشاهده کنید.

نتیجه

در این لحظه، ما همه چیز ما قدم به قدم در مقدمه آموزش پوشش داده ایم:

• ما یک فیلد سفارشی اضافه کردیم.
• ما آن را به خوبی بررسی کرده ایم و آن را ذخیره کردیم.
• ما یک جنبه عمومی  از پلاگین نصب کردیم.
• و ما  محتوای درج شده را نمایش دادیم.

فراموش نکنید که نسخه ی نمایشی کار نهایی را می توانید دانلود نمایید.  علاوه بر این، اگر شما به WooCommerce علاقه مند هستید، فراموش نکنید که برخی از آموزش های دیگر ما و یا برخی از آیتم های ما را در فروشگاه دریافت نمایید.

فراموش نکنید که برای اطلاع رسانی و درخواست هر گونه سوال یا نظر در قسمت زیر دیدگاه خود را بنویسید!

منابع

• Custom Fields
• woocommerce_product_options_grouping
• woocommerce_process_product_meta
• Procedural Programming
• woocommerce_wp_text_input
• esc_html
• DRY
• WooCommerce in CodeCanyon

English Article

WooCommerce is arguably the most popular way to sell products using WordPress. With WordPress powering roughly 25% of the Internet and WooCommerce powering roughly 39% of all online stores, it’s a safe bet to use the two in conjunction with one another if you’re looking to market goods to customers.

But, as with any software, there are times where we or our clients often want to extend the feature set beyond what’s offered out of the box.

Case in point: With WooCommerce, let’s say that you have a simple product that you want to sell but you want to include a little more information about the product to display on the front-end.

Using a couple of hooks provided by WooCommerce and custom functionality that we’ll write, we’ll take a look at how we can do exactly that.

Required Tools

Before we get started, I assume that you have the following setup (or something comparable) on your machine:

• Your operating system of choice—I’ll be using macOS
• At least PHP 5.6.25, though I’ll be using PHP 7
• MySQL 5.6.33
• Apache or Nginx
• WordPress 4.7
• WooCommerce 3.9
• Your favorite IDE

For the rest of the tutorial, I assume that all of this is installed, activated, and running.

If you download WooCommerce specifically for this tutorial, there’s no need to worry about things like the checkout pages, terms and conditions, or anything like that. In fact, we’re only going to be focused on the Simple Product meta box throughout the rest of this tutorial.

Adding Custom Fields

When it comes to working with WordPress, the notion of custom fields usually carries with it a different definition:

WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as meta-data.

For non-developers, this type of information can be a bit more complex and unnecessary. But if you’re used to working with it, then it’s important to note that when I refer to custom fields in this tutorial, I’m talking about something completely different.

Instead, I’m talking about an actual text field that we’ll introduce into the Linked Product tab of the Simple Product type.

 But we’ll get to that later in the tutorial. For now, let’s get started.

1. The Hooks

Much like WordPress, WooCommerce provides an API that allows us to hook into part of its page lifecycle. So although you may have worked with the WordPress metadata API before, doing so with WooCommerce is different.

There are two hooks that are important to know:

1. woocommerce_product_options_grouping. We’ll use this function to create a description and text input that will accept our values.
2. woocommerce_process_product_meta. We’ll use this hook to process, sanitize, and save the value of our text input.

As with all hooks in WordPress, these will require that we define these hooks and then define custom functionality for them. Though you can do this using procedural programming, this tutorial will be implementing the functionality using object-oriented programming.

2. The Functionality

First, we’ll define a class that will have a since variable as its instance data. This variable will represent the ID of the input field that will appear in the user interface:

<?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
    private $textfield_id;
}

Next, we’ll initialize this instance variable in the constructor of the class:

<?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
    private $textfield_id;
 
    public function __construct() {
        $this->textfield_id = 'tutsplus_text_field';
    }
}

In the following two sections, we’ll see exactly how to implement the custom functionality.

1. Adding a Text Input Field

First, we’ll want to add a function that’s hooked to woocommerce_product_options_grouping. In the init function that we defined in the previous section, we’ll do exactly that.

<?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
    private $textfield_id;
 
    public function __construct() {
        $this->textfield_id = 'tutsplus_text_field';
    }
 
    public function init() {
 
            add_action(
                'woocommerce_product_options_grouping',
                array( $this, 'product_options_grouping' )
            );
    }
 
    public function product_options_grouping() {
        
    }
}

Next, we need to implement the function. To do this, we’ll need some information:

• We’ll need an ID that we’ll use to uniquely identify the text field. We’ll use the instance data set in the constructor.
• A label will be used to give some description to the input field.
• We can optionally specify a placeholder, and for the purposes of our example, we will.
• There’s an option to display a tooltip whenever the user hovers their mouse over an icon.
• And we have the option for a description that we’ll use to populate the text of the tooltip.

All of the above information will be set in an associative array and will then be passed to woocommerce_wp_text_input. This is a WooCommerce API function designed to output a text element with the above arguments.

<?php
 
class TutsPlus_Custom_WooCommerce_Field {
 
        private $textfield_id;
 
    public function __construct() {
        $this->textfield_id = 'tutsplus_text_field';
    }
 
    public function init() {
 
            add_action(
                'woocommerce_product_options_grouping',
                array( $this, 'product_options_grouping' )
            );
    }
 
    public function product_options_grouping() {
 
            $description = sanitize_text_field( 'Enter a description that will be displayed for those who are viewing the product.' );
            $placeholder = sanitize_text_field( 'Tease your product with a short description.' );
 
            $args = array(
                'id'            => $this->textfield_id,
                'label'         => sanitize_text_field( 'Product Teaser' ),
                'placeholder'   => 'Tease your product with a short description',
                'desc_tip'      => true,
                'description'   => $description,
            );
            woocommerce_wp_text_input( $args );
    }
}

2. Saving the Information

Next, add the following lines of code into the init method:

<?php
 
add_action(
    'woocommerce_process_product_meta',
    array( $this, 'add_custom_linked_field_save' )
);

After that, be sure to add the add_custom_linked_field_save function.

<?php
 
public function add_custom_linked_field_save( $post_id ) {
 
        if ( ! ( isset( $_POST['woocommerce_meta_nonce'], $_POST[ $this->textfield_id ] ) || wp_verify_nonce( sanitize_key( $_POST['woocommerce_meta_nonce'] ), 'woocommerce_save_data' ) ) ) {
        return false;
    }
 
    $product_teaser = sanitize_text_field(
        wp_unslash( $_POST[ $this->textfield_id ] )
    );
 
    update_post_meta(
        $post_id,
        $this->textfield_id,
        esc_attr( $product_teaser )
    );
}

Sanitizing the Data

Notice in the function above, there are three things happening:

1. We check to make sure several nonce values are present. If not, then we return false. This is a standard security precaution. The nonce values are detected by looking specifically at what WooCommerce provides in the source code.
2. Sanitize the data in the $_POST collection corresponding with the user’s input.
3. Save the information to the post metadata table.

Note that we don’t actually do anything to render the information on the front-end yet so there’s no call to get_post_meta. This is, however, how we’ll render information on the front-end.

3. Displaying the Teaser on the Front-End

To render information on the front-end, we’re going to need a class that will do a lot of the same work we’ve already done. Specifically, we’ll need:

• a textfield ID
• initialization of said ID in the constructor
• an initialization function for hooking our custom code to the front-end
• rendering the actual value

Setting this up isn’t actually that difficult since we’ve already done this, so I’m going to pass the class in its entirety below; however, I’ll have a few comments to make about the way we’re going about setting this class up after the jump:

<?php

 

class TutsPlus_Custom_WooCommerce_Display {

 

    private $textfield_id;

 

    public function __construct() {

        $this->textfield_id = 'tutsplus_text_field';

    }

 

    public function init() {

 

        add_action(

            'woocommerce_product_thumbnails',

            array( $this, 'product_thumbnails' )

        );

    }

 

    public function product_thumbnails() {

 

        $teaser = get_post_meta( get_the_ID(), $this->textfield_id, true );

        if ( empty( $teaser ) ) {

            return;

        }

 

        echo esc_html( $teaser );

    }

}

The end result should be something like this:

At this point, we have some redundant code. Specifically, the public and the administrative classes both use a textfield_ID and set it up in their constructor. This is a code smell as it violates the whole DRY principle of object-oriented programming.

There are a number of ways that we could mitigate this, such as passing the value into the constructors when the classes are instantiated, using a simple design pattern to orchestrate information between the two classes, and so on.

In the file that accompanies this tutorial, which can be downloaded using the link in the sidebar, you’ll actually see how I’ve passed the value into the constructor to make it a bit easier to manage.

Secondly, note that I’m using the woocommerce_product_thumbnails hook to help render the information. There are a number of hooks WooCommerce made available, and I simply chose this one from the available hooks to render it. You can feel free to pore through the documentation to determine which hook works best for your needs.

4. Bringing It All Together

Finally, the last thing we need to do is to set up a bootstrap file that will start the plugin. We’ve done this in a number of my previous tutorials so I’m not going to spend too much time belaboring the point.

Here’s the code for how I’m breaking it up:

<?php
/**
 * The plugin bootstrap file
 *
 * This file is read by WordPress to generate the plugin information in the
 * plugin admin area. This file also includes all of the dependencies used by
 * the plugin, and defines a function that starts the plugin.
 *
 * @link             https://marketfarsi.ir
 * @package           CWF
 *
 * @wordpress-plugin
 * Plugin Name:       Tuts+ Custom WooCommerce Field
 * Plugin URI:        https://marketfarsi.ir
 * Description:       Demonstrates how to add a custom field to a Simple Product.
 * Version:           1.0.0
 * Author:            Tom McFarlin
 * Author URI:        https://marketfarsi.ir
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
defined( 'WPINC' ) || die;
 
include_once 'admin/class-tutsplus-custom-woocommerce-field.php';
include_once 'public/class-tutsplus-custom-woocommerce-display.php';
 
add_action( 'plugins_loaded', 'tutsplus_wc_input_start' );
/**
 * Start the plugin.
 */
function tutsplus_wc_input_start() {
 
    if ( is_admin() ) {
 
        $admin = new TutsPlus_Custom_WooCommerce_Field( 'tutsplus_text_field' );
        $admin->init();
    } else {
 
        $plugin = new TutsPlus_Custom_WooCommerce_Display( 'tutsplus_text_field' );
        $plugin->init();
    }
}

Notice that I include the dependencies and then, once the function fires, I check to see if the dashboard is being displayed or not. If so, then the proper part of the plugin is loaded; otherwise, the standard display is loaded, which you can see on the product page.

Conclusion

At this point, we’ve covered everything we set out to do in the introduction of the tutorial:

• We’ve added a custom field.
• We’ve sanitized and saved it.
• We’ve set up a public-facing aspect of the plugin.
• And we’ve retrieved and displayed the content.

Don’t forget to download the final working demo. Furthermore, if you’re interested in WooCommerce, don’t forget to check out some of our other tutorials or some of the items we have in our marketplace.

As usual, if you’re looking for other WordPress-related material, you can find all of my previous tutorials on my profile page, and you can follow me on my blog or on Twitter.

Don’t forget to leave any questions or comments in the feed below!

Resources

• Custom Fields
• woocommerce_product_options_grouping
• woocommerce_process_product_meta
• Procedural Programming
• woocommerce_wp_text_input
• esc_html
• DRY
• WooCommerce in CodeCanyon