Return to previous page

Stretch Shipping Totals not showing on the checkout element

This topic has 5 replies, 3 voices, and was last updated 1 weeks, 6 days ago ago by Samir Malik

Cookster Creative

Participant

November 17, 2025 at 13:49

Hi,

On the basket element there is a togle “Stretch Shipping Totals” which works nicely putting them underneath and stretching full width.

However, this same toggle is not on the checkout, causing a mismatch and delivery options to wrap into multiple lines.

You can see attachment which shows the toggle, however this can not be found in the checkout element.

I’ve attached also how it looks in checkout.

Files is visible for topic creator and
support staff only.

#460059 Copied

4 Answers

Cookster Creative

Participant

November 17, 2025 at 13:49

this is how it looks on checkout at moment

Files is visible for topic creator and
support staff only.

#460060 Copied
Luca Rossi

Support staff

November 17, 2025 at 15:37
Hi @Cookster Creative,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

.woocommerce-checkout .woocommerce-shipping-totals.shipping { display: flex; flex-direction: column; } .woocommerce-checkout .woocommerce-shipping-totals.shipping th, .woocommerce-checkout .woocommerce-shipping-totals.shipping td { display: block; width: 100%; padding-left: 0; } .woocommerce-checkout .woocommerce-shipping-totals #shipping_method { text-align: start; } .woocommerce-checkout .woocommerce-shipping-totals #shipping_method li { justify-content: start; }

Kind regards,
The 8Theme Team
#460079 Copied
Cookster Creative

Participant

November 19, 2025 at 08:52

Hi,

It works but the lines wrap way too soon see screenshot.

Files is visible for topic creator and
support staff only.

#460245 Copied
Samir Malik

Support staff

November 19, 2025 at 11:22
Hello @Cookster Creative,

The HTML structure on the checkout page differs from that on the cart page. Therefore, the modification can only be applied as shown in this screenshot: https://prnt.sc/m2JULX5YdX0Z

Please update the custom CSS code as follows:

.woocommerce-checkout .woocommerce-shipping-totals.shipping { display: flex; flex-direction: column; } .woocommerce-checkout .woocommerce-shipping-totals.shipping th, .woocommerce-checkout .woocommerce-shipping-totals.shipping td { display: block; width: 100%; padding-left: 0; } .woocommerce-checkout .woocommerce-shipping-totals #shipping_method { text-align: start; } .woocommerce-checkout .woocommerce-shipping-totals #shipping_method li { justify-content: start; } @media (max-width: 480px){ .woocommerce-checkout .woocommerce-shipping-totals.shipping td[data-title="Shipping"] ul{ min-width: 250px; } }

Best regards,
8Theme Team
#460263 Copied
Viewing 5 results - 1 through 5 (of 5 total)