Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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!




how to fix shop.png

Share this post

Link to post

3 answers to this question

Recommended Posts

  • 0

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


Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...