Storefront Elegance Theme, Checkout Page, billing and shipping not aligned

Why are my Shipping and Billing checkout areas not aligned?

A short simple post today about a very specific problem. This is for users of the Storefront Themes Elegance Theme version 1.4.5 and later.

See the images

This is not a bug. The checkout page is designed to be a full width page. If you have a sidebar the shipping address can not fit next to billing address and is pushed below. To make checkout full width go to Pages. Open Checkout page and set Template to Full Width. While you are there make sure Parent is your Products page. Update. Your page should now be neat with Shipping Address on the right alongside the Billing Address.

But I need my sidebar!

OK OK, just a little CSS will fix that for you. This will align the Shipping Address area beneath billing on the left.

.sft-gridview-price {
.wpsc_checkout_forms table.wpsc_checkout_table {
    float: left;

Short and sweet.

Custom CSS:

This code belongs in your Custom CSS file. Don’t have a custom.css? There is an empty one for you to use in the theme folder? You can edit custom.css by going to Appearance/Editor and choosing custom.css from the list of files.
You can also just paste this code in the “Custom CSS” box in the Storefront options panel on the Style tab if you will not be making many changes.


You may also edit custom.css outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac,
Notepad++ for the PC

1 Comment

  1. Line Marketing
    July 11, 2013

    Hi Gasolicious-team!
    You just made my day! Your blog post just saved me hours of searching. I tried to fix that checkout problem for a while now! THANK YOU SO MUCH!

    Greetings from Germany


Leave a Reply