Custom Code to translate "Yearly" and "Monthly" in the Pricing blocks

Custom Coding
1

You will need to add the following code to the page Settings ->Custom Code → Header area → Save → Publish:

<script>
window.addEventListener('block-loaded-pricing1', () => {
          $("span:contains('Yearly')").text('aaa');
          $("span:contains('Monthly')").text('bbb');
});
</script>
2

Thanks for this.
Wondering if it would be possible to create 3 options (eg Monthly, Quarterly, Yearly) somehow too?

3

Currently, it is not possible to have those 3 options using custom codes as this functionality is not supported by the pricing blocks. However, I will add your message as a suggestion to our feature requests list to consider when planning further app updates.

4

Hi Marine, this was really helpful good. Thank you! I have no coding experience, so it was very clear.

When I use the code mentioned above, the outcome is that Yearly appears on either side of the toggle (i.e., no monthly).

My novice guess is that the computer does the first line of coding “yearly” to “monthly” (because I replaced ‘aaa’ in your code to ‘monthly’), then it performs the second line of converting “monthly” to “yearly” (because I changed bbb in the code to yearly). The consequence is that “yearly” appears on either side of the toggle because anything labelled monthly now becomes yearly. Is there a way to fix it to say Yearly and Monthly. Or do I just have to use Year and Month?

5

Hey @GrantBlake, you are always welcome!

Regarding your situation, can you please share the custom cod you use here so that I can check why it happens that way?

7

Here is the code

8

Hello @GrantBlake I believe you are trying to simply swap Monthly and Yearly places :slight_smile:
You can give this a try, simply change “blockid” in the code to your exact block name.

<script>
window.addEventListener('block-loaded-blockid', () => {
          document.querySelectorAll('#pricing3 section>div>div>div>div span')[0].innerText='Monthly';
          document.querySelectorAll('#pricing3 section>div>div>div>div span')[1].innerText='Yearly'
});
</script>