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.