How To Add A Custom PayPal Button To Your Site

Do you have a product or service ready to put on your site, but that standard PayPal button is just not rockin’ your boat?

I have a simple solution for you today – a step by step tutorial for adding a fab custom button to your site for people to click and buy from you!!!!

How To Add A Custom PayPal Button To Your Siteblog

Step 1 – Create your button – here are a few sites you can use to create your custom PayPal button:

I like cooltext.com the best – I find it easy to use and it has a ton of options as well. The site itself looks a bit dated, but hey, it works!  And don’t drive yourself crazy with which one to choose because as you go through the options you will find that you can adjust it to fit your needs.  For example, if you look at my PayPal buttons on my work with me page, I started out with the ‘super hero‘  button style. Yes, really!

Step 2 – Create and style all of the buttons you need for your site.  If you are going to offer an installment plan as well as a buy now (pay in full) plan – make both of our buttons now so you have them ready for the next step.

*Note – you need to make each button individually and download it before creating the next button.

Are you happy with your new custom buttons?  Yes? Then it’s time to download each button (psst – you need to have it ready to go for the next step.)

Step 3 – Upload your fab new buttons to your WordPress media library and grab a copy of the url.  At this point, open a text editor (notepad is fine for this), and paste each url link into the notepad document so you have them handy for PayPal – make sure you know which link goes with each specific button.

Step 4 – Now, head on over to your PayPal account and log in. Click on ‘Profile’ under the main nav menu at the top and then click on ‘My Selling Tools”.

Step 5 –  Update/edit your PayPal button, and fill in your details, price, (monthly payments if you are creating an installment plan).

Next, click on ‘customize your buttonand thenuse your own button image‘– this is where you will paste the url for your button from step 3 above.  If you have 2 separate buttons to create in PayPal – work on one button at a time:

paypal2

Step 6 – All set? Click on step 3 on the PayPal button page and insert the link where you want people to be redirected after payment – usually a welcome page with info on what they just purchased from you/instructions/etc .  If your customer cancels the checkout – you can specify where you want them redirected in this case as well.

paypal3

Step 7 – Once you save your edits to the button you will be taken to a page where you can copy the html – do this from the ‘website’ tab on the PayPal site page.

paypal4

Now, go to your sales page in WordPress and paste the html code into your page’s TEXT editor.

NOTE – make sure you are pasting it into place in the text editor and not the visual editor in WordPress.

Step 8 – So now you have your html code in place – save the page and take a look at your buttons and give yourself a round of applause!

FYI –  You may find that the buttons need some formatting –  if you try to add spacing/formatting to the button within the visual/text editor – it may mess up your buttons and the html code, so be careful if you try to add spacing/etc via the text and visual editor.

If you have used firebug before and know a bit about css and coding – you can format the placement of the buttons on your site using css (cascading style sheets).  The best way to do this is to put each button code into a ‘div’ so it can be targeted specifically with css styling:

<div class=”paypalbutton”>PASTE THE HTML CODE HERE FROM PAYPAL</div>

Then you can use firebug and test out margins, padding, etc to get the button placed where you want it – see example below:

.paypalbutton {
  float: left;
  margin-top: 25 px;
  padding-right: 15px;
  width:220px;
}

Did I just confuse you with all of that?

If so, feel free to contact me – you can schedule a free 15 minute chat and I will help you get your button into place.

Leave a comment below (and link to your site) to show off your sparkly new PayPal buttons you just made!

Talk to you soon!

4 replies
    • Amy
      Amy says:

      Jacqueline, once you get through it the first time, you will understand it better.
      I’d be happy to help you with it – feel free to set up a chat time or message me.

      Getting the PayPal buttons set up is pretty straightforward once you have your images ready to go – so you can definitely learn to do this.

      The part that takes more work is the css styling to get the button in place (if that is needed) – you never know your button may be where you want it!

      Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *