How to show sku on woocommerce product page divi ?

By default, WooCommerce displays the SKU (Stock Keeping Unit) on product pages, but some themes, including Divi, may hide it. If you want to show the SKU on your product page in Divi, follow the methods below.

Method 1: Enable SKU Display via Theme Settings

Navigate to WordPress Dashboard > Divi > Theme Options.
Look for the WooCommerce settings to check if there is an option to enable SKU display.
If there is no built-in option, proceed to the next method.

Method 2: Using a Child Theme and WooCommerce Hooks

Step 1: Create a Child Theme (If You Haven’t Already)

Using a child theme ensures that your changes won’t be lost when updating Divi.

Navigate to wp-content/themes/ via FTP or File Manager.
Create a new folder, e.g., divi-child.
Inside this folder, create a style.css file and add:
```
/*
Theme Name: Divi Child
Template: Divi
*/
```

Create a functions.php file and enqueue the parent theme:

<?php
function my_child_theme_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');
?>

Activate your child theme from the WordPress dashboard (Appearance > Themes).

Step 2: Add SKU Display to the Product Page

Now, insert the following code into your child theme’s functions.php file:

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

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

This code:

Retrieves the SKU from the product data.
Displays it within the product summary section.

Method 3: Using Custom CSS (If SKU is Hidden)

If the SKU is present but hidden due to CSS settings, you can force it to appear.

Step 1: Inspect the SKU Element

Use Inspect Element (F12) in your browser to check if the SKU is present but hidden.

Step 2: Apply Custom CSS

Go to Appearance > Customize > Additional CSS and add:

.woocommerce div.product .sku {
    display: block !important;
    font-weight: bold;
    color: #333;
}

This CSS will ensure that the SKU is visible on your product pages.

Conclusion

These methods allow you to display the SKU on WooCommerce product pages within the Divi theme. Whether using WooCommerce hooks, custom CSS, or theme settings, you can ensure that product SKUs are visible to your customers.