Loading Profile...
'Bill & Ship to This Address' button doesn't look like a button.
During checkout when creating a new account or adding information as a guest under the billing information the 'Bill & Ship to This Address' button doesn't look like a button. It took me a while to figure out that I needed to click this to move forward (see red circle in attachment).
I’m frustrated
24
people have this problem
I have this problem, too!
Tell me when someone solves it.
The more people who report this problem, the more it gets noticed.
The more people who report this problem, the more it gets noticed.
The company marked this problem solved.
The best solutions from the company
-
Just a heads up - the update that fixes the "Bill & Ship To This Address" button is rolling out on BigCommerce stores.
If you have template customizations made to the "ExpressCheckoutChooseAddress.html" snippet, please follow the instructions posted by Mitch earlier in this discussion.
The company says
this solves the problem
-
OK we've FINALLY figured out how to replicate this.
1. Be running Windows with the "Windows Classic" or "Standard" theme
2. Use FireFox
3. Check out
We were testing on Windows with IE and FF but with a non-standard color scheme or with IE on a standard color scheme where the bug can't be reproduced.
We will push this fix out to all stores running version 6 by COB today but if you want to fix it manually, follow these steps:
1. Go to Store Design -> Design Mode and click the button
2. Your store will load in design mode
3. Right click anywhere and choose "Edit Layout" - the QuickEdit window will appear
4. In the left column, find the snippet called ExpressCheckoutChooseAddress.html and click on it
5. Look for the following code in the HTML for the snippet:
Important: make sure you find the BUTTON, not the checkbox.
6. Remove the checked="checked" attribute and click the "Save" button
7. The appearance of the button being "pressed in" will now be gone
Again, this will be pushed to all stores on version 6 by close of business today.
The company says
this solves the problem
-
Inappropriate?This issue was "fixed" but now it is back! Can it please be fixed permanently?!?!? -
Inappropriate?Major problem actually!
I get so many calls from confused customers about this button. It should be changed or at least we need to have control of that part of the code to be able to change it ourselves if we want.
I'm sure we are losing sales over this as some customers just leave the site frustrated and only few call and ask about it.
This is especially a problem with older customers (and by that I mean over 35) who did not grow up using computers all the time and buying stuff online all their life.
Please please fix this or give us access to the code.
I’m frustrated
-
Inappropriate?You actually do have access to the code for that button. Are you just wanting to change the text of the button or are you wanting something more significant? The buttons appear great on his site for me in all of my browsers, but some very old browsers (such as pre-IE6) don't display buttons very well.
If it's just the text, you can edit the file called checkout_express.html and find this line:
lang.BillAndShipToAddress = "%%LNG_BillAndShipToAddress%%";
and replace the %%LNG_BillAndShipToAddress%% variable with your own text.
One more step is needed. You'll have to find the div with a class of Clear ExpressCheckoutBlock and right above it add the following:
script language="javascript"
$('.billingButton').val(lang.BillAndShipToAddress);
/script
You'll have to add in the greater than and less than signs in the right spot since I can't embed the code....6 Comments Add a comment
This solves the problem
-
There are about 6 divs with the class Clear ExpressCheckoutBlock can you be more specific? is it the first one after the change? any better description?
Thanks -
Sorry about that, the class should actually be "Clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassShippingAddress%%". The code needs to go right above it and you need to add a less than symbol in front of the 1st and third lines and a greater than symbol at the end of the 1st and 3rd lines.
-
Thanks Josh. But this only solves part of the problem with that button text.
When a costumer unticks the "I also want to ship to this address" box, then text reverts to other LNGs.
If anyone wants to change those, I have achieved this by modifying Snippet/ExpressCheckoutAddress.html. See the JS at the very end. In my case I prefer "Continue".
[...]
if(this.checked) {
$('.billingButton').val('Continue');
$('.shippingButton').val('Continue');
}
else {
$('.billingButton').val('Continue');
$('.shippingButton').val('Continue');
Josh is there a more elegant way of doing this? -
That's really doing the same thing as editing the checkout_express file at the top of the page and changing the lang references.
Your method is 4 lines versus just the 1 line change in checkout_express.html if you replace the variable with your own text.
Either way works.... -
OK.
But would I have to add more JS to checkout_express if I changed all buttons on it (ie, similar to what you recommended for the first button we talked about)? -
Josh,
Thanks for this info. The change worked just fine. -
Inappropriate?What if I want to have my own gif or jpg button instead? Any chance you could tell me what I need to do?
-
Inappropriate?Erez, did you get this to work?
I made the changes suggested by Joshua but the text in button did not change.
I also made several attempts placing the additional JS instruction before the DIVs with class=ClearExpressCheckoutBlock but this just messed up my checkout page.
Any ideas?
I’m amused
-
Inappropriate?I forgot about this while testing the store. Using IE8 (not an old browser) it is just not obvious enough. You shopping cart has to work for your least common denominator (even if that is me in this case :~)
The outline needs to be bolder/font larger or both.
-
Inappropriate?That's a horrible looking button and can be very confusing for customers checking out.
A smooth checkout is a top priority! -
Inappropriate?I agree, the first time I tested my shop as if I was a customer I actually got stuck in the checkout wondering why nothing was happening, and i'm not old or confused and am ecommerce savvy. I just did not realise the bill&ship to button needed clicking. It needs changing to be much more obvious what the customer has to do. i.e press the button! Please Please change it. -
Inappropriate?any idea if this very importatnt issue is addressed in version 6.0?
if not, this should be fixed - checkout is the most important part of the shopping experience
at the very least, please change the button text to simply say "Continue" -
Inappropriate?Hey guys,
We fixed this issue on our checkout page with some continue buttons, you can have a look: http://www.maplesyrupworld.com/. Simple and clear. -
Inappropriate?wow, that's one of the best looking bigcommerce stores i've seen so far!
you should sell this template to bigcommerce... :)
and your checkout "continue" buttons look great! i think it makes the checkout clear for the customer, much better than the current setup, which is very confusing. you seem to have a great eye for function and design
was it fairly easy to implement? -
-
Inappropriate?Thx for the great comments guys. We only applied a class with an image background to each buttons in the express checkout. You can sneak a peak if you use firebug on our CSS styles.
We based the design on the built-in CognacShop template and changed the layout, etc. I was the "artistic director" and used an extra web designer to fulfill where my web skills were not up to the task!
Feel free to me any questions, i`ll try to be helpful!
I’m happy
-
Inappropriate?who is your designer? can you shoot him my way I need some good design done, plus I still dont understand how to change the text on the button..
-
Inappropriate?Hi all. Which browser are you using? We just tested on IE 6/7/8, FireFox, Chrome and Safari and can't replicate the issue. If you can let me know we'll either address it and get it fixed or mark the issue as resolved.7 Comments Add a comment
This solves the problem
-
Firefox 3.6.8. Can't you just change the button to look more normal and make it say "Continue". Not all of us are good at changing lots of code.
-
This same button does have a problem when you unclick the "yes, ship to this address too" box, and then reclick the same box. Some goofy text shows up where the ampersand thing was. (Multi Page is what I am using)
-
Appears that version 6 unfortunately has the same confusing button that appears exactly as a grayed-out text field in Firefox (using v. 3.5.11)....it is counter-intuitive, doesn't resemble a button at all and there's no question this causes lost orders daily as the check-out process is halted in its tracks; I've never had to click what appears to be an un-editable text field when checking out of an online store. There should be a variety of available brightly colored buttons in place of this, all of which simply have the word 'continue'....why should we have to change code for something that should so obviously be fixed and would benefit everyone?
-
We are able and willing to fix this, but simply can't replicate it. If anyone can list the specific steps, browser and operating system used to reproduce the "ugly" button we'll get it fixed in a jiffy and pushed to v6 stores within a few hours.
-
Mitch it really doesn't matter what browser you use, the button is hopeless. The first time I did a test checkout I got stuck because of this button and so do my customers. Ugly or not it says" bill and ship to this address" and that is just plain wrong. It needs to say "Continue" instead or "click to confirm" or something that makes you see it and click it to confirm your addess. It's just not logical at the moment. If i cant checkout in my own store first time neither can my other first time customers. It's just a button that needs to be reworded without us having to resort to fiddling in the code ourselves when we don't all know how to do it.
-
Yep. The wording is just wrong. But if you really want to make us happy let us use our own gif or jpg button there or choose from a set of options.
-
If you are going to make changes, the location of the button should be changed. For example, if a store is using express checkout by the time the customer gets to the last step the button is off the page and you need to scroll down to see it. It sounds simple but I had a lot of customers get "stuck" here so I switched my store to the multi-page checkout.
-
Inappropriate?Hi Josh, I followed your exact steps but I still can't change the text for this button. Has something changed since you posted your comments? How do I change the text of this horrible button?
I’m frustrated
-
Inappropriate?If you are using Multi Page Checkout, it is in the CheckoutNewAddressForm Panel (all of the items listed above)
-
Inappropriate?I was using express checkout and had the buttons changed to read "Continue". I am now using Multi Page Checkout and can't figure out how to change the button text. Any help would be appreciated.
I’m frustrated
-
Inappropriate?For Multi Page Checkout:
No promises that this will work or won't break in V6
In the CheckoutNewAddressForm Panel
Change:
%%GLOBAL_ShipAddressButtonText%% (in two places)
to
%%LNG_Continue%% (in two places)
and change:
%%LNG_BillToThisAddress%%
to
%%LNG_Continue%% -
Inappropriate?I used firebug to look at that maple syrup guy's webpage and made similar changes. Check out my "Continue" buttons www.slumbermaax.com
-
Inappropriate?It looks like there are some changes to V6. I found one occurrence of %%GLOBAL_ShipAddressButtonText%% and this %%GLOBAL_ShipAddressuttonText_JS%% which is similar but not the same.
And this %%LNG_JS_BillToThisAddress%%
Any ideas? -
-
Inappropriate?Hey your button is great. There you go Mitch, Thats the sort of button we need. It says "CONTINUE"
-
Inappropriate?OK we've FINALLY figured out how to replicate this.
1. Be running Windows with the "Windows Classic" or "Standard" theme
2. Use FireFox
3. Check out
We were testing on Windows with IE and FF but with a non-standard color scheme or with IE on a standard color scheme where the bug can't be reproduced.
We will push this fix out to all stores running version 6 by COB today but if you want to fix it manually, follow these steps:
1. Go to Store Design -> Design Mode and click the button
2. Your store will load in design mode
3. Right click anywhere and choose "Edit Layout" - the QuickEdit window will appear
4. In the left column, find the snippet called ExpressCheckoutChooseAddress.html and click on it
5. Look for the following code in the HTML for the snippet:
Important: make sure you find the BUTTON, not the checkbox.
6. Remove the checked="checked" attribute and click the "Save" button
7. The appearance of the button being "pressed in" will now be gone
Again, this will be pushed to all stores on version 6 by close of business today.
The company says
this solves the problem
2 Comments Add a comment
This solves the problem
-
I am assuming that the multipage checkout will be checked for the same/similar issue and a fix applied there as well?
-
Of course.
-
Inappropriate?Just a heads up - the update that fixes the "Bill & Ship To This Address" button is rolling out on BigCommerce stores.
If you have template customizations made to the "ExpressCheckoutChooseAddress.html" snippet, please follow the instructions posted by Mitch earlier in this discussion.
The company says
this solves the problem
EMPLOYEE
EMPLOYEE
EMPLOYEE
