Customize SKU in archive page

Hello @devilmakq,

The action you used will add SKU to all loops for products, you can hide it by using the CSS. But, first, you need to add a div with a custom CSS class for SKU.

Then you can use the body classes to show/hide on any page.

For instance: add “custom-sku” class, then use the CSS below:

.custom-sku {
display: none;
}

.archive.woocommerce .custom-sku {
display: block;
}

Tip: changing the action will change the functionality. So that you can use another action like this one:

add_action( 'woocommerce_after_shop_loop_item_title', 'add_sku_to_archive' );

function add_sku_to_archive() {
  global $product;
  echo '<div class="sku">' . $product->get_sku() . '</div>';
}

I hope that helps.

Best Regards

Thank you for your reply.
But what I meant was to customize the text itself. Like making the text bigger, bold or changing its color.

Hello @devilmakq,

First, you need to add a custom class, then add your custom CSS.

You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/

And for responsive sizes, put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    /* put your custom CSS here*/
}

Or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    /* put your custom CSS here */
}

For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Best Regards

• This reply was modified 1 year, 9 months ago by Shahin.
• This reply was modified 1 year, 9 months ago by Shahin.

How do I add custom class for SKU though as I am using oceanwp? I don’t have much coding knowledge.
I am using the code to show SKU.

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_after_title' );

function custom_after_title() {
global $product;
if ( $product->get_sku() ) {
echo $product->get_sku();
}
}

How am I supposed to add custom class to SKU as I am using oceanwp’s prebuilt functions.

Hello @devilmakq,

1. Remove your action.
2. Instead of that, use this one:

add_action( 'woocommerce_after_shop_loop_item_title', 'custom_after_title' );
function custom_after_title() {
    global $product;
    if ( $product->get_sku() ) {
        echo '<span class="my-custom-sku">' . $product->get_sku() . '</span>';
    }
}

3. Add the CSS below for styling that:

.my-custom-sku {
    font-size: 14px;
    font-weight: 700;
    line-height: 2em;
}

Note 1: Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note 2: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

Note 3: For more styling, please read this reply.

I hope it helps.
Best Regards