The Challenge

The question got asked whether it was possible to make [bb] Pricing Table buttons links open in a new browser window.

If we look at the default code it looks like this:

<a class="fl-button" href="/hello-world/" target="_self">
<span class="fl-button-text">Get Started</span>

As you can see, by default the button is set to open in in same window thanks to the attribute target="_self". We need to change that to target="_blank" and the module does not give us that option unfortunately.

Pricing Button Form

The jQuery

To change the target attribute, we are going to use the power of jQuery. In this example, I am going to assume you are all using the Beaver Builder Theme so if you arent, then please consult your theme's documentation on how to add Javascript to your site.

Ok, if you have followed any of my other tutorials before then this should be pretty straight forward.

Jump into the theme's customizer and open up the Code > Javascript panel.

First I will give you the code to add, then we will run through what it is all doing, but dont panic, its only a few lines.

So go ahead and paste this in there:

jQuery(document).ready(function() {
jQuery(".fl-pricing-table a").attr('target','_blank');

So what is this code doing? The first line tells the browser to execute the code once the document is ready. easy.

The second line is the fun part, it is searching the entire website for anything with the class fl-pricing-table and then targeting all links (<a>) within that classes container.

Once it finds any links, it then changes or adds any target attributes to _blank so it opens in a new page.

Have a look at the screenshots below, the first one is the html without the jQuery, and the second is after we added the jQuery.

Before jQuery
After jQuery

Perfect, as you can see the button has changed exactly as we hoped, so every pricing table on the site will now open in a new tab...

What about Local Links?

Button Short URL

So all buttons are opening up in a new window, but what if we want external links to open in a new window, and local links to stay in the same window?

It is actually really easy if we change our jQuery to the following:

jQuery(document).ready(function() {
  jQuery(".fl-pricing-table a[href^='http']").attr('target','_blank');

We know what most of the code is from our previous script, so what is the addition of [href^='http'] doing?

Once the jQuery has found all links in the pricing table, it is then checking to see if that link is prefixed with http. If it is it changes the target attribute, but if it isnt, then it will leave it alone.

So if you use the select button to select a page or post on your site, then you would get something like this As you can see it has the prefix of http and would therefore open in a new tab. If you were to delete the leading domain details so it looked like this /my-post/ then it would not contain the http and therefore will open in the same page. Pretty clever right?

So lets have a look at the two screenshots below, the first contains the entire url, and the second has the domain removed.

Full URL
Short URL

Leave a comment