How to Show SKU on Product Page with Divi

To display the SKU on a WooCommerce product page using Divi, you can use Divi’s dynamic content feature or insert custom code into your child theme. Both methods ensure a user-friendly presentation of your product’s SKU information.

In this guide, you’ll learn simple, actionable ways to show SKUs on your WooCommerce product page using Divi. Whether you prefer a no-code approach or a customizable solution, we’ve got you covered.

Step 1: Using Divi Theme Builder to Show SKUs

Divi makes it easy to display product SKUs without dynamically coding them. Here’s how:

1. Activate Divi Theme Builder:
   • Navigate to Divi > Theme Builder in your WordPress dashboard.
   • Choose to edit the template for Product Pages.
2. Insert a Text Module:
   • In the Divi Builder, add a Text Module in the desired position (e.g., below the product title).
   • Click the dynamic content icon (⚡) and select Product SKU.
3. Customize the Display:
   • Use Divi’s styling options to match the SKU display with your theme design. You can adjust fonts, colours, and placement.
4. Save and Publish:
   • Save your changes and check the front end to ensure the SKU appears correctly.

This method ensures your SKUs are visible and integrated seamlessly into your design.

Step 2: Adding Custom Code for Advanced Control

Those who are comfortable with code can manually add SKU functionality to their WooCommerce product pages. This approach offers more flexibility for positioning and styling. Follow these steps:

1. Access Your Child Theme’s Files:
   • Go to Appearance > Theme Editor, and select your child theme.
   • Locate the functions.php file or create a custom template.
2. Insert the Following Code:

add_action('woocommerce_single_product_summary', 'show_sku_on_product_page', 20);

function show_sku_on_product_page() {
    global $product;
    if ( $product->get_sku() ) {
        echo '<p class="sku-display">SKU: ' . $product->get_sku() . '</p>';
    }
}

Style the SKU Display:

• Add custom CSS in Appearance > Customize > Additional CSS:

.sku-display {
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
}

Test and Adjust:

• Visit a product page to verify the SKU displays correctly. Adjust as needed for mobile responsiveness.

Step 3: Plugins for SKU Management

If you prefer a plugin-based approach, several tools can simplify SKU management:

• WooCommerce SKU Label Changer: Customize the SKU label text (e.g., change “SKU” to “Product Code”).
• SKU Generator for WooCommerce: Automatically generate unique SKUs for your products.
• WooCommerce Advanced SKU Reports: Analyze inventory data by SKU.

Plugins save time and are beginner-friendly, though they may add extra overhead.

Step 4: Customizing SKU Appearance

Once SKUs are displayed, make sure they’re visually appealing. Here are tips for customization:

• Positioning: Place SKUs prominently, such as below the product title.
• Styling: Use bold text or colour highlights to draw attention.
• Mobile Optimization: Ensure SKU visibility across devices by testing on different screen sizes.

Common Issues and Troubleshooting

Why isn’t the SKU displaying?

• Check if the product has an SKU assigned in the WooCommerce product editor.
• Ensure your Divi Builder module or custom code references get_sku() correctly.

Conflict with Plugins or Themes

• Disable plugins one by one to identify conflicts.
• Use a staging environment to test customizations safely.

Advanced Tips for SKUs

• Search by SKU: Use plugins like “WooCommerce Search by SKU” to allow customers to find products via SKU search.
• Add SKUs to Order Emails: Enhance order details by including SKUs in transactional emails.

Conclusion

Displaying SKUs on your WooCommerce product page with Divi enhances both functionality and user experience. Choose between Divi’s dynamic content features, custom code, or plugins, depending on your needs. Properly styled and placed SKUs not only improve navigation but also boost your store’s professionalism.

FAQs

Digital Assets

See all author post