Showing monthly as default in pricing block

Some folks want to show monthly as a default price in pricing block and the code below does it when it’s added to the page settings custom code header area

<script>
document.addEventListener("DOMContentLoaded", function() {
    $('.switch_1').click();
});
</script>
2 Likes

Just dicovered this code that is working perfectly :slight_smile: In the past, the chat support gave me this code to convert “Monthly” into “Mensuel” in french, but it still not working, any idea ? Thanks

document.addEventListener(“DOMContentLoaded”, function() {
$('.year').text('Annuel');
$('.month').text('Mensuel');
});

It’s me again :eyes:
Just change the pricing ID:

<script>
     document.addEventListener("DOMContentLoaded", function() {
          $('#pricing1 .year').text('Annuel');
          $('#pricing1 .month').text('Mensuel');
     });
</script>

Thanks a lot @matthieu_chateau, for beginners, don’t forget to replace #pricing1 with the name of your pricing block (if you have several, you must replicate the code) :muscle:

Hi @artur ,
I added it but it doesn’t seem to work.

@kelshaer Please send your page URL and I can check it.

Hello! I used the first script, but I ran into a problem, as it doesn’t work completely.

Here is what happens:

  1. User goes to website
  2. The pricing block loads, and the toggle switch shows as clicked, with “MONTHLY” selected, as desired, however…
  3. BUG 1. The prices shown are those of the YEARLY subscription. And the BUY BUTTON also drives the customer to the yearly price, not the monthly one (this is inconsistent with the MONTHLY position of the toggle switch).
  4. BUG 2 (minor). The font of YEARLY reamins in BOLD, and that of MONTH remains in regular (this is inconsistent with the MONTHLY position of the toggle switch).

So it seems that the script accomplishes part of the task, but not the full desired behaviour. I have created a sample site which shows the issue:
https://bit.ly/3TRW2M5

Could you help into how to improve the script? @artur

Hello @PPP-2023 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.
And please place the code inside the page’s custom code header section, then simply set the prices respectively for each interval from Softr Studio.

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

Thank you @Andranik for the super-fast reply.

To clarify: What I want to accomplish is that the user is presented with the MONTHLY prices, and buy button, by default. As our product price is high, the price presented in MONTHLY as opposed to YEARLY by default reduces the sticker shock.

Whether “presenting monthly prices by default” is accomplished by swaping the places of Monthly and Yearly, or by “simulating a click” on monthly, I have no preference.

As, I could not accomplish the MONTHLY by default in the pricing block setup in softr, so I tried the code that @artur created, but it didn’t work as per my description.

I will try solution, just to check, two questions:

Q1: I have to add the block ID in both this line:

window.addEventListener(‘block-loaded-blockid’, () => {

and these two lines, right?

document.querySelectorAll(‘#blockid section>div>div>div>div span’)…[0].innerText=‘Monthly’;
document.querySelectorAll(‘#blockid section>div>div>div>div span’)…

Q2. Also, do I have to keep the # in the second pair of lines in front of the blockid?

Yes @PPP-2023 you need to simply change the blockid in the three sentences you mentioned, that is correct, and yes please keep the #

@Andranik I tried your solution and implemented it here: https://bit.ly/49is0FI However, I get no result. Here is the code I used in the header section:

<script>
window.addEventListener('block-loaded-2024-03-27-pricing-test-monthly', () => {
          document.querySelectorAll('#2024-03-27-pricing-test-monthly section>div>div>div>div span')[0].innerText='Monthly';
          document.querySelectorAll('#2024-03-27-pricing-test-monthly section>div>div>div>div span')[1].innerText='Yearly'
});
</script>

@PPP-2023 Please do not use numbers for the block name, try using pricing-test-monthly only and it will work.

Thank you for the advice. There is change, but now the website behaves exactly as the first code, i.e. only changing the toggle, but not the information shown.
The code below in case I am missing something, now with the numbers on the block removed (and the block renamed):

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

And in both,

  1. User goes to website
  2. The pricing block loads, and the toggle switch shows as clicked, with “MONTHLY” selected, as desired, however…
  3. BUG 1. The prices shown are those of the YEARLY subscription. And the BUY BUTTON also drives the customer to the yearly price, not the monthly one (this is inconsistent with the MONTHLY position of the toggle switch).
  4. BUG 2 (minor). The font of YEARLY reamins in BOLD, and that of MONTH remains in regular (this is inconsistent with the MONTHLY position of the toggle switch).

Any ideas?

@PPP-2023 Thanks for all the details, but the information need to be changed from the block settings you need to simply swap the prices also from the block settings.


Regarding the boldness it depends on the toggle position if it is directed towards monthly it will be bold and vice versa.

The automoderator has removed my links for being on bitly. So here are some new ones:

  1. https://klara362.softr.app/monthly-as-default-1 Here I implement the first solution by Artur
  2. https://klara362.softr.app/monthly-as-default-1 Here I implement the second solution as per Andranik

@PPP-2023 Did you try to change the prices and labels from block settings as I asked above?

1 Like

Oh wow! I changed it, and you can find the third implementation here, and it works
https://klara362.softr.app/monthly-as-default-3

And, for reasons beyond my understanding, putting the values and the label crossed, does work. See screenshot for the setup.
image

Just how?

Hey @PPP-2023 Thanks a lot for the update and glad that it worked, that is because in default we set the toggle on Yearly, so now what happened is that when you implemented the code we switched the wordings and swapped their places, however in the block settings things were opposite and that is the reason why I asked you to change the places.
let me provide more details how things work on the block settings.
First of all we have subscriptions plans marked with red.


And each subscription plan has its Yearly and Monthly intervals (the price of a subscription when you pay monthly vs yearly) related sidenote: that is the reason why all the labels are called Monthly.
Now let us take the first subscription plan for example which is called “Startup” it has 2 prices one is $30 if you pay Monthly first line (when the toggle is set to Monthly) and the other is $25 if you pay yearly second line (toggle is set to yearly).

Now after these have been said, it explains why when we swapped the toggles with the custom code we also swapped the price places on the block settings so we saw the correct results.
However we will consider the default toggle option in our new block improvements.