Custom WooCommerce Plugin Development
A complete tutorial on Custom WooCommerce Plugin Development. We’ll develop a WooCommerce plugin with step by step code explanation. On completion of this tutorial you will have a complete understanding of how to build a WooCommerce Plugin with admin and frontend stuff.
I wrote this because I have come across many WooCommerce Plugin Development tutorials. But I never found a single one that covers all the aspects of a good WC plugin. This tutorial is a complete guide for all those who are looking for how to do Custom WooCommerce Plugin Development.
Prerequisites
For this tutorial, you must have good PHP/MySQL and WordPress WooCommerce Development skills. If you are new to PHP or WordPress world this tutorial is not for you. I am not going to explain what PHP If Statement or Function is. You must be very familiar with WordPress and WooCommerce Hooks, CPT, etc My goal in this tutorial is to combine all the things and show to an intermediate level developer to gain necessary skills for WooCommerce plugin development.
Let’s Get Started
WooCommerce plugins development is the same as regular WordPress plugins. A plugin is a piece of PHP code that adds new features or extends functionality to your WordPress websites.
Directory Structure
Organization is key in order to make any type of code work efficiently. Each developer have its own plugin directory structure, here in this tutorial I’ll use common practices.
Below are the directories and files required for Manufacturer plugin
- wcik-manufacturer Directory: Plugin root directory
- Add below to wcik-manufacturer directory
- include Directory
- templates Directory
- manufacturer.php File
- Add below to wcik-manufacturer/include directory
- product-detail.php File
- admin Directory
- Add below to wcik-manufacturer/include/admin directory
- post_type.php File
- meta_box.php File
- add_column.php File
- Add below to wcik-manufacturer/templates directory
- manufacturer Directory
- Add below to wcik-manufacturer/templates/manufacturer directory
- archive-manufacturer.php File
- single-manufacturer.php File
Plugin File Header
The main PHP file should include header comment what tells WordPress that a file is a plugin and provides information about the plugin. File Headers are placed one per line on top of the plugin file. Header values are filtered before they are used but it must not contain HTML code Elements or HTML Tags.
Open manufacturer.php and add the below header code in it.
The WooCommerce Manufacturer plugin is ready to install. Go to WordPress admin plugins page and check Manufacturer plugin within plugins listing as shown in below image. Click Activate as like normal WP plugin.
No Direct Access to Plugin
After plugin header add the following code to manufacturer.php file
It prevent public user to directly access your .php files through URL. Because if your file contains some I/O operations it can eventually be triggered (by an attacker) and this might cause unexpected behavior.
So, Using the snippets can prevent access from your files (directly) and ensures that your plugin files will be executed within the WordPress environment only.
Check if WooCommerce is active
The first thing I recommend is to check WC is active. if WooCommerce isn’t activated, the functionality is simply ignored instead of producing fatal errors.
Include Directory Files
The below code adds 4 files already created within include directory. require_once() function will include only once and will ignore the same file if included again. plugin_dir_path() is a WordPress function it gets the plugin directory path with _FILE__ passed in.
Your manufacturer.php file should look like below one
7 Things You Should Never Do With Your WooCommerce Store
Best WooCommerce Customization Practices
Create Custom Post Type
From a blog WordPress has become a flexible & powerful content management system, it can handle any type of website project. If you are a WordPress developer then you must have used CPT in past. Custom Post Types are like Posts and Pages, post type can be any kind of content. By default WordPress comes wih below Post Types
- Posts
- Pages
- Attachments
- Revisions
- Navigation Menus
- Custom CSS
- Changesets
Custom Post Types are the content you can get more details from official site WP codex CPT
Let’s open post_type.php within include directory and add the following code in it.
In Custom WooCommerce Plugin Development there is a chance that you declare same function which already exists. For this WordPress provides us a very useful function function_exists() to check existing ones.
register_post_type() is used for registering Custom Post Types. Post types can support any number of built-in core features such as meta boxes, custom fields, post thumbnails, post statuses, comments, and more. See the $supports argument for a complete list of supported features. To check more details on CPT and its parameters Click register_post_type
add_action(‘init’, ‘wcik_manufacturer_post_type’);
The init action hook fires after WordPress has finished loading but before any headers are sent.
Now your Admin Dashboard should show Manufacturer Custom Post Type like below image. You can now view Add, Edit and listing pages.
Add Manufacturer to WooCommerce Product
WordPress Plugins can add custom meta boxes to an edit screen of any post type. Meta box is a draggable box shown on the post editing screen. Its allows the user to select or enter the post related information. In edit screen Editor, Publish, Categories, Tags, etc. These all boxes are meta boxes.
Below are things I’ll do for Manufacturer Meta Box.
- Creating meta boxes
- Using meta boxes with post type
- Handling data validation
- Saving custom meta data
Its time to add the Manufacturers dropdown to the WooCommerce Product Add/Edit pages. Open meta_box.php file and add following code
Action hook add_meta_boxes triggers the function manufacturer_meta_box_add(). The add_meta_box() function adds meta boxes on specified location e.g right sidebar of products edit page. It contains callback function meta_box_manufacturer() that fills the box with the desired content. To store meta box submitted data in database meta_box_save() function is attached to save_post action hook.
Display Manufacturer in Product Listing
For ease the client wants to display Manufacturers on Products listing page. WordPress provides manage column filter hook to add new column within listings. The function add_product_manufacturer() adds Manufacturer column.
Add the following code to add_column.php file with include/admin directory
The function render_product_column_manufacturer() is attached to manage_product_posts_custom_column hook to displays product manufacturers. It contains WordPress get_post_meta() function that retrieves meta data from wp_post_meta database table.
Create WooCommerce Custom Accounts Page
WooCommerce Checkout Page Fields
Send Additional WooCommerce Email
We have completed the admin side things of Custom WooCommerce Plugin Development. Its time to move on the frontend stuff, so let’s get started.
Product Detail Page
In WooCommerce the page that contains all the details related to a specific product is the product detail page. Next I want to show you, how to display the Manufacturer on product details page.
WooCommerce provides action & filter hooks for template customization. The action hook woocommerce_single_product_summary hooks our function display_manufacturer(). In below code its very straight forward you just need to fetch the manufacturer and display it.
Manufacturer Archive Template
The Manufacturer archive template is similar to any custom post type template. The archive template file name should be archive-{custom-post-type-name} e.g archive-manufacturer.php
Within array the ‘post_type’ => ‘manufacturer’ will be fetched from database WP_Posts table and displayed on archive template page.
$args = array( 'post_type' => 'manufacturer', 'posts_per_page' => 10, 'paged' => $paged, );
Add the following code to templates\manufacturer\archive-manufacturer.php file
From WordPress admin create new page “All Manufacturers” and set its page template manufacturer.
Manufacturer Single Template
The Single Template display individual Manufacturer detail. The code within below template is a straight forward.
Add the following code to templates\manufacturer\single-manufacturer.php file
Hook Template on Frontend
We have completed our frontend templates. Adding custom post type template file within Theme or Child Theme is a piece of cake. But when you add it to plugin it’s sometime little tricky. I have added the code in a clean way, so that you can also use within your own plugin.
- theme_page_templates Filters list of page templates for a theme.
- page_template filter can be used to load a custom template for a given page.
- single_template filter can be used to load a custom template for a given post.
It’s time to hook the templates to display them. Add following code to manufacturer.php
Final Manufacturer File
Below is the plugin root manufacturer.php file. You can download the complete plugin from wordPress.org
Display WooCommerce Discount to Customer for Product on Sale
Comments
Post a Comment