Adding a custom extra tab to a WooCommerce product page is an excellent way to provide more information about your product and increase its appeal.
To add a extra custom tab to a product page in WooCommerce, use the ‘woocommerce product tabs’ filter, as seen below. The code should be placed in your theme’s functions.php file.
<?php
/* Add Ingredients tab */
add_filter( 'woocommerce_product_tabs', 'cxc_add_ingredients_product_tab_callback' );
function cxc_add_ingredients_product_tab_callback( $tabs ) {
$tabs['ingredients_tab'] = array(
'title' => __( 'Ingredients', 'textdomain' ),
'callback' => 'cxc_ingredients_tab_content_callback',
'priority' => 50,
);
return $tabs;
}
/* Ingredients tab content */
function cxc_ingredients_tab_content_callback( $slug, $tab ) {
?>
<h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<?php
}If your product has a custom field on your admin dashboard, the following code will help you achieve the desired effect.
<?php
/* Ingredients tab content */
function cxc_ingredients_tab_content_callback( $slug, $tab ) {
?>
<h2><?php echo wp_kses_post( $tab['title'] ); ?></h2>
<p><?php echo get_post_meta(get_the_ID(),'ingredients_information',true); ?></p>
<?php
}-
CodexCoach is a skilled tech educator known for easy-to-follow tutorials in coding, digital design, and software development. With practical tips and interactive examples, CodexCoach helps people learn new tech skills and advance their careers.
