Return to previous page

Checkout change alignment - by ianabel - on WordPress WooCommerce support

This topic has 10 replies, 2 voices, and was last updated 4 years, 5 months ago ago by Olga Barlow

ianabel

Participant

October 29, 2019 at 12:02

Hello,
In my checkout section shipping method don’t have a correct alignment. I would like it to show the same as payment method. Please see screenshot: https://www.ia-incosmetics.com/wp-content/uploads/2019/10/checkout-mal-alineado.jpg

Thanks

#224002 Copied Theme version: v.6.1.1 (child v.1.0) WooCommerce version: 3.7.1

9 Answers
Olga Barlow

Support staff

October 29, 2019 at 12:24
Hello,

Shipping methods use the table HTML structure http://prntscr.com/ppllgk and you can’t push them below the Envio title without editing of the PHP files.
If you want just to align then to left http://prntscr.com/ppllzp add the following code to Theme Options > Theme Custom CSS
```
.cart-order-details .shop_table td .woocommerce-shipping-methods {
    text-align: left;
}

#shipping_method li {
    flex-direction: row;
}
#shipping_method input[type="radio"] + label {
    padding-left: 10px;
}
```
Regards
#224006 Copied
ianabel

Participant

October 29, 2019 at 12:40

OK, I already set the code in custom css. There is any way to also make the “Envío” column narrower? So each text would be in a single row.

Thanks

#224010 Copied

Olga Barlow

Support staff

October 29, 2019 at 13:00

Hello,

You could try to play with column width using custom CSS but don’t forget that this is a table and if you change the column width it will be applied not just for the Envío but also for the product title cell http://prntscr.com/ppm5zv

Regards

#224011 Copied

ianabel

Participant

October 29, 2019 at 15:26

Can’t do that then.
And it is possible to make wider shipping and payment method table gaining space to shipping details table? I mean like have screen for each table. Because now it doesn’t look good.

#224016 Copied

Olga Barlow

Support staff

October 29, 2019 at 16:58

Hello,

Unfortunately, there is no way to change it with the existing structure of the table. I have passed your issue to our developers and they will take a look if it’s possible to improve the structure and its styles in the next updates. So, follow theme updates https://xstore.8theme.com/update-history/

Regards

#224022 Copied
ianabel

Participant

October 29, 2019 at 17:14
Thank you very much! I made a lash-up with this code and now it looks much better.
```
.col-md-7 {
    width: 45%;
}

.col-md-5 {
    width: 55%;
}

.cart-order-details .shop_table th {
    padding-right: 10px;
    height: 72.6632px;
    width: 230px;
}
```
#224025 Copied
Olga Barlow

Support staff

October 29, 2019 at 17:56

Hello,

Oh, no don’t use such global classes as .col-md-7 and .col-md-5 These classes are default bootstrap classes and used through all the site for many different elements!
Use the deep structure to apply new styles for that table only, like
.checkout.woocommerce-checkout .col-md-5 and.checkout.woocommerce-checkout .col-md-7

#224028 Copied

ianabel

Participant

October 30, 2019 at 16:57

oh! ok, I’ve already changed it. I’m quite novice on this… 😐

Thank you!!

#224096 Copied

Olga Barlow

Support staff

October 30, 2019 at 18:48

Hello,

I see 🙂 It’s ok.

Regards

#224106 Copied
Viewing 10 results - 1 through 10 (of 10 total)