Display SKU Next To Product Title in WooCommerce

While I don’t always necessarily understand the ‘why’ behind some of the WooCommerce requests I see in Facebook groups, I still take the opportunity to research a solution and learn something new. In this article, we will see how to append a product’s SKU (if it has one) to the Product title. This is how I imagined the best way to display the product SKU beside the Product title. However, I’m always open to suggestions…

Custom WooCommerce and Shopify Solutions

Discover useful WooCommerce and Shopify custom solutions for your online store today at affordable prices!


Note: All examples in this post are part of a development/learning WooCommerce install using the default Storefront theme. PHP code is placed in the child themeโ€™s function.php file. Additionally, this solution works on OceanWP and Astra free themes.


The Newsletter for PHP and MySQL Developers

Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.

I am modifying the Product title on both the Shop page and Single Product page in order to append the product SKU. I realize that the product SKU is generally already available on the Single Product page so this might not be a common requirement but more of an edge-case need.

Nevertheless, it is definitely a great learning opportunity.

Using the_title hook and the add_filter() function, we can create a callback function to return the modified Product title. I also want to plan for the event that a product may not have an SKU and append something more meaningful besides blank whitespace.

add_filter ( 'the_title', 'custom_woo_show_sku_with_title' , 9999, 4 );

function custom_woo_show_sku_with_title( $post_title, $post_id )
{
$product = wc_get_product( $post_id );

if ( ! is_admin() && 'product' === get_post_type( $post_id ) && $post_id === $product->get_id() )
{
$sku_display = empty( $product->get_sku() ) ? 'Not Available' : $product->get_sku();
$post_title = $post_title . ' (SKU: ' . $sku_display . ')';
}
return $post_title;
}

Visiting the code, here are some highlights:

  • The custom callback function, custom_woo_show_sku_with_title() accepts 2 arguments: the post title and the post id.
  • Use the wc_get_product() function and create a product object.
  • In the if() statement, there are 3 conditionals that must all evaluate to be true: 1) Not be on an administrative page. 2) Must be a product post type. 3) The product ID must be the same as the post ID.
  • Using the ternary operator, if a product doesn’t have an SKU, provide the message ‘Not Available’. Otherwise, use the product SKU.
  • Append the SKU (or message) to the product title and return it for output on the screen.

As shown in the following screenshots, all products on the Shop page and the Single Product page have an SKU or meaningful message appended to the Product title:


Do you have a need for this exact customization for your WooCommerce online store? Consider hiring me to complete this for you, hassle-free. Contact me for more information.


Credit Resources

Once again, I would be one lost goose without some of the fantastic resources and content available online. These articles were instrumental in my understanding and ability to implement this code solution:


If you see any mistakes in the code or know of a better solution, please share them freely in the comments section.


Thank you for reading this post. Please share it with someone else who would enjoy it as well.


Josh Otwell has a passion to grow as a PHP Developer, SQL expert, and technical blogger/writer.

Disclaimer: The majority of examples in this post, are performed in a personal development/learning workstation environment and should not be considered production quality or ready. Your particular goals and needs may vary. Like always, just because you can do something doesn’t mean you should. My opinions are my own.

More ways I can help

Disclosure: Some of this blog post’s services and product links are affiliate links. At no additional cost to you, should you make a purchase by clicking through one of them, I will receive a commission.

The Newsletter for PHP and MySQL Developers

Receive a copy of my ebook, “10 MySQL Tips For Everyone”, absolutely free when you subscribe to the OpenLampTech newsletter.


๐Ÿ“ฐ Get your brand, product, or service the attention it deserves with affordable classified ad placement in the OpenLampTech newsletter. I appreciate your support!


Hey thanks for commenting! Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.