Return to previous page

Checkout Page Different to Demo - by Michael

This topic has 13 replies, 3 voices, and was last updated 8 years, 10 months ago ago by Eva Kemp

Michael

Participant

May 26, 2015 at 07:20

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.

Please, contact administrator
for this information.

#65967 Copied Theme version: 3.1

12 Answers

Robert Hall

Support staff

May 26, 2015 at 07:25

Hello,

Please provide us with wp-admin access in Private Content.

Regards,
Robert Hall.

#65969 Copied

Michael

Participant

May 26, 2015 at 08:00

Hi Robert,
The details are now in the private content section.
Thanks,
Mike

Please, contact administrator
for this information.

#65979 Copied

Michael

Participant

May 26, 2015 at 09:00

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.

#65992 Copied

Eva Kemp

Support staff

May 26, 2015 at 09:21

Hello,

Could you please show a screenshot what issue you have on Checkout page?

Thank you.
Regards,
Eva Kemp.

#65995 Copied

Michael

Participant

May 26, 2015 at 09:47

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.

#66010 Copied

Eva Kemp

Support staff

May 26, 2015 at 10:53

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.

#66019 Copied

Michael

Participant

May 26, 2015 at 11:06

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.

#66024 Copied
Michael

Participant

May 28, 2015 at 01:27
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.
#66481 Copied
Michael

Participant

June 3, 2015 at 09:55

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.

#67755 Copied

Eva Kemp

Support staff

June 3, 2015 at 12:23

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.

#67796 Copied

Michael

Participant

June 4, 2015 at 11:03

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.

#68049 Copied

Eva Kemp

Support staff

June 4, 2015 at 11:11

Hello,

If there are any questions you can always create a new topic.

Regards,
Eva Kemp.

#68055 Copied
Tagged: checkout, demo, different, page, themes, woocommerce, wordpress
Viewing 13 results - 1 through 13 (of 13 total)