Change Button Link in Header for one specific page

Site URL: https://www.trademarktours.com/hmc

On our site we use the button in the header to send people to a booking page. For this one specific page on my site, I want that button to take them to a different booking page. Can I accomplish this with a header injection code? (So far I've only succeeded in adding an extra design-less button rather than changing the existing button) 

This was perfect, exactly what I was looking for! 

Would you be able to tell me how you got the collection # so I can attempt this on some other pages? 

You can use the chrorme exxtension: Squarespace ID Finder

Here is how to find the page id: http://recordit.co/qwnj09oNCa

Hope that it can help you

Amazing, you rock! Thanks very much for all your help

Hi @bangank36 I am trying to accomplish the same thing with the button in the navigation at https://www.museoutdoors.com/get-started - I would like to redirect it to a different page. I think the code is different given this page is on Brine. Could you advise? Thanks!

@ekspohz Try this adjusted code

<script>
 (function() {
    document.addEventListener('DOMContentLoaded',() => {
      document.querySelector('#collection-61d9dcf755b23e793054204b .Header-nav--secondary a').setAttribute('href','/home');
    })
  })()
</script>

17 hours ago, tuanphan said:

@ekspohz Try this adjusted code

<script>
 (function() {
    document.addEventListener('DOMContentLoaded',() => {
      document.querySelector('#collection-61d9dcf755b23e793054204b .Header-nav--secondary a').setAttribute('href','/home');
    })
  })()
</script>

 

Perfect! Thank you @tuanphan

Is there a way to change the text of the button as well as the href  link location?

On 3/1/2023 at 11:27 PM, nathan.j.p said:

Is there a way to change the text of the button as well as the href  link location?

Header button or? All pages or which page?

On 3/5/2023 at 6:00 PM, tuanphan said:

Header button or? All pages or which page?

The header button on each service page.

For example:
On service page 1 I want the header button to say "Book Service 1" and link to the next step in the booking process for that service.
On  service page 2 I want the header button to say "Book Service 2" and link to the next step in the booking process for that service.

So I just need to know how to target and change the header button text, and the header button href link location per page. 

I'm assuming I'll have to use some javascript in settings>advanced>code injection which I know how to do. I just don't know how to target the header button specifically.

Thank you @tuanphan

On 3/15/2023 at 3:24 AM, nathan.j.p said:

The header button on each service page.

For example:
On service page 1 I want the header button to say "Book Service 1" and link to the next step in the booking process for that service.
On  service page 2 I want the header button to say "Book Service 2" and link to the next step in the booking process for that service.

So I just need to know how to target and change the header button text, and the header button href link location per page. 

I'm assuming I'll have to use some javascript in settings>advanced>code injection which I know how to do. I just don't know how to target the header button specifically.

Thank you @tuanphan

Hi,

Yes. This is possible. Can you share link to a service page? We can check & give code easier

Sure, we just have basic service pages set up for now. You can go to Mothershipfitness.com. Thanks @tuanphan

On 3/18/2023 at 10:20 PM, nathan.j.p said:

Sure, we just have basic service pages set up for now. You can go to Mothershipfitness.com. Thanks @tuanphan

Add to Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("header#header a.btn").html(function() { 
          return $(this).html().replace("Start training for free", "new text");  
    });
$("header#header a.btn").attr('href','https://google.com');
});
</script>

2 hours ago, tuanphan said:

Add to Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $("header#header a.btn").html(function() { 
          return $(this).html().replace("Start training for free", "new text");  
    });
$("header#header a.btn").attr('href','https://google.com');
});
</script>

 

@tuanphan This is awesome! Works perfectly.

Can this be used to change the link of a button in the footer for a single page?

On 8/12/2023 at 11:43 PM, STC said:

Can this be used to change the link of a button in the footer for a single page?

Use this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("footer.sections .button-block a").attr('href','https://google.com');
});
</script>

If it doesn't work, please share link to your site

On 12/4/2021 at 3:03 AM, Beyondspace said:

Try adding to Home > Settings > Advanced > Code injection, footer

<script>
  (function() {
    document.addEventListener('DOMContentLoaded',() => {
      document.querySelector('#collection-619679f0e67cea457538c10c .header-actions--right .header-actions-action--cta a').setAttribute('href','/home');
    })
  })()
</script>

Change the '/home' with the slug/url you want to redirect

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

How can i change the text on the button?

Hi, thanks for this thread. I tried all of these options and am still stuck.

https://flamingo-tetra-m678.squarespace.com/potions#

I want to change the "Book" button text and URL depending on what page the person is on. So on this page it would say "Book Potions" but on another page it would say "Book Tea".  And then there would be default option that would show when I don't specify an alternative.

Pretty stuck here.

Thanks!

OK, update is that I got it working on Desktop, but the altered version of the button does not appear on mobile

https://flamingo-tetra-m678.squarespace.com/potions#

This is the code I injected into the footer to achieve this:

<script>
  (function() {
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.querySelector('#collection-668e344776855f0576b5a00d .header-actions--right .header-actions-action--cta a');
      
      if (button) {
        // Change the href attribute
        button.setAttribute('href', '#openPotionsModal');
        
        // Change the inner HTML
        button.innerHTML = 'Open Potions Modal';
        
        // Ensure the button is visible
        button.style.display = 'block';
      }
    });
  })();
</script>

Any Idea how I would adjust for mobile?

On 7/15/2024 at 6:47 PM, MattMan said:

OK, update is that I got it working on Desktop, but the altered version of the button does not appear on mobile

https://flamingo-tetra-m678.squarespace.com/potions#

This is the code I injected into the footer to achieve this:

 

<script>
  (function() {
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.querySelector('#collection-668e344776855f0576b5a00d .header-actions--right .header-actions-action--cta a');
      
      if (button) {
        // Change the href attribute
        button.setAttribute('href', '#openPotionsModal');
        
        // Change the inner HTML
        button.innerHTML = 'Open Potions Modal';
        
        // Ensure the button is visible
        button.style.display = 'block';
      }
    });
  })();
</script>

 

Any Idea how I would adjust for mobile?

You can change this ID

#collection-668e344776855f0576b5a00d .header-actions--right .header-actions-action--cta a

to this

#collection-668e344776855f0576b5a00d [class*="-cta"] a