WooCommerce Custom Tab Product Edit Page – In this tutorial, we’ll look at how to add a custom tab to the WooCommerce product edit options tab on the product edit page from the admin side. This may be quite handy when we need more information on the product.
Add this code to your website theme functions.php File.
Step 1: Add Custom Tab code
<?php
add_filter( 'woocommerce_product_data_tabs', 'cxc_add_custom_product_tab', 10, 1 );
function cxc_add_custom_product_tab( $default_tabs ) {
$default_tabs['custom_tab'] = array(
'label' => __( 'Custom Tab', 'cxc-codexcoach' ),
'target' => 'cxc_custom_tab_data',
'priority' => 60,
'class' => array()
);
return $default_tabs;
}
?>
In the above code, we add custom tab information to the default tabs array using the ‘custom tab’ id.
The parameters in the above array are essential because the label specifies the name of the tab, the target indicates which content will be added to this tab, priority defines this tab’s position in the list of default tabs, and the class includes the HTML class if one is to be added.
Also Read: How to Create, Edit, Rename & Customize WooCommerce Product Tabs
Step 2: Add Content on the Tab
To add content to this tab, we’ll use another hook called ‘woocommerce product data panels’ and add the following action to it:
<?php
add_action( 'woocommerce_product_data_panels', 'cxc_custom_tab_data' );
function cxc_custom_tab_data() {
?>
<div id="cxc_custom_tab_data" class="panel woocommerce_options_panel">Hello Codexcoach...</div>
<?php
}
?>The id of the div in the above code will be the same as the target provided when establishing the tab. See below Image
Step 3: Include Field Structure
<?php
add_action( 'woocommerce_product_data_panels', 'cxc_custom_tab_data' );
function cxc_custom_tab_data() {
?>
<div id="cxc_custom_tab_data" class="panel woocommerce_options_panel">
<?php
woocommerce_wp_text_input(
array(
'id' => '_custom_product_text_field',
'label' => __( 'My Text Field', 'cxc-codexcoach' ),
'placeholder' => 'Custom Product Text Field',
'desc_tip' => 'true'
)
);
woocommerce_wp_text_input(
array(
'id' => '_custom_product_number_field',
'placeholder' => 'Custom Product Number Field',
'label' => __( 'Custom Product Number Field', 'cxc-codexcoach' ),
'type' => 'number',
'custom_attributes' => array(
'step' => 'any',
'min' => '0'
)
)
);
woocommerce_wp_textarea_input(
array(
'id' => '_custom_product_textarea',
'placeholder' => 'Custom Product Textarea',
'label' => __( 'Custom Product Textarea', 'cxc-codexcoach' )
)
);
?>
</div>
<?php
}
?>Step 4: Save Data in the Database
<?php
add_action( 'woocommerce_process_product_meta', 'cxc_woocommerce_product_custom_fields_save' );
function cxc_woocommerce_product_custom_fields_save($post_id){
$woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
if( !empty( $woocommerce_custom_product_text_field ) ){
update_post_meta( $post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field) );
}
$woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
if( !empty( $woocommerce_custom_product_number_field ) ){
update_post_meta( $post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field) );
}
$woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
if( !empty( $woocommerce_custom_procut_textarea ) ){
update_post_meta( $post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea) );
}
}
?>Note: Store owners must carefully examine the sorts of WooCommerce custom product fields they want to include, as well as how they will be utilized and presented on the product page.
FAQ
Can I customize the WooCommerce product page?
Yes, WooCommerce is all about customization and versatility, which is why it includes all of the tools you need to alter the style and functionality of product pages.
How do I add a custom field to a single product page in WooCommerce?
Just follow the steps given above. thanks
How do I create a custom field without plugins?
Yes, You must first modify the post or page to which you wish to add the custom field and then navigate to the custom fields meta box.
