When managing an eCommerce store with WooCommerce, presenting product details accurately and efficiently is key to delivering a smooth shopping experience. One such essential detail is the SKU (Stock Keeping Unit), a unique identifier for your products that helps with inventory management and order tracking. However, depending on the WordPress theme you’re using, the SKU may not always be displayed prominently.
This guide will walk you through how to show SKUs on your WooCommerce product pages when using the Divi theme. Divi’s flexibility and drag-and-drop builder make it a popular choice for online stores, but it doesn’t always display SKUs by default. You’ll learn how to easily add this functionality using built-in settings, custom code, and plugins.
What is an SKU, and Why Does It Matter?
An SKU is a unique product code used by store owners to track stock, manage orders, and categorize products. Customers may also refer to the SKU when inquiring about a product or seeking assistance with returns.
By displaying SKUs on product pages, you not only help customers access important information but also streamline store operations, improving the overall shopping experience.
Default WooCommerce SKU Display
WooCommerce provides native support for SKUs. In most themes, SKUs are typically displayed on product pages under the product name or price. However, in certain themes like Divi, this important detail may not appear automatically, requiring additional steps to display the SKU clearly.
Also Read: Can WooCommerce Connect to QuickBooks Online (QBO)?
Methods for Displaying SKU on WooCommerce Product Pages in Divi
There are three primary methods for displaying SKUs on WooCommerce product pages when using the Divi theme:
- Using Divi Builder’s Product Page Settings
- Adding Custom Code (CSS/PHP)
- Using WooCommerce SKU Plugins
Let’s explore each method in more detail.
1. Display SKU Using Divi Builder’s Product Page Settings
Divi allows you to design custom product pages using its drag-and-drop builder, making it easy to customize your page layout. Here’s how you can display SKUs with Divi’s built-in tools:
Step-by-Step Instructions:
- Enable Divi Builder on Your Product Page:
- Go to your WordPress dashboard and navigate to WooCommerce → Products.
- Select the product you want to edit.
- Click the Enable Divi Builder button to launch the builder interface.
- Use the Product Elements Module:
- Within the Divi Builder, find the Product Elements module.
- Look for product details such as description, price, or additional information where the SKU might be included.
- If the SKU isn’t visible in this module, consider using one of the other methods outlined below.
This method offers an easy way to customize product pages but may not always display the SKU right out of the box. In that case, you can turn to custom code or plugins for added control.
2. Display SKU with Custom Code (CSS/PHP)
For those who are comfortable with a bit of coding, adding custom PHP or CSS offers a flexible and straightforward solution without the need for plugins.
Step-by-Step Instructions:
- Access Your WordPress Theme Files:
- In your WordPress admin panel, go to Appearance → Theme File Editor.
- Open the
functions.phpfile of your child theme. (If you’re not using a child theme, consider creating one to prevent losing changes during theme updates).
- Insert Code to Display SKU:
Add the following code to the functions.php file to show the SKU on your 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 Your Changes:
After adding the code, click Update File. This will automatically display the SKU on the product page below the product summary section.
Styling the SKU
To ensure the SKU integrates well with your Divi design, you can add custom CSS. Here’s a sample code to style the SKU:
css
.product-sku {
font-size: 16px;
font-weight: bold;
color: #333;
margin-top: 10px;
}
To apply this style, go to Appearance → Customize → Additional CSS and paste the CSS code.
3. Display SKU Using a Plugin
If you prefer not to deal with code, there are several WooCommerce plugins that make it simple to display SKUs without any technical effort.
Recommended Plugins:
- WooCommerce Show SKU on Product Page:
- This plugin is designed specifically to display SKUs on WooCommerce product pages.
- Once installed, it automatically shows the SKU in a predefined location on your product pages.
- WooCommerce Product SKU Generator:
- This plugin generates SKUs for your products if they don’t already have one, and it displays them on the product page.
- Ideal for stores that need to assign SKUs automatically.
Step-by-Step Instructions for Plugin Installation:
- Install and Activate the Plugin:
- In your WordPress dashboard, go to Plugins → Add New.
- Search for “WooCommerce Show SKU on Product Page” and install it.
- Click Activate to enable the plugin.
- Customize SKU Display:
- After activation, you may find additional settings in WooCommerce → Settings, depending on the plugin.
- Adjust the SKU display settings according to your preferences.
- Save Changes:
- Once you’ve configured the plugin, it will automatically display SKUs on your WooCommerce product pages.
Also Read: Where Do You Set the Thank You Message in WooCommerce?
Best Practices for Displaying SKUs
- Visibility: Ensure the SKU is displayed in a location that’s easy for customers to find, such as under the product title or price.
- Consistency: Use a uniform format for SKUs across all products to avoid confusion.
- Custom Styling: Make sure the SKU text is legible and styled to match your theme.
- Mobile-Responsiveness: Always check how the SKU looks on mobile devices to ensure it displays correctly and doesn’t disrupt the page layout.
Final Thought On How to Show SKU on WooCommerce Product Page
Displaying SKUs on WooCommerce product pages using the Divi theme is a crucial step for improving store management and customer experience. Whether you choose to use Divi’s built-in tools, custom code, or a plugin, the process is simple and highly customizable. Adding custom code provides the greatest flexibility, while plugins offer a convenient, no-code solution.
By following these steps, you can easily show SKUs on your WooCommerce product pages, ensuring that both you and your customers have easy access to this essential product information.
Interesting Reads:
How to Set Up Free Shipping in WooCommerce After Amount Added
