Docs

[thecashbag]

I’ve been looking through other support threads that give CSS code to make the WooCommerce checkout page two columns (left column billing and shipping, right column is order review and payment). Like this one here: https://community.theme.co/forums/topic/woocommerce-page-to-two-colums/

And I have managed to get it working, but I’m having a problem with the “shipping options” width being too small, and I can’t figure out how to make it wider without effecting all the other “totals” columns.

I have attached a screenshot with boxes drawn on it. I want the blue boxes to stay on the right, but make the green box wider. See here: http://smrtshot.com/i/tQYL

[thecashbag]

This reply has been marked as private.

[thecashbag]

This reply has been marked as private.

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

@media (min-width: 768px) {
    .product-name {
        width: 60%;
    }
}

Hope this helps.

[thecashbag]

Thanks for the help 🙂

Unfortunately that does not work because it also moves the totals column to the left. I need only the shipping options to become wider.

I have attached the screenshot here again to show you what I mean.

[Rad]

Hi there,

Please change your CSS to this,

@media (min-width: 768px) {
    .product-name {
        width: 60%;
    }
.product-total {
text-align: right;
}
}

There is no way to alter table cell independently to other columns. It’s on same table, the best width is 50% and text alignment so it won’t compressed the other.

Thanks!

[Author]

Posts