WooCommerce is the best WordPress plugin (and the most popular) for e-commerce. WooCommerce is a very powerful plugin and has wide functionality and a large set of settings.
There are four types of products in WooCommerce.
In many cases, these types of products are enough when using the plug-in for the online store. But sometimes they are not enough. WooCommerce allows you to create custom types of products, and customize them for specific needs.
Let’s see how to create a custom type of product and configure it in such a way as to add useful functionality for the product page of our store.
The idea is: Add notes under the product title on the product pages. The text of the note can be of different colors and sizes.
The code given in this post can be added to function.php of child WordPress theme, or you can create a plugin and add code to it. We will create a simple WooCommerce plugin for WordPress.
Create in your computer folder with name: woocommerce-simple-plugin
In this folder create the file named woocommerce-simple-plugin.php
Open this file for edition and add this code to the beginning of the file:
<?php /* Plugin Name: WooCommerce Simple Plugin Plugin URI: https://bytescout.com Description: This is Simple Plugin for WooCommerce shop. Version: 1.1 Author: Dzianis Author URI: https://bytescout.com Text Domain: woocommerce-simple-plugin */ ?>;
That’s it, the plugin is ready, but for now, it does nothing. Let’s add functionality to it.
To create a custom type of product, we have to create a class that extends the existing class WC_Product, call the class as WC_Product_With_Notes. And for custom class get product_with_notes name.
Name of the new class must be WC_Product_{product_type}
Add this piece of code to our plugin file:
add_action( 'init', 'bytescout_create_custom_product_type' );
function bytescout_create_custom_product_type(){
class WC_Product_With_Notes extends WC_Product {
public function get_type() {
return 'product_with_notes';
}
}
}
add_filter( 'woocommerce_product_class', 'bytescout_woocommerce_product_class', 10, 2 );
function bytescout_woocommerce_product_class( $classname, $product_type ) {
if ( $product_type == 'product_with_notes' ) {
$classname = 'WC_Product_With_Notes';
}
return $classname;
}
We created a new custom type. Now our product type with notes needs to be added to the list for other types so that we can select it.
For this purpose, WooCommerce provides with product_type_selector filter which can add new product types to the drop-down list.
add_filter( 'product_type_selector', 'bytescout_add_custom_product_type' );
function bytescout_add_custom_product_type( $types ){
$types[ 'product_with_notes' ] = 'Product with Notes';
return $types;
}
Now we can select our new product type in the drop-down list, but so far there are no additional settings for this product, there is an only standard tab with settings: Shipping, Linked Products, Attributes, Linked Products, and Advanced.
Let’s add a new tab on which we will place the settings for our notes and named it with Product Notes
Use woocommerce_product_data_tabs filter for that purpose.
add_filter( 'woocommerce_product_data_tabs', 'product_notes_tab' );
function product_notes_tab( $tabs) {
$tabs['product_notes'] = array(
'label' => __( 'Product Notes', 'woocommerce-simple-plugin' ),
'target' => 'product_notes_options',
'class' => 'show_if_product_with_notes',
);
return $tabs;
}
Now we add settings to our tab so that we can customize the notes (note text, color, size), which we will post on the product page.
add_action( 'woocommerce_product_data_panels', 'bytescout_product_tab_content' );
function bytescout_product_tab_content() {
?><div id='product_notes_options' class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php
woocommerce_wp_text_input(
array(
'id' => 'product_notes',
'label' => __( 'Product notes', 'woocommerce-simple-plugin' ),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __( 'Enter additional notes for the product', 'woocommerce-simple-plugin' ),
'type' => 'text'
)
);
woocommerce_wp_select(
array(
'id' => 'product_notes_color',
'label' => __( 'Notes Color', 'woocommerce-simple-plugin' ),
'desc_tip' => 'true',
'description' => __( 'Select product notes color', 'woocommerce-simple-plugin' ),
'options' => [
'inherit' => 'default',
'red' => 'red',
'green' => 'green',
'blue' => 'blue',
]
)
);
woocommerce_wp_select(
array(
'id' => 'product_notes_size',
'label' => __( 'Notes Text Size', 'woocommerce-simple-plugin' ),
'desc_tip' => 'true',
'description' => __( 'Select product notes text size', 'woocommerce-simple-plugin' ),
'options' => [
'inherit' => 'default',
'small' => 'small',
'large' => 'large',
]
)
);
?></div>
</div>
<?
}
Settings are saved in the post meta using woocommerce_process_product_meta.
add_action( 'woocommerce_process_product_meta', 'bytescout_save_product_settings' );
function bytescout_save_product_settings( $post_id ){
$product_notes = $_POST['product_notes'];
$product_notes_color = $_POST['product_notes_color'];
$product_notes_size = $_POST['product_notes_size'];
var_dump($product_notes);
if( !empty( $product_notes ) ) {
update_post_meta( $post_id, 'product_notes', esc_attr( $product_notes ) );
update_post_meta( $post_id, 'product_notes_color', esc_attr( $product_notes_color ) );
update_post_meta( $post_id, 'product_notes_size', esc_attr( $product_notes_size ) );
}
}
And finally. Our customized notes can be placed on the product page. To do this, you first need to define a template for a custom product page. There is an option:
Let’s use the second option for our task and connect the simple.php template with wc_get_template.
And using woocommerce_single_product_summary, we actually add notes on the custom page.
That’s it!
add_action( 'woocommerce_single_product_summary', 'gift_card_template', 60 );
function gift_card_template () {
global $product;
if ( 'product_with_notes' == $product->get_type() ) {
$template_path = ABSPATH . 'wp-content/plugins/woocommerce/templates/';
// Load the template
wc_get_template( 'single-product/add-to-cart/simple.php',
'',
'',
trailingslashit( $template_path ) );
}
}
add_action( 'woocommerce_single_product_summary', 'bytescout_product_front' );
function bytescout_product_front () {
global $product;
$product_notes = get_post_meta( $product->get_id(), 'product_notes' )[0];
$product_notes_color = get_post_meta( $product->get_id(), 'product_notes_color' )[0];
$product_notes_size = get_post_meta( $product->get_id(), 'product_notes_size' )[0];;
if ( $product->get_type() == 'product_with_notes' ) {
echo '<span style="color:'. $product_notes_color .';font-size:'. $product_notes_size .'">' . $product_notes . '</span>' ;
}
}
About the Author
ByteScout Team of Writers
ByteScout has a team of professional writers proficient in different technical topics. We select the best writers to cover interesting and trending topics for our readers. We love developers and we hope our articles help you learn about programming and programmers.
Laravel is a great low-code platform or framework for PHP coding! Laravel creates a lot of code automatically and includes a bevy of convenient templates...
The planet is faced with overwhelming environmental problems. Rising environmental pollution is wreaking havoc on nature and endangering the lives of millions of humans. Evolving...