Three quick, handy jQuery tips for when you’re in a bind

Will jQuery affect my website loading speed?

Below are a few jQuery snippets that have helped us out a lot over the years. Especially when we bump into issues with plugins not allowing full customisation of certain elements. Instead of editing the plugin or theme files, we have been able to insert a quick snippet to solve our issue.

Don’t overwhelm your site with too much though! The odd bit of jQuery script added to the head or body of your website is not going to be a huge cause for concern. However, too much, and it can slow your site down in terms of website loading speed. If you have your website set up to load scripts in the footer then this will of course help greatly in preventing your code slowing down the page loading speed. In summary, it all depends on multiple factors: your website hosting, specific site setup and theme.

Tip 1: How to change the style of an element based on its text content

This one is extremely useful when, for example, a plugin or theme produces and outputs a bunch of elements (an array) using the same class and you wish to highlight a specific one. You may want to underline one of them or change the text colour, or highlight it bold. You have no tag handle like a class or id because the DOM is showing them all using the same name. Let’s show you what we mean.

Here is a list of elements in the DOM produced by say a plugin. On the left you’ll see how the code looks, on the right you’ll see what the user see’s on the page.

Let’s say that we’d like to highlight the manufacturer ‘Ford’ by making the text red or apply some sort of CSS styling to it. Now you could use :nth-of-type, however you can’t if the list is sortable or if its dynamic and the order may change for whatever reason. Here we can apply a snippet of jQuery to target the the word directly within its tag. First we place the jQuery library script before our closing head (/head) in our theme area. This is only needed if your site hasn’t already loaded a jQuery library using another plugin or system. Alternatively you can install a plugin to run Javascript or jQuery code within your site and paste the codes above within that plugin.

We then place our actual snippet of jQuery code in our theme customisation area where we can insert scripts before the closing body tag (/body).

The above code will look for the class ‘Manufacturer’ and check if it contains the word ‘Ford’, if it does then it will apply the inline css style of colouring the text red (#ce0d0b). Please note that it will be case sensitive. If the array shows the word ‘Ford’ with a capital ‘F’, and you insert the piece of script with a lowercase ‘f’ then it will not function.

It’s 3 lines of code including the script open and close tags and it gets the job done. If the ordering of the array or list of classes changes at any point the code will still work.

The outcome:

Tip 2: How to add a Class to an element based on it’s text content using jQuery

If you wanted to change more than just one CSS attribute it might be best to change this script up to add a specific class.

For this you can simply change the script to the following and then define all your attribute style via CSS.

This will find the word ‘Ford’ and apply an additional Class of ‘ford styling’ to it making the Class .manufacturer.ford-styling which you can define in your CSS.

The outcome:

Tip 3: How to change the html/text content of an element that has a Class or ID

Finally, this last one is great for those situations where you are using something like WooCommerce. This e-commerce system is for setting up online shops on your website. We often find that the buttons that the plugin produces read ‘Add to Cart’. Now we’re in the UK and for our clients that sounds very American, so we like to change this to ‘Add to Basket’ or ‘Add to Order’.

To accomplish this there are two relatively easy solutions. One is to install a whole new plugin like WooCommerce Customiser, the other is to add a snippet of jQuery. The former is going to be slightly heavier as the plugin will come with other features and settings. This is fine if you need those other options too. However if you’re looking just to change the button labels on all buttons with a specific Class or ID then we find jQuery the tidiest solution.

Furthermore, it’s quick and it’s simple!

For one of the more recent sites we built the WooCommerce plugin produced ‘Add to Cart’ buttons that all had the Class .add_to_cart_button. We can see this by inspecting element on all the WooCommerce buttons on the front end.

So we take this Class that the plugin assigns to all those buttons and add it into the jQuery. We have to home in a little bit more as there is another Class within called ‘w-btn-label’ and this contains the actual text. This Class will be used on pretty much all the website buttons so just using this Class will not suffice. We have to first target the ‘Add to Cart’ buttons using that Class then target the inner Class ‘w-btn-label’ and change the HTML of that element.

As per the first jQuery tip on this page you’ll need to have loaded a jQuery library somewhere on your site so please refer to that step in the first example if you need to do so.

We have now changed the labels of all buttons with the Class .add_to_cart_button to ‘Add to basket’.

Depending on your setup we always advise proceeding with caution when adding custom code to your website. When in doubt, we suggest that you take a full back of your website beforehand.

We hope you have found the jQuery tips above as useful as we do! You can play with so many different options and do plenty of fancy stuff once you learn a bit more about jQuery!