Adding a subtitle to WooCommerce products is a great way to provide additional product details or a catchy tagline right below the product title. This feature can enhance the presentation of your products, giving customers more context or highlighting special attributes.
In this guide, we’ll show you how to add a custom subtitle field to WooCommerce products and display it on the product pages, without using a plugin.
Step 1: Add a Custom Subtitle Field to WooCommerce Products
The first step is to create a custom field in the WooCommerce product editor where you can enter the subtitle for each product.
Code to Add a Subtitle Field
Add the following code to your theme’s functions.php file or to a child theme:
/*
* Snippet: How to Add a Subtitle to WooCommerce Products – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1711
* Tested with WooCommerce 10.7.0
* "This function adds a custom subtitle field to the product edit page"
*/
function wcsuccess_add_subtitle_field() {
woocommerce_wp_text_input( array(
'id' => '_product_subtitle',
'label' => __( 'Product Subtitle', 'woocommerce' ),
'placeholder' => 'Enter product subtitle here',
'description' => __( 'Add a subtitle that will display below the product title.', 'woocommerce' ),
'desc_tip' => true
));
}
add_action( 'woocommerce_product_options_general_product_data', 'wcsuccess_add_subtitle_field' );
/*
* Snippet: How to Add a Subtitle to WooCommerce Products – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1711
* Tested with WooCommerce 10.7.0
* "This function saves the custom subtitle field data"
*/
function wcsuccess_save_subtitle_field( $post_id ) {
$subtitle = isset( $_POST['_product_subtitle'] ) ? sanitize_text_field( $_POST['_product_subtitle'] ) : '';
update_post_meta( $post_id, '_product_subtitle', $subtitle );
}
add_action( 'woocommerce_process_product_meta', 'wcsuccess_save_subtitle_field' );
Explanation:
- Custom Field: Adds an input field on the product edit page where you can enter a subtitle for each product.
- Data Storage: Saves the subtitle in the product’s metadata, so it is associated with each individual product.
Step 2: Display the Subtitle on the Product Page
Now that the subtitle can be set in the product editor, we need to display it below the product title on the product page.
Code to Display the Subtitle on the Product Page
Add this code to your functions.php file:
/*
* Snippet: How to Add a Subtitle to WooCommerce Products – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=1711
* Tested with WooCommerce 10.7.0
* "This function displays the product subtitle on the product page"
*/
function wcsuccess_display_product_subtitle() {
global $product;
$subtitle = get_post_meta( $product->get_id(), '_product_subtitle', true );
if ( ! empty( $subtitle ) ) {
echo '<h2 class="product-subtitle" style="font-size: 16px; font-weight: normal; color: #555;">' . esc_html( $subtitle ) . '</h2>';
}
}
add_action( 'woocommerce_single_product_summary', 'wcsuccess_display_product_subtitle', 6 );
Explanation:
- Subtitle Retrieval: Retrieves the subtitle saved in the custom field for the specific product.
- Conditional Display: Only displays the subtitle if it has been filled out for the product.
- Styling: Applies a default style to the subtitle. You can further customise this with CSS.
Step 3: Customise the Subtitle Appearance with CSS
To style the subtitle, you can add custom CSS. This allows you to adjust the font size, colour, and position of the subtitle to fit your store’s branding.
CSS for the Product Subtitle
Add this CSS to your theme’s style.css file or custom CSS area:
.product-subtitle {
font-size: 16px;
font-weight: 300;
color: #777;
margin-top: -10px;
margin-bottom: 15px;
}
Explanation:
- Font Styling: Sets the subtitle to a smaller font size and a lighter colour to subtly display it under the main product title.
- Spacing Adjustments: Adjusts the top and bottom margins to position the subtitle neatly below the title.
Example Workflow
- Product Editor: In the WooCommerce product editor, enter the subtitle text in the Product Subtitle field.
- Front-End Display: The subtitle will display automatically below the product title on the single product page.
- Custom Styling: Adjust the CSS to match your store’s style for a polished, branded look.
Conclusion
Adding a custom subtitle to WooCommerce products is a simple yet effective way to provide extra information or branding on product pages. This guide shows you how to add, save, and display a subtitle field on WooCommerce product pages without a plugin.
Test the code on a staging site before applying it to your live store. For more WooCommerce customisation options, check out our WooCommerce Visual Hooks Guide or use our wp-config generator for advanced configurations.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
