This topic has 13 replies, 3 voices, and was last updated 9 years, 6 months ago ago by Eva Kemp
Hi,
My checkout page appears to be different to the Blanco demo which looks nicer than mine. How do I make mine look like the demo?
(1) My Billing and Shipping headings are prefixed with a number, the demo doesn’t have that.
(2) My Billing section fields are not underlined, the demo one is. This is odd because my Shipping section is correctly underlined.
(3) My input fields in the Billing and Shipping sections are shorter than the demo and spaced further away from the field titles. Also, for some reason the distance is different between my Billing and Shipping sections.
I also quickly test the checkout appearance on a new staging site (no custom CSS applied) and it appears the same as my main staging site i.e. different to the demo.
You can view the checkout page as per the private content details.
Thanks, Mike.
Hello,
Please provide us with wp-admin access in Private Content.
Regards,
Robert Hall.
Hi Robert,
The details are now in the private content section.
Thanks,
Mike
Hi Robert,
I’ve found how to remove the number prefixes – that was a WPEC name I could change in the store settings.
There appears to be another issue with the checkout page. When I select ‘Same as billing address’ in the shipping details section the billing data is not carried across. On your demo when ‘Same as billing address’ is selected a background task (ajax/js?) runs but that doesn’t happen on mine.
Can this be looked at under this topic or would you prefer I create a new one?
Regards,
Mike.
Hello,
Could you please show a screenshot what issue you have on Checkout page?
Thank you.
Regards,
Eva Kemp.
Hi Eva,
A screen shot of the billing/shipping section of the checkout page can be found here..
http://wpbugs.com/wp-content/uploads/2015/05/Checkout-Page-Different-To-Demo.png
As can be seen it’s quite different to the Blanco demo checkout page.
Regards,
Mike.
Hello,
Did you mean this Checkout page:
https://s3.amazonaws.com/fvd-data/notes/168674/1432633952-fQlpeF/screen.png that your site differs from?
If so then your Checkout page is shown correctly, because the one on the screenshot is created with Woocommerce plugin, but you use WP E-Commerce plugin.
If we are wrong please clarify your issue with more details.
Thank you.
Regards,
Eva Kemp.
Hi Eva,
I’m comparing my checkout page with the WPEC demo checkout page.
If you go to https://www.8theme.com/demo/blanco-wp/?page_id=20070 and put a product in the cart then checkout it will take you to https://www.8theme.com/demo/blanco-wp/?page_id=20072 – on the second part/page of that where the addresses etc are entered its nicely formatted. That differs from my checkout page as noted in points (2) and (3) when I open this topic.
Regards,
Mike.
Hi Eva,
I don’t know much about CSS but had a play around with firebug and the following seems to work.
(1) The billing details table is missing its bottom border and this restores it.
.wpsc_checkout_table.table-1 td { border-bottom: 1px solid #efefef; }
(2) The input fields of the billing and shipping tables are not aligned, the shipping table input fields sit further to the right. This seems to be because shipping table field names are in a container (tr/td???) that’s wider than for the billing field names. I don’t know why (and I suspect its not the right way to do it) but this resolves that problem.
.wpsc_checkout_table.table-2 td { width: 1px; }
(3) Widen the input fields of both tables to be more like the demo.
.wpsc_checkout_table.table-2 textarea, .wpsc_checkout_table.table-2 input[type="text"], .wpsc_checkout_table.table-1 textarea, .wpsc_checkout_table.table-1 input[type="text"] {
width: 250px !important;
}
With this CSS applied checkout form now appears normal in that it closely matches the Blanco demo checkout form.
However, I’ve left the CSS un-applied as I’d like to get the correct CSS from someone who knows what they are doing (ie. you).
Regards,
Mike.
Hi Eva,
Have you had a chance to re-look at this topic?
As I noted in my last update above my CSS looks like it works but I’m concerned it’s not the best/appropriate way to do the CSS – especially point (2).
It’s also weird that the billing part of the checkout form doesn’t match the shipping part to start with.
Thanks,
Mike.
Hello,
Sorry for a delay.
Your css code works correctly so you can use it in your site.
Are you experiencing any issues with that code?
Regards,
Eva Kemp.
Hi Eva,
The code is working fine but I’m not a CSS person so didn’t know if I’d done it the right/acceptable way.
I’ve put the code live so you can go ahead and close this topic.
Thanks,
Mike.
Hello,
If there are any questions you can always create a new topic.
Regards,
Eva Kemp.
The issue related to '‘Checkout Page Different to Demo’' has been successfully resolved, and the topic is now closed for further responses