TTG Tips and Tricks

In the Cart settings you have two options for the PayPal button: Image and Text. If you choose Image, this is the PayPal button that will be used:

But what if you want something different, like this?

Well it’s pretty easy to change  out the PayPal button with just a little bit of jQuery code. But first, you’ll need to enable phplugins for the page template that you’ve assigned to the cart in Cart > Settings under Personalisation > Cart Template. Visit the TTG documentation for information on using phplugins.

The PayPal button used in Backlight is set to 36px in height, so you need to pick out a PayPal button that’s close to being that tall. All of them but the smallest should work. Take a look at this page for your choices. Click “Get Code” for the one you want.

What we’ll be doing is using jQuery to replace the html code that calls the button. I’ll provide the code below, you’ll just need to copy in the web address for the button you choose.
The code you get from Paypal will look like this:

<img src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/PP_logo_h_150x38.png" alt="PayPal" />

You just need the the part that starts with https and ends with .png.

Here is the code to add to your phplugin file:

function scripts(){
echo '
<script> 
$( "#cart-buttons form input" ).replaceWith( \'<input type="image" name="submit" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/cc-badges-ppmcvdam.png" alt="Pay with PayPal, PayPal Credit or any major credit card" border="0" align="top" width="260" height="36" title ="Check out with PayPal">\' );
</script>
;'
}

if you already are using the scripts hook, just add this to the existing code.

<script> 
 $( "#cart-buttons form input" ).replaceWith( \'<input type="image" name="submit" src="https://www.paypalobjects.com/webstatic/en_US/i/buttons/cc-badges-ppmcvdam.png" alt="Pay with PayPal, PayPal Credit or any major credit card" border="0" align="top" width="260" height="36" title ="Check out with PayPal">\' );
 </script>

In place of the PayPal button address that’s currently there (everything starting with https:// and ending with .png), paste in the code for the one you’re using. (The backslashes that you see are “escape” characters so that the code will use them literally rather than interpret them as jQuery code).

To better control the appearance, I’ve added width and height attributes. The height attribute should stay at 36 but you may need to experiment with the width attribute.

Thanks to Daniel Leu for his coding suggestion in the comments below. I’ve edited this post to incorporate it. Be sure to visit the site linked in his name for more TTG fun.