When you run an eCommerce store with WooCommerce, managing product details effectively can significantly enhance the shopping experience. One crucial detail is the SKU (Stock Keeping Unit), a unique identifier for products that helps store owners and customers track inventory and manage orders more efficiently. However, depending on the theme you are using, this information may not always be displayed prominently.
In this guide, we’ll walk you through how to show SKUs on your WooCommerce product pages when using the Divi theme. Divi is known for its versatility and drag-and-drop builder, but by default, it doesn’t always show SKUs in the product layout. You’ll learn how to add this feature with minimal effort using built-in settings, custom code, and plugins.
What is an SKU, and Why Is It Important?
An SKU is a unique code that identifies each product in your inventory. It is used by store owners for tracking stock and ensuring products are categorized correctly. Customers also use SKUs when they have questions about a particular product or need assistance with a return.
By displaying the SKU on the product page, you allow users to access this critical information easily, which can help streamline operations and improve customer satisfaction.
Also Read: TOP 10 Best CMS Software for Building Your Website
Default WooCommerce SKU Display
WooCommerce comes with built-in support for SKUs. Normally, WooCommerce themes display SKUs automatically on product pages, typically under the product name or price. However, some themes, including Divi, may not showcase this detail prominently. That’s why it becomes necessary to take additional steps to display the SKU.
Methods to Display SKU on WooCommerce Product Page in Divi
There are three primary ways to display SKUs on the product page when using the Divi theme: Let’s go through each method in detail.
1. Display SKU Using Divi Builder’s Product Page Settings
Divi allows users to create custom product pages using its drag-and-drop page builder. Here’s how you can display the SKU using Divi’s built-in tools:
Step-by-Step Guide:
- Enable Divi Builder on the Product Page
- Go to WooCommerce → Products in your WordPress dashboard.
- Choose the product you want to edit.
- Click on the Enable Divi Builder button to open the page builder interface.
- Use Product Elements Module
- In the Divi Builder, look for the Product Elements module.
- The SKU option might be hidden within this module. Depending on the version of Divi, check for elements such as product description, price, or additional information.
- If SKU isn’t visible here, proceed to the next method.
While this method provides an easy way to customize product pages, it may not always offer SKU visibility right out of the box. In such cases, custom code or plugins are the next best options.
2. Display SKU with Custom Code (CSS/PHP)
If you’re comfortable adding a bit of custom code, this method is straightforward and doesn’t require installing any additional plugins.
Step-by-Step Guide:
- Access Your WordPress Theme Files
- Go to your WordPress admin panel.
- Navigate to Appearance → Theme File Editor.
- In the right sidebar, find and open the
functions.phpfile of your child theme. (If you’re using the main Divi theme without a child theme, it’s recommended to create one to avoid losing changes when the theme updates).
- Add Code to Display SKU Insert the following code in your
functions.phpfile to show the SKU on the product page:php
add_action( ‘woocommerce_single_product_summary’, ‘display_product_sku’, 20 );function display_product_sku() {
global $product;
if ( $product->get_sku() ) {
echo ‘<p class=”product-sku”>SKU: ‘ . $product->get_sku() . ‘</p>’;
}
} - Save Changes Once the code is added, click Update File to save your changes. This will automatically display the SKU below the product summary section.
Styling the SKU
To make the SKU stand out or align with your Divi theme, you can add custom CSS. Here’s an example of how to style the SKU:
.product-sku {
font-size: 16px;
font-weight: bold;
color: #333;
margin-top: 10px;
}
Add this CSS to your Divi theme customizer by going to Appearance → Customize → Additional CSS.
3. Display SKU Using a Plugin
If you’re not comfortable adding custom code, another option is to use a plugin. Several WooCommerce plugins are available that help manage and display SKUs without any technical know-how.
Recommended Plugins:
- WooCommerce Show SKU on Product Page
- This plugin is specifically designed to display SKUs on WooCommerce product pages.
- After installation, it automatically shows the SKU in a predefined location on the product page.
- WooCommerce Product SKU Generator
- This plugin generates SKUs for your products and allows you to display them on the product page.
- Ideal for stores that don’t already have SKUs and need to assign them automatically.
Step-by-Step Guide for Plugin Installation:
- Install and Activate the Plugin
- Go to Plugins → Add New in your WordPress dashboard.
- Search for “WooCommerce Show SKU on Product Page.”
- Install and activate the plugin.
- Customize SKU Display
- Depending on the plugin, you may find additional settings under WooCommerce → Settings.
- Adjust the SKU display settings according to your preference.
- Save Changes
- Once configured, the plugin will automatically display the SKU on product pages in WooCommerce.
Also Read: How to Apply Multiple Shipping Classes to a Product in WooCommerce
Best Practices for Displaying SKUs
- Visibility: Ensure the SKU is placed in a location that is easy for customers to find, such as below the product title or price.
- Consistency: Use a consistent format for SKUs across all products.
- Custom Styling: Make the SKU text readable and aligned with your theme’s design by using CSS.
- Mobile-Responsiveness: Always test how the SKU looks on mobile devices, ensuring the layout isn’t disrupted.
Final Thought on How to Show SKU on WooCommerce Product
Displaying SKUs on WooCommerce product pages with the Divi theme is a valuable feature for both store owners and customers. Whether you choose to use Divi’s built-in tools, add custom code, or install a plugin, the process is relatively straightforward. Custom code allows for the greatest flexibility, while plugins offer a no-code solution. Regardless of the method, ensuring the SKU is visible and styled appropriately will enhance the usability of your WooCommerce store.
By following the steps outlined in this guide, you can efficiently show SKUs on your WooCommerce product pages and offer a better experience for both you and your customers.
Interesting Reads:
How to Set Up Free Shipping in WooCommerce After Amount Added
