Paypal buttons not displaying correctly

[LetsGoSwimming]

I just inherited a site, and for some reason, the "next" button on the paypal checkout screen isn't displaying corretly (this is the button that takes the user over to paypal to finish the transaction). Right now the button just looks like a jumbled mess of blue button pieces with no text (i have screenshots, but I haven't figured out how to paste them into this rich text editer...hmpf)

When I use the chrome debugger, it looks like the culprit is the following class/attribute. 

.wsite-button-inner{float:none} 

When I disable this attribute in the debugger, the button shows up just fine. The problem is, this style is generated by a stylesheet located here:

https://cdn2.editmysite.com/css/checkout-weebly/checkout-light.css

This appears to be some automatically generated css file by weebly for the checkout screen. I also can't seem to edit the checkout page, as this is also created automatically by square / weebly. Has *anyone* else seen this? And is there any way to get the button to work?

[Bernadette3]

Hi @LetsGoSwimming Thanks for posting. It looks like a couple things could be going on here. The theme itself is an older theme, and may need to be updated in order to work properly. I also see that the theme has been customized, and custom code can also cause a conflict. I just can't tell if it's the custom code, the older theme (or both) causing the issue. 

I also noticed that the site is on a Connect hosting plan which does not allow you to use Paypal. The account is pretty old so it's possible it's grandfathered to still allow certain features to be used. Either way, I don't think this would cause the button to break. 

The best course of action would be to first update the site to a newer, responsive theme to see if that resolves the button issue. If you are still having a problem, it's possible the site would need to be upgraded to a compatible plan in order to use Paypal at checkout. 

[nouara]

We had exactly the same problem. Contacted Weebly, and they said it was because we had some custom coding on our site, hence we were no longer using a native theme. No help really to us, so I kept googling and came across your post @LetsGoSwimming , saying you used the Chrome debugger to check where the problem was and that it could be caused by the "float:none" attribute in the coding.

So I went to work, debugging until I the button rendered properly, then adding the appropriate float attribute in the main_style.css (can be found under 'Theme - Edit HTML/CSS' - ASSETS - main_style.css'). The red line is what you need to add to that particular element to make the button show up again. I also added a little more padding (see orange). 

.wsite-button .wsite-button-inner,
.wsite-editor .wsite-button .wsite-button-inner {
height: 20px;
padding: 8px 20px;
float: left;
background: #333333;
color: #ffffff;
border: 2px solid #333333;
border-radius: 1px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: normal;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: normal;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;

}

We use the Cento theme, and the next button works perfectly again now. If you use a different theme, the above element might look slightly different in your css style sheet. Hope it works for you too.