[Support request] Check Out Page

[Philip]

For the Check out page, On one site the shipping/billing address are next to each other (left/right columns) with the order under the columns. It is a nice look and I would like to duplicate this on all my sites. On my second site the shipping/billing are in a left column and the order is in the right column. I have searched high and low trying to find a reason why the 2 sites for checkout are different. What do I need to change to have the shipping/billing next to each other and not on top.

Thanks

[Leo]

Hi there,

Are you able to link me to both side to compare?

Thanks!

[Philip]

http://www.e-incense.com/e/checkout/

http://www.powderedincense.com/e/checkout/ (still under construction) this is the look I want

[Leo]

I assume I need to add product first to see the issue you are referring?

I can’t find the product page of this site: http://www.powderedincense.com/e/cart/

[Philip]

On both sites you will have to enter at least one item. On either site do not click on the Payment button.

I can EMAIL you the login parameters if that will help…

[Leo]

Are you able to provide a screenshot of each website to show what you are seeing?
Just checked the two sites (added more than $10 of items) but don’t think I’m seeing any issues?

You can upload to a site like this: https://postimages.org/

You can also test out the default format here: http://demo.generatepress.com/

[Philip]

Leo,

I have uploaded the files to https://postimg.org/gallery/hb8otoeu/

If you need login info for the 2 sites just let me know and I will email to you to an email address of your choice.

Thanks
Phil

[Philip]

Leo,

I found what was causing the formatting difference between the 2 sites for the Checkout page. If I ACTIVATE the Woocommerce in the GP Premium 1.5.6 Customizer I get the format I do NOT like. Deactivate and I get the checkout format with the shipping/billing next to each other. Is this a problem or just something that occurs?

BTW, I can now add a sidebar to the page which I wasn’t able to….

Phil

[Tom]

I’m not 100% clear on what you want the checkout to look like, but perhaps this topic will help?: https://generatepress.com/forums/topic/checkout-trouble/#post-320295

If not just let me know and we’ll explore further 🙂

[Philip]

If you look at https://postimg.org/gallery/hb8otoeu/ you will see what I am after.

A question would be, why is the checkout page format different if you have the Woocommerce checked in the addons vs unchecked. Also, with WC checked I cannot add a sidebar to the Checkout nor the Cart page. With WC UNCHECKED I can add the sidebars…

Somehow the WC being checked is altering the code (I assume)

[Tom]

Ah, give this a shot:

.woocommerce-checkout .col2-set .col-2 {
    float: right;
    width: 48%;
}

.woocommerce-checkout .col2-set .col-1 {
    float: left;
    width: 48%;
}

#customer_details+#wc_checkout_add_ons, 
#order_review, 
#order_review_heading,
.woocommerce-checkout .col2-set {
    width: 100%;
    float: none;
    margin-right: 0;
}

The GPP WooCommerce add-on re-designs the checkout to a layout similar to Storefront – a theme created for WooCommerce by their developers.

[Philip]

Tom,

Your code gave me the first column is billing, 2nd column is Ship to, but there is a third column which is the order. This info should be UNDER the billing/ship to columns. I unchecked the option for Distraction-free mode and the third column is still there and the billing/shipping info is a jumbled mess. The sidebar did display.

you can go to http://www.powderedincense.com/e/checkout/ to see what is going on. You will probably have to enter a product or 2.

Phil

[Tom]

I just adjusted the CSS above so it brings the order details down under the shipping info.

[Philip]

Thanks a bunch…that did it…I can now turn WC off/on in the customize and get the same results. The only item I saw (which is very minor) Without WC being checked the lines of the order portion seem to be padded less than with WC being checked…

[Tom]

That’s due to there being more CSS added by the WC module. Without the WC module enabled, everything WC is completely default.

[Author]

Posts