Docs

[coryyeakel]

Hey guys,

I’m using a Raw Content element to build a custom HTML comparison table for some of my products, and in it I’m using a few Skill Bar shortcodes to show product ratings.

When using the actual Skill Bar element, there is a field to edit bar text, which is great (I’ve attached the screenshot). However, because I’m using shortcodes instead of using the element itself, I can’t seem to find a way to edit this text.

I know there is a selector to edit the heading of the Skill Bar, but is there a way to edit the actual text on the bar?

Here’s what I’m using now:

[skill_bar heading=”Product Quality” percent=”90%”]

Please let me know how I can edit the actual bar text using the shortcode.

Thanks,
Cory

[Nabeel A]

Hi Cory,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[coryyeakel]

This reply has been marked as private.

[Nabeel A]

Hi Cory,

Thank you for providing the URL, currently you cannot change the text using a Shortcode but this is something that can be done using a custom script. To do this, give your skillbar shortcode a unique class, for example if you’ve two skill bar shortcodes:

[skill_bar class="custom_skill_1" heading="Lego Assembling Skills" percent="95%"]
[skill_bar class="custom_skill_2" heading="Some More Assembling Skills" percent="45%"]

You can change their text by adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.custom_skill_1 .percent').html("Some Text");
	$('.custom_skill_2 .percent').html("Some More Text");
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Author]

Posts