How to Change the SKU Label in WooCommerce to Custom Text Using CSS

Dear Divi Maniacs, Are you looking to customize the SKU label in WooCommerce and replace it with your own custom text, such as “code”?

This tutorial will guide you through the process of changing the SKU label using a bit of CSS.

By the end of this article, your WooCommerce product pages will display “Code: ” instead of “SKU: ” before the SKU value. Here’s the CSS code you’ll need to achieve this transformation:

/***************************/
/*Change the SKU label to "Code" */
/*********************/ 

/* Hide the original SKU label */ 
.sku_wrapper { display: none; } 

/* Add the label "Code: " before the SKU value */ 
.sku_wrapper .sku::before { content: 'Code: '; font-weight: bold; margin-right: 5px; 

/* Space between "Code: " and the SKU value */ 
} 
/* Hide the original SKU wrapper */ 

.sku_wrapper { visibility: hidden; } 
/* Make the custom label and SKU value visible */ 

.sku_wrapper::before, .sku_wrapper .sku { visibility: visible; } 
/* Fix potential display issues */ 
.sku_wrapper { display: inline-block; } span.sku { margin-left: -35px; }

Step-by-Step Instructions:

1. Access Your Theme Customizer:
   • Go to your WordPress dashboard.
   • Navigate to Appearance > Customize.
   • Click on Additional CSS.
2. Add the Custom CSS:
   • Copy the provided CSS code.
   • Paste it into the Additional CSS section.
3. Publish Your Changes:
   • Click on the Publish button to apply the changes.

Explanation of the Code:

• Hide the Original SKU Label:

.sku_wrapper {
    display: none;
}

This line of CSS hides the original SKU label provided by WooCommerce.

Add Custom Label Before SKU Value:

.sku_wrapper .sku::before {
    content: 'Code: ';
    font-weight: bold;
    margin-right: 5px; /* Space between "Code: " and the SKU value */
}

This line adds the custom label “Code: ” before the actual SKU value, making it bold and adding a small space between them.

Adjust Visibility:

.sku_wrapper {
    display: inline-block;
}
span.sku {
    margin-left: -35px;
}

• These lines ensure that the new label and SKU value display correctly on the product page.

And that’s it! With these simple steps and CSS adjustments, you can customize the SKU label in WooCommerce to display your preferred text, such as “Code”. Enjoy personalizing your WooCommerce store and keep creating amazing websites with Divi!

Happy customizing!