Custom text formatting for product titles on shop page?

Site URL: https://www.weloveraw.co/shop

Hey guys,

I've been trying to get this custom bit of code working where I want to format my page like the product on the LEFT of the image attached. With the product range in bold, followed by a line break <br>. I cannot for the life of me work out what to do. The text in these boxes isn't seeming to respond to any CSS tag like p, h1, h2 like other text on the page does, and I have no idea at present how to insert the line break, or even how to make it conditional. 

I made the image below by editing the HTML directly in the Chrome inspector. 

Thanks in advance if you have any ideas!

Jamie

What is access password?

Also, I think you can't insert b & br tag between text

wilber is the password

Hey everyone! So I solved my problem! Using the Inspector Console in Chrome really is a lifesaver.

Here is the code I used, hope it helps someone!!! This is only for one category, there were a number, but I'm only showing one.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

// The top one is defo doing something, not sure about the bottom one. Top one is essential. 

 var hey = document.getElementsByClassName('grid-title');
var numProducts = hey.length;
 
  
for (let i = 0; i <= numProducts; i++){       //LOOP THROUGH ALL PRODUCTS.                               
                                
if (hey[i].parentNode.parentNode.parentNode.className.search("balanced-ultra") != -1){ //IF THE PRODUCT IS OF THE CATEGORY BALANCED ULTRA COMPLETE, THEN PROCESS THIS PRODUCT
  
  hey[i].parentElement.parentElement.parentElement.childNodes[5].childNodes[1].childNodes[1].innerText = hey[i].parentElement.parentElement.parentElement.childNodes[5].childNodes[1].childNodes[1].innerText.substr(25);  //TRUNCATE NON-BOLD VERSION 
                                
                           

   $( hey[i].parentElement.parentElement.parentElement.childNodes[5].childNodes[1].childNodes[1] ).prepend( "<b>Balanced Ultra Complete: </b><br>" ); //ADD BOLD VERSION
    }