Return to previous page

Checkout page on mobile version is not showing shipping options correctly

This topic has 3 replies, 3 voices, and was last updated 5 days, 2 hours ago ago by Andrew Mitchell

Jennifer

Participant

August 25, 2026 at 20:34

Hi there,

Hope you are doing well.

We are experiencing an issue on the mobile version of our checkout page: all shipping options are being displayed on a single line.
https://postimg.cc/4H379FTz

Could you please give us a hand with this?

Best regards,

#474877 Copied

2 Answers

Jack Richardson

Support staff

August 26, 2026 at 06:59

Hello @Jennifer,

Could you kindly provide us with a screenshot of the checkout form details in the private area so that we can have the same shipping options? The current form can be viewed here: https://prnt.sc/14IktIZugn6n. Additionally, please attach the correct wp-admin credentials, as the current ones are incorrect.

Also, you can try to add next custom php snippet in your child-theme/functions.php:
add_filter('etheme_cart_shipping_full_width', '__return_true', 999);

If you still need our assistance, please, provide correct wp-admin and more details of shipping configurations.

Best regards,
Jack Richardson
The 8Theme’s Team

#474936 Copied

Andrew Mitchell

Support staff

August 26, 2026 at 07:10

Hello, Jennifer,

We have added the following custom CSS (Theme Options -> Custom CSS -> Global Custom CSS) to resolve this issue. Please check it.

.woocommerce-cart-form td[data-title="Envío"],
.cart_totals td[data-title="Envío"],
.cart_totals tr.shipping td {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    padding-left: 0 !important;
}

#shipping_method,
.woocommerce-shipping-methods {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 0 !important;
    margin: 10px 0 0 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#shipping_method li,
.woocommerce-shipping-methods li {
    display: flex !important;
    align-items: flex-start !important; 
    justify-content: flex-start !important;
    text-align: left !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

#shipping_method li label,
.woocommerce-shipping-methods li label {
    display: inline !important;
    text-align: left !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    flex: 1 !important; 
}

#shipping_method input[type="radio"],
.woocommerce-shipping-methods input[type="radio"] {
    margin-right: 10px !important;
    margin-top: 3px !important; 
    flex-shrink: 0 !important;
}

Best regards,
8Theme’s Team

#474940 Copied