Return to previous page

The checkout and cart pages elements are misaligned

This topic has 4 replies, 2 voices, and was last updated 2 months ago ago by Luca Rossi

Aure

Participant

September 7, 2024 at 13:30

Since I’m not experiencing this issue with other themes, I believe the problem is specific to the Xstore: I’m having trouble aligning the elements on my cart and checkout pages. I’ve attached a video and printscreen showing how messy and cluttered it currently looks. I need the layout to appear neat, simple, and easy for customers to understand. It should be clear and straightforward for visitors to navigate through the cart page and checkout process..

Any help to fix this would be greatly appreciated!

Files is visible for topic creator and
support staff only.

#413458 Copied Theme version: 9.4.1

3 Answers
Luca Rossi

Support staff

September 9, 2024 at 04:28
Hi @Aure,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
tr.woocommerce-shipping-totals.shipping {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

tr.woocommerce-shipping-totals.shipping ul li {
    justify-content: start !important;
}
tr.woocommerce-shipping-totals.shipping ul li label {
    text-align: left;
}
```
Hope it helps!
#413592 Copied
Aure

Participant

September 16, 2024 at 07:04

It works only for the desktop version. Please see the attached video. We need the same inline appearance for the mobile version

Files is visible for topic creator and
support staff only.

#414471 Copied
Luca Rossi

Support staff

September 16, 2024 at 10:41
Hi @Aure,

Please also add this custom CSS codes:
```
@media (max-width: 600px){
    tr.woocommerce-shipping-totals.shipping td {
        min-width: 250px;
    }
}
```
Let us know how it goes!
#414505 Copied
Tagged: best selling woocommerce themes, cart page elements, checkout page alignment, improve woocommerce layout, optimized woocommerce themes, woocommerce themes fix
Viewing 4 results - 1 through 4 (of 4 total)