For simple product type, you’ll find these option tabs
In simple, variable, Grouped, and External/Affiliate product types, You see some common tabs and some specific different tabs. For example, After selecting the Variable product type you’ll see the variations tab. Not just based on product type, If your product isn’t digital, You’ll see the shipping tab.
For example, We want to display the FAQ on the product details page. Each product has its own FAQ. In this case, the Product description section will work as well. But we want to display them as separate tab on the product page.
First, create a custom options tab,
/**
* Register custom options tab.
*
* @param array $tabs Tab List.
*
* @return array
*/
function custompft_options_tab( $tabs ) {
$tabs['custompft_options'] = array(
'label' => __( 'FAQ', 'text-domain' ),
'class' => 'show_if_simple',
'target' => 'custompft_content_element',
);
return $tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'custompft_options_tab' );woocommerce_product_data_tabs located in
woocommerce/includes/admin/meta-boxes/class-wc-meta-box-product-data.php:72
/**
* Return array of tabs to show.
*
* @return array
*/
private static function get_product_data_tabs() {
/* phpcs:disable WooCommerce.Commenting.CommentHooks.MissingHookComment */
$tabs = apply_filters(
'woocommerce_product_data_tabs',
array(
'general' => array(
'label' => __( 'General', 'woocommerce' ),
'target' => 'general_product_data',
'class' => array( 'hide_if_grouped' ),
'priority' => 10,
),
'inventory' => array(
'label' => __( 'Inventory', 'woocommerce' ),
'target' => 'inventory_product_data',
'class' => array( 'show_if_simple', 'show_if_variable', 'show_if_grouped', 'show_if_external' ),
'priority' => 20,
),
'shipping' => array(
'label' => __( 'Shipping', 'woocommerce' ),
'target' => 'shipping_product_data',
'class' => array( 'hide_if_virtual', 'hide_if_grouped', 'hide_if_external' ),
'priority' => 30,
),
'linked_product' => array(
'label' => __( 'Linked Products', 'woocommerce' ),
'target' => 'linked_product_data',
'class' => array(),
'priority' => 40,
),
'attribute' => array(
'label' => __( 'Attributes', 'woocommerce' ),
'target' => 'product_attributes',
'class' => array(),
'priority' => 50,
),
'variations' => array(
'label' => __( 'Variations', 'woocommerce' ),
'target' => 'variable_product_options',
'class' => array( 'show_if_variable' ),
'priority' => 60,
),
'advanced' => array(
'label' => __( 'Advanced', 'woocommerce' ),
'target' => 'advanced_product_data',
'class' => array(),
'priority' => 70,
),
)
);
/* phpcs: enable */
// Sort tabs based on priority.
uasort( $tabs, array( __CLASS__, 'product_data_tabs_sort' ) );
return $tabs;
}$tabs must contain a unique key, and the value must be with a 3-key value
- label: Human readable Text and also can be translateable
- class: provide array or string. In my case, My tab only displays if the product type is simple
- target: Your options root HTML element ID. it’s actually used to toggle content visibility.
Second, display some fields
/**
* Display product options content.
*/
function custompft_options_content() {
$screen = get_current_screen();
$content = '';
if ( 'edit' === $screen->parent_base ) {
$content = get_post_meta(
get_the_ID(),
'_custompft_product_faq_content',
true
);
}
?>
<div id="custompft_content_element" class="panel woocommerce_options_panel">
<br>
<strong style="margin: 0 10px;">
<?php echo esc_html__( 'FAQ Settings', 'text-domain' ); ?>
</strong>
<div style="margin: 10px;">
<?php
wp_nonce_field( '_custompft_nonce', '_custompft_options_nonce', false );
$args = array(
'media_buttons' => false,
'teeny' => true,
'tinymce' => array(
'toolbar1' => 'bold,italic,underline,bullist,numlist,link,unlink,undo,redo',
'toolbar2' => '',
'toolbar3' => '',
),
);
wp_editor( $content, 'custompft_content', $args );
?>
</div>
</div>
<?php
}
add_action( 'woocommerce_product_data_panels', 'custompft_options_content' );In that case, I’m using WordPress’s default TinyMCE editor.
Third, save settings.
/**
* Save setting.
*
* @param int $product_id Product ID.
*/
function custompft_save_setting( $product_id ) {
if ( ! isset( $_POST['_custompft_options_nonce'] ) ||
! wp_verify_nonce(
sanitize_text_field( $_POST['_custompft_options_nonce'] ),
'_custompft_nonce'
)
) {
return;
}
update_post_meta(
$product_id,
'_custompft_product_faq_content',
wp_kses_post(
isset( $_POST['custompft_content'] ) ?
$_POST['custompft_content']
: ''
)
);
}
add_action( 'save_post_product', 'custompft_save_setting' );Last, Display data on the product page as a separate tab.
I already wrote an article about it, You may follow it from here.
Thanks.
Leave a Comment