New Window for Call to Action Button

Hi, is there a way to have the call to action buttons open a new window for the page they link to?

Hello there,

Thank you for getting in touch.

I thought it’s possible to be achieved by adding custom jQuery code. We would use the .attr() method.

Could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go to Settings > Header and Footer Scripts panel
  3. Paste the following code into the “Scripts in footer:”
<script>
jQuery(function($) {

  // Add target attribute to the CTA button 
  $('.header-button').attr('target', '_blank');

});
</script>
  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Hi,

Thanks very much for the quick reply. That seemed to work, but I should have specified that I only want one button (the right one) to open to a new page since it’s a link to another site, but the left button should simply link to a page on the site without opening in a new window.

Is there a control you can add so that you can tell each button to open in a new window or not?

Thank you!

John

Dear John,

Try to use the :last-child selector for the right button.

<script>
jQuery(function($) {

  // Add target attribute to the CTA button 
  $('.header-button:last-child').attr('target', '_blank');

});
</script>

For the left one, use the :first-child.

Warmest regards,
Kharis

It works! Thanks very much! Love the theme, btw.

Hello there

Would this work in the Sydney Theme as well?

And I also only have one button out of several on the frontpage. How can I make sure it is only that certain one… Not sure I understand the first and last child unless there are only two buttons?!

My website is

www.boesenfoto.dk

and it is the WEBSHOP button/CTA that needs to be opened in another window

Thanks for your time!

Michael

Dear Michael,

Thank you for asking. To make the code works on another button, you should need to adjust the element selector.

The following code is for this button.

<script>
jQuery(function($) {

  $('#pgc-w569bf0e1ba35e-1-0 .roll-button').attr('target', '_blank');

});
</script>

To know the certain element selector, use the browser’s inspector. See this screencast https://cloudup.com/cWTm4Mz3UT4.

I hope this reply helps.

Regards,
Kharis

SORRY FORGET THIS MAIL… WORKS!!! … guess the site needed to update! THANKS SO MUCH

Dear Kharis

Thank you so much for the reply. Haven’t seen it until now cause no notification.

I tried to do what you said, but doesn’t seem to work.

I installed the Header/Footer script plugin and added your code/script…

I also changed the script to the CTA buttom I need it for… the “WEBSHOP” at the buttom of the page.

Can you see if I did something wrong?!

Thanks for your time!

Michael

Dear Michael,

The jQuery code you inserted works fine here. Please try to clear your browser’s cache.

Let me know how it goes.

Regards,
Kharis

Hi I working on pricing tables, west pro and I want make them open in new window. I would like to know what code I should to use and where put that code? somebody can help?

Best regards,
Mario

Hello there,

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){

  $('.pricing-table .button').attr('target', '_blank');

})(jQuery);

  1. Update

Regards,
Kharis