Return to previous page

Change checkout shipping section styles as on the given screenshot

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

Anas

Participant

August 30, 2024 at 13:43

hi team, im finding it difficult to make neccessary adjustments to the checkout page shipping charge styles because im using a note after every shipping option. the default shipping style on xstore is causing it the note to set all to the end. i have added 2 screenshots. (Screenshot 2024-08-30 at 6.07.30 PM.png) 1 is from xstore and the other one (Screenshot 2024-08-30 at 6.07.19 PM.png) is the one i need, Please help me to fix this, thanks

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#412386 Copied

3 Answers
Luca Rossi

Support staff

August 31, 2024 at 08:12
Hi @Anas,

Please try adding the following CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.woocommerce-checkout tr.woocommerce-shipping-totals.shipping {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}
.woocommerce-checkout tr.woocommerce-shipping-totals.shipping td {
    padding: 0;
}
.woocommerce-checkout ul#shipping_method > li {
    flex-wrap: wrap;
    justify-content: start !important;
    width: 100%;
    border: 1px solid #f0f0f0;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
}
.woocommerce-checkout ul#shipping_method li label {
    margin-bottom: 0;
}
.woocommerce-checkout ul#shipping_method li div.el-alert {
    flex-basis: 100%;
    width: 100%;
}
.woocommerce-checkout ul#shipping_method li div.el-alert li {
    display: inline-block;
    text-align: left;
}

.woocommerce-checkout ul.el-alert-body > ul {
    padding-left: 0;
    width: 100%;
}
```
https://prnt.sc/EX2Fp5Xz0ELX

Hope it helps!
#412475 Copied
Anas

Participant

August 31, 2024 at 10:18

thank you so much, top notch support as always

#412498 Copied

Luca Rossi

Support staff

August 31, 2024 at 16:44

Dear @Anas,

Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

Click here to share your insights: https://themeforest.net/downloads

Your support fuels our journey, and we appreciate it more than words can express.

Best Regards,
The 8Theme Team.

#412516 Copied
Tagged: custom checkout shipping style, optimized checkout shipping, shipping section styles, woocommerce checkout modification, woocommerce checkout style, woocommerce wordpress themes, wordpress themes customization
Viewing 4 results - 1 through 4 (of 4 total)

The issue related to '‘change checkout shipping section styles as on the given screenshot’' has been successfully resolved, and the topic is now closed for further responses

Change checkout shipping section styles as on the given screenshot

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection