Unveiling the enigma of displaying SKUs on WooCommerce product pages in Divi, we embark on an illuminating journey that will empower you to seamlessly showcase essential product identifiers to your discerning clientele. By employing this indispensable feature, you not only enhance the user experience but also streamline your inventory management processes. Dive into the depths of this comprehensive guide and discover the secrets to unlocking the full potential of SKU visibility, propelling your WooCommerce store towards unparalleled heights.
To commence our odyssey, let us venture into the realm of the Divi Theme Customizer, a treasure trove of customization options. Navigate to the hallowed halls of the “Product” tab, where a plethora of settings await your command. Amidst the myriad of choices, seek out the elusive “Advanced” tab, a gateway to unlocking hidden powers within your product pages. Therein lies the key to unleashing the SKU’s presence, granting you the ability to effortlessly display this vital piece of information.
Yet, our quest does not end here. To further refine the SKU’s presentation, we shall delve into the realm of CSS (Cascading Style Sheets), the intricate language that governs the visual aesthetics of your website. With a deft touch, compose a custom CSS snippet that will imbue the SKU with the desired styling, be it bold text, vibrant colors, or a subtle yet striking appearance. Implement this snippet within the Divi Theme Options or directly modify your child theme’s style.css file, granting you unparalleled control over the SKU’s visual appeal. As you weave your CSS magic, remember to maintain a keen eye for detail, ensuring that the SKU’s visibility and readability harmoniously complement the overall design of your product pages.
Editing the WooCommerce Product Template
To access the WooCommerce product template, navigate to “Appearance” > “Theme Editor” in your WordPress dashboard. In the right-hand panel, locate the “woocommerce” folder and expand it. You will see a list of template files. To edit the product template, select “single-product.php”.
3. Modifying the Template Code
Locate the section of the template code where the product information is displayed. This is typically within a loop, and the product details are accessed using variables such as “$product” or “$post”. To display the SKU, you can use the following code snippet:
<?php echo $product->get_sku(); ?>
This code retrieves the SKU from the product object and outputs it on the page. You can also customize the display style by adding HTML tags around the code, for example:
<p>SKU: <?php echo $product->get_sku(); ?></p>
This will display the SKU within a paragraph tag, with the text “SKU:” preceding it.
Additional Customization Options
You can further customize the display of the SKU by modifying the template code and adding additional functionality. For example, you can:
- Add a label to the SKU field
- Display the SKU in a specific location on the product page
- Conditionally display the SKU based on certain criteria
These customizations require knowledge of HTML and PHP, but they provide a lot of flexibility in how you present the SKU to your customers.
| Style | Code |
|---|---|
| SKU Label | <p><strong>SKU:</strong> <?php echo $product->get_sku(); ?></p> |
| Specific Location | <div id="product-sku"><?php echo $product->get_sku(); ?></div> |
| Conditional Display | <?php if ($product->is_in_stock()) : ?><p>SKU: <?php echo $product->get_sku(); ?></p><?php endif; ?> |
Using a Custom Function
This method involves creating a custom function that will retrieve and display the SKU on the product page. Here’s a detailed guide on how to do it:
1. Create a Child Theme
Create a child theme for your Divi theme to avoid modifying the original Divi files. Refer to the Divi documentation for instructions on creating a child theme.
2. Add the Custom Function to the Functions File
Open the functions.php file in your child theme and add the following function:
// Display SKU on product page
add_action( 'woocommerce_single_product_summary', 'display_product_sku', 20 );
function display_product_sku() {
global $product;
$sku = $product->get_sku();
if ( $sku ) {
echo '
SKU: ' . $sku . '
';
}
}
3. Style the SKU Display
To style the SKU display, add the following CSS to your child theme’s style.css file or through the Custom CSS option in the Divi Theme Customizer:
.sku {
font-size: 14px;
color: #666;
}
4. Customize the SKU Display Position
By default, the SKU will be displayed after the product title. To change the position, locate the woocommerce_single_product_summary hook action in the functions.php file and adjust the priority parameter in the add_action function as follows:
| Priority | Position |
|---|---|
| 10 | Before the product title |
| 20 | After the product title (default) |
| 30 | After the product description |
| 40 | After the product price |
For example, to display the SKU before the product title, change the priority to 10:
add_action( 'woocommerce_single_product_summary', 'display_product_sku', 10 );
How to Show SKU on WooCommerce Product Page Divi
To display the SKU (Stock Keeping Unit) on the WooCommerce product page using Divi, follow these steps:
-
In the WordPress dashboard, navigate to Appearance > Customize.
-
Click on the “WooCommerce” tab.
-
Expand the “Product Page” section.
-
Under the “Product Meta” tab, enable the “SKU” option.
-
Click on the “Save & Publish” button.
Once you have completed these steps, the SKU will be visible on the product page below the product title.
People Also Ask About How to Show SKU on WooCommerce Product Page Divi
How to display the SKU on the product archive page?
To display the SKU on the product archive page, you can use a WooCommerce hook. Add the following code to your theme’s functions.php file:
add_action( 'woocommerce_after_shop_loop_item_title', 'my_product_sku', 10 );
function my_product_sku() {
global $product;
echo '' . $product->get_sku() . '';
}
How to change the SKU position on the product page?
You can use CSS to change the position of the SKU on the product page. Add the following code to your theme’s custom CSS:
.sku {
position: absolute;
top: 10px;
right: 10px;
}
How to hide the SKU on certain products?
You can use conditional statements to hide the SKU on certain products. For example, to hide the SKU on products in the “Electronics” category, you can use the following code:
add_filter( 'woocommerce_product_get_sku', 'my_hide_sku', 10, 2 );
function my_hide_sku( $sku, $product ) {
if ( has_term( 'electronics', 'product_cat', $product->get_id() ) ) {
$sku = '';
}
return $sku;
}
