How to edit the message "This post is for paying subscribers only"

Hello,

I’m on a Ghost Pro hosting and my theme is Source.

My URL is https://transactionbourse.com/

I wanted to know if it’s possible to edit the message “This post is for paying subscribers only” (see screenshot below) since I’m not on a creator plan.

Can I do it with code injection?

Thanks :blush:

Yes, you can do that with a simple code injection:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
    
    if (h2Element) {
        h2Element.textContent = 'Your New Message Here';
    }
});
</script>

What this does is basically waiting for the content on the page to load, then select the h2 element from within the upgrade CTA, and finally change the text content there.

Oh thank you very much but I expressed myself badly: I would like to change the text of the three lines, not only the title :slightly_smiling_face:

Is it possible too?

Sure! They are all just HTML elements, so you can change them all.


<script>
document.addEventListener('DOMContentLoaded', function() {
    const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
    const buttonElement = document.querySelector('.gh-post-upgrade-cta-content .gh-btn');
    const smallTextElement = document.querySelector('.gh-post-upgrade-cta-content small');

    if (h2Element) {
        h2Element.textContent = 'Your New H2 Message Here';
    }

    if (buttonElement) {
        buttonElement.textContent = 'Your New Button Text Here';
    }
  
    if (smallTextElement) {
        smallTextElement.innerHTML = 'Your New Small Text Here';
    }
});
</script>

For the small text, you need to insert any links etc. with HTML. Have a look at the original source code to understand how to do that:

<div class="gh-post-upgrade-cta-content" style="background-color: #FF1A75">
    <h2>This post is for subscribers only</h2>
    <a class="gh-btn gh-portal-close" data-portal="signup" style="color:#FF1A75">Subscribe now</a>
    <p><small>Already have an account? <a data-portal="signin" class="gh-portal-close">Sign in</a></small></p>
 </div>

The small text link doesn’t work but I suppose I made a mistake…

I pasted this in the area you suggested ;

<p><small>Vous avez déjà un compte? <a data-portal="signin" class="gh-portal-close">Connectez-vous</a></small></p>

The <p><small>...</small></p> weren’t necessary, since we are already changing everything within the <small>...</small> tag.

I tried the text you wrote on one of my test sites and found another issue. The data-portal attribute doesn’t work, since we load this code injection after the DOM is loaded.

So, we need to create the URL ourselves. Experimented a bit and this worked in my test site:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
    const buttonElement = document.querySelector('.gh-post-upgrade-cta-content .gh-btn');
    const smallTextElement = document.querySelector('.gh-post-upgrade-cta-content small');

    if (h2Element) {
        h2Element.textContent = 'Your New H2 Message Here';
    }

    if (buttonElement) {
        buttonElement.textContent = 'Your New Button Text Here';
    }
  
    if (smallTextElement) {
        // Construct the relative URL dynamically
        const signInUrl = window.location.href + '#/portal/signin';
        smallTextElement.innerHTML = 'Vous avez déjà un compte? <a href="' + signInUrl + '" class="gh-portal-close">Connectez-vous</a>';
    }
});
</script>
1 Like

Thank you very, very, very much ; it works :slightly_smiling_face:

2 Likes

Do you know how I can edit those 2 buttons, too?

1 Like

Are you only trying to translate the buttons to French? If so, have you tried enabling the portal translation beta feature via the Labs settings?

Edit: I’d missed that these are part of the theme. Theme translations are separate to the core Portal app translations so the toggle won’t translate these theme buttons

1 Like

Yes I did, but the beta feature doesn’t translate the buttons :pensive:

I’ve already translated the button in the upper side of the screen with the following code in footer ;

<script>
    document.querySelector('[data-portal="signup"]').innerText = "Inscription"
    document.querySelector('[data-portal="signin"]').innerText = "Connexion"
</script>

But I don’t find how to translate the two others buttons.

Hello Jannis,

I still have a small issue ;

I have no difference between “this post is for members only” and “this post is for paid-members only”.

Both are “this post is for paid-members only” :face_with_head_bandage:

Nobody knows? :neutral_face:

Maybe @jannis ?

Thanks :blush:

I am not entirely sure what you’re asking, sorry. Are the custom messages not working somewhere? That might be due to the CSS classes being the same for the CTAs.

A live link would really help debug these kind of things.

Yes sorry @jannis :slightly_smiling_face:

I mean, I have for example this article who is reserved to registered members but the translated message says it is reserved only for paid-members.

I have no distinction anymore between registered and paid-members :slightly_smiling_face:

Try this :

document.querySelectorAll('.gh-button').forEach(item => item.textContent = 'Abonnez-vous')

Not very subtle, but it should work.

1 Like

Ok thanks but at which place in code injection do I have to paste the code exactly?

Anywhere in site footer, as long as it’s within <script></script>.

It doesn’t work :expressionless:

So I have all this code in the footer ;

<script>
    document.querySelector('[data-portal="signup"]').innerText = "Inscription"
    document.querySelector('[data-portal="signin"]').innerText = "Connexion"
    document.querySelectorAll('.gh-button').forEach(item => item.textContent = 'Abonnez-vous')
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const h2Element = document.querySelector('.gh-post-upgrade-cta-content h2');
    const buttonElement = document.querySelector('.gh-post-upgrade-cta-content .gh-btn');
    const smallTextElement = document.querySelector('.gh-post-upgrade-cta-content small');
  document.querySelectorAll('.gh-button').forEach(item => item.textContent = 'Abonnez-vous')

    if (h2Element) {
        h2Element.textContent = 'Article réservé aux membres premium';
    }

    if (buttonElement) {
        buttonElement.textContent = 'Je deviens premium pour 5€';
    }
  
    if (smallTextElement) {
        // Construct the relative URL dynamically
        const signInUrl = window.location.href + '#/portal/signin';
        smallTextElement.innerHTML = 'Vous avez déjà un compte? <a href="' + signInUrl + '" class="gh-portal-close">Connectez-vous</a>';
    }
});
</script>

Try reloading the page or clearing your cache. In my browser, your site clearly displays a subscribe button in French. Also, you don’t have to duplicate the line of code in the site footer.

Oh yes, it works, sorry and thank you very much!

I thought it was a code for my other message, this one :

I have for example this article who is reserved to registered members but the translated message says it is reserved only for paid-members.

I have no distinction anymore between registered and paid-members :slightly_smiling_face:

You don’t have a tip for that one too, by any chance? :grin: