WordPress Smart PayPal buttons does not show

[redsand]

Please help! I am using Wordpress, Ocean WP theme, with Elementor. I tried to add the PayPal smart buttons as HTML. Problem is that the buttons do not show. I also have WPRocket installed.

[10d · Accepted solution]

PAYPAL & ELEMENTOR plug-in [WORDPRESS]

I have used PayPal on my old website for years so I’m familiar with how it works and it’s many options.

When I switched to WordPress to “reinvent” my website I found that there were a number of PayPal Plug-ins from various sources. Although most were fairly easy to use, I also found that all of them were extremely limited compared to what PayPal itself offers. After a bit of trial and error I was able to find a way to “import” the PayPal “button” codes for various items I sell without any problems.

I have no idea if this same process will work if you are working directly in WordPress without the Elementor Plugin!!].

Following the directions below EXACTLY will allow you to use the PayPal HTML script [“button” codes] without any problems:

1. Go to PayPal.com, compose and save your “buttons” following their instructions. You can then select the specific button you want into your WP page using the Elementor Plug-In.
2. Go to www.yourwebsite.com/wp-admin to open up your website to work on it. [I used InMotionHosting’s [my webhost – fantastic] cPanel to create my website using their WordPress,] or go to your website work in progress.
3. Go to the page you want to work on. I would advise creating the page content first [text, images, etc] first as it will set up the design “parameters” for your page using the “structures” available [with the number of columns you desire: 1-6] in WordPress & using Elementor.
4. Click on “Add New Structure” on right part of page.
5. Insert additional empty “structures” onto your page as needed for PayPal buttons.
   1. IMPORTANT: You can place ONLY 1 PayPal “button” in each “column”. ABSOLUTELY NO EXCEPTIONS!! You CANNOT put a “buy now” and “view cart” button in the same column
6. Select the “structure” you want to work on and, if the structure has more than one “column”, select the column you want to insert the PayPal button into.
7. Go to the “Elements” part of your screen [left side].
8. Place your cursor on the “text editor” widget and move it to the column you are working on.
9. Go back to the “Text Editor” [left side of screen] & go down to where the text is. Highlight ALL of the text [ctrl-A] and delete it. This will leave you with an empty column.
10. In the Text Editor move from the “visual” tab to the “text” tab [below “Add Form”].
11. Place the cursor in the blank part of the Text Editor and click it there.
12. Go to your PayPal buttons in PayPal, select one item you have created and saved in PayPal to create a button [buy now, add to cart, subscribe, view cart, etc.] and select “view code”.
13. Once code is visible select “Select code”.
14. Once the code is highlighted copy it [ctrl-C] and paste it [ctrl-V] into the appropriate column on your WordPress page.

ADDITIONAL NOTES: next page

ADDITIONAL NOTES

1. Do NOT!!! make any changes to the structure of the column content [other than moving left or right borders of each column].
   1. This means NO CHANGES to fonts, color of text [except in “B” below], spacing, copy/paste, etc., ad infinitum agnosium, as it may change the PayPal button structure [HTML code] & make the PayPal button useless.
   2. If you make any changes it’s more time efficient to delete everything from the column, go back to PayPal, recopy the button HTML code and repaste it into the WordPress column.
2. Some PayPal button will allow you to add written descriptions into the HTML code as you make up the button. If you want the color of the text to be something other than standard black:
   1. Highlight the original text that appeared in the column when you moved the “text editor” widget to the column.
   2. Go to the text editor icons on the left side of the screen and go to the icon that deals with the text color, choosing the color you wish.
   3. Make sure the text is the color you selected.
   4. Select all the text and erase/delete it from the column.
   5. When you paste your PayPal button in the column the text will appear in the color you selected.
   6. If you attempt to make ANY changes you are probably doomed to a “learning experience”. 😊
   7. This is the only allowable variable I’ve found thus far.

GOOD LUCK!! [My apologies for all the detail.]

[redsand]

Thank you!

[petesmithies]

I followed your instructions, but they dont work.

I am trying to place a smart button for people to enter and pay an amount 

I can create the smart button without issue

When I paste the code - using your method or the elementor html widget, on the page in elementor - I dont see the buttons

Only the name and amount

The paypal and credit/debit card buttons do not show.

Do you have any more suggestions?

Regards

Pete

[Maederweb]

Hi Pete. After fussing around with PayPal Code I found the Checkout for PayPal Plugin which solves the issue very easily.

[petesmithies]

Hi again,

The solution for me was 

At the end of the code pasted into the HTML widget, locate the following: initPayPalButton();
and then replace it with
setTimeout(() => initPayPalButton(), 2000);
This seems to resolve the issue.

Regards
Pete

[KelleyP]

I've tried all the solutions provided and nothing works 😢

[MTFR876]

Thank you. Your advice worked on my same issue. The buttons now appear. EXCEPT that the second black "Pay with Debit or Credit Card" button (which displays correctly in Elementor) appears as a yellow "Pay in 4" button on the live site instead. I don't understand this.

[Nishimachi]

Hi Pete

I tried your solution and it didn't work. I'll search and try something else 🙂 

[cindyanne]

I'm having the same problem. But, I see the buttons when I go to preview. After updating the page, I no longer see the buttons, just the box with the text telling what I'm selling. I tried replacing the code as suggested here... same issue.