How to change the color of bottom line under product title

Hello @nyashing,

Please put the CSS below in Customizing > Custom CSS/JS > CSS Code:

.woocommerce div.product .product_title {
    border-color: #000;
}

Result: https://postimg.cc/k6Zq8hn9.

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: 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).

Also, 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/

I hope that helps.
Best Regards

Hi Shahin,

Thank you for your help.
Unfortunately the code isn’t working.
I did clear both page cash and browser cash, also regenerate files & data on Elementor, but the line color still doesn’t change.

Any other suggestion, please?

Hi again,

Just after the last message, I moved the css code on top of all the other code and it worked! I don’t know why it wasn’t working before yet.

Anyway, thank you very much for your help.

Hi @nyashing,

Thank you for reaching out,

If you put that CSS at the end of all CSS and it doesn’t work, it means there is a syntax error in your CSS somewhere. To check them, please use an online tool such as: https://jigsaw.w3.org/css-validator/.

I hope it helps.
Best Regards

Hi Shahin,

Thank you for the information about https://jigsaw.w3.org/css-validator/.
This is very useful.

Best regards

You’re welcome.
I’m glad we could help.