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…
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:
- https://woocommerce.wp-a2z.org/oik_api/wc_get_product/
- https://www.businessbloomer.com/woocommerce-capitalize-product-names/
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
- Need hosting for your next web application or WordPress site? I highly recommend Hostinger and use them to host my niche bass fishing site. The service is second to none.
- 🔒5 Truths I’ve Come To Realize As a Self-taught Developer
- Desktop and mobile wallpapers, digital downloads, photography services, Shopify and WooCommerce customizations, and content writing – all in one E-commerce Shop. Find your next digital purchase today!
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!