Grey NEXT button isn't working on checkout

[mcwatson1974]

Hi, 

I have had clients reporting this evening that they cannot check out purchases on my site and on looking, it seems the grey NEXT button after filling in their details is showing only as a narrow box and only when you hover over it does it show NEXT but people don't know to do that. I see that it's been reported by others but you couldn't see what's wrong. 

See screen shot below. This is the same whether using laptop or desktop. It's on my Blueboyfurniture.co.uk site. 

Please can you assist asap?

[Adam7]

Hi @mcwatson1974. 

If you temporarily switch to a standard theme, does that fix the display of the button for you?

[mcwatson1974]

Hi @Adam,

Thanks for the suggestion. Just tried choosing an alternative theme and then returning to the theme I was using and its still the same. See below. My theme is only a custom one because I once had code to note show a price but that has since been removed. I don't know what theme I chose when I first set up my site to choose a non custom theme. I've seen other people reporting this problem too so maybe they are using the same theme as me if the theme is the problem.

[mcwatson1974]

@Adam 

PS. this has only been a problem in recent days, it used to show correctly ever since I set the site up which has been for several months at least.

[Adam7]

While using the other theme did it display okay?

[mcwatson1974]

Hi @Adam 

When I tried changing the theme, I changed it to another theme, then changed it back and tried it and the NEXT button wasn't working still. But when I changed it to an alternative theme and published it and tried it, the NEXT button was working.

So I've had to settle on an alternative theme for the problem to be resolved. Great that it's working but frustrating that things just randomly stop working for no reason and compromises the working of a website that has been running fine.

Thanks for your assistance though.

[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 a post by @LetsGoSwimming , saying they used the Chrome debugger to check where the problem was and that it could be caused by a "float:none" attribute in weebly's checkout code.

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.