Jump to content

Custom text formatting for product titles on shop page?

Recommended Posts

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!




how to fix shop.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

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


Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.