Return to previous page

Shipping methods layout alignment issue on Checkout page

This topic has 9 replies, 2 voices, and was last updated 1 months, 3 weeks ago ago by makeitsimple

  • Avatar: makeitsimple
    makeitsimple
    Participant
    October 7, 2025 at 19:29

    Hello,
    On the Checkout page, the shipping method options (e.g. “ACS Courier”, “Pickup from store”) are currently displayed side-by-side and centered under the “Shipping” label.
    I would like them to appear vertically (one below the other) and left-aligned, directly below the “Shipping” heading for a cleaner layout. I’ve already managed to make them appear vertically with custom CSS, but they still appear centered instead of aligned to the left.
    Could you please let me know the proper CSS or template adjustment needed so that the shipping options align exactly under the “Shipping” title on the left side?

    Link: https://yourexpert.gr/checkout/

    Please, contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    #456675 Copied
    8 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    October 8, 2025 at 04:33

    Hi @makeitsimple,

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

    
tr.woocommerce-shipping-totals.shipping th,
tr.woocommerce-shipping-totals.shipping td {
    display: block;
    max-width: 100% !important;
    text-align: left !important;
    padding-left: 0;
}

tr.woocommerce-shipping-totals.shipping td #shipping_method,
tr.woocommerce-shipping-totals.shipping td #shipping_method li {
    text-align: start !important;
    justify-content: start;
}

    https://prnt.sc/B9jyuS402kZm

    Kind regards,
    The 8Theme Team

    #456683 Copied
    Avatar: makeitsimple
    makeitsimple
    Participant
    October 8, 2025 at 14:33

    Thank you — the desktop version is working fine, but on mobile devices, the text is displayed almost vertically instead of horizontally, while the payment options are showing correctly (see attached image).

    Files is visible for topic creator and
    support staff only.
    #456761 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    October 8, 2025 at 15:00

    Hi @makeitsimple,

    Please update the previous CSS code to this:

    
tr.woocommerce-shipping-totals.shipping th,
tr.woocommerce-shipping-totals.shipping td {
    display: block;
    max-width: 100% !important;
    text-align: left !important;
    padding-left: 0;
    width: 230px;
}

tr.woocommerce-shipping-totals.shipping td #shipping_method,
tr.woocommerce-shipping-totals.shipping td #shipping_method li {
    text-align: start !important;
    justify-content: start;
}

    https://prnt.sc/nB5jwaDZjXy-

    Hope it helps!

    #456765 Copied
    Avatar: makeitsimple
    makeitsimple
    Participant
    October 8, 2025 at 21:46

    I’ve changed a little bit the choices and it still breaks with your last css code (attached image)

    Files is visible for topic creator and
    support staff only.
    #456786 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    October 9, 2025 at 07:41

    Hi @makeitsimple,

    Please find 230px and change to 250px

    Let us know how it goes!

    #456799 Copied
    Avatar: makeitsimple
    makeitsimple
    Participant
    October 9, 2025 at 14:13

    With the following code desktop works fine but on mobile it looks like this

    /* Επαναφορά σωστής διάταξης μεταφορικών */
    tr.woocommerce-shipping-totals.shipping th,
    tr.woocommerce-shipping-totals.shipping td {
    display: block;
    max-width: 100% !important;
    text-align: left !important;
    padding-left: 0;
       width: 250px;
    }

    tr.woocommerce-shipping-totals.shipping td #shipping_method,
    tr.woocommerce-shipping-totals.shipping td #shipping_method li {
    text-align: start !important;
    justify-content: start;
    }

    Files is visible for topic creator and
    support staff only.
    #456871 Copied
    Avatar: Justin
    Luca Rossi
    Support staff
    October 10, 2025 at 03:27

    Hello @makeitsimple,

    This is how it appears on our side: https://prnt.sc/CAs8Bi4SPAHT.
    Unfortunately, it cannot be further improved, as it is a table and the width cannot be significantly adjusted.

    Best regards,
    The 8Theme Team

    #456894 Copied
    Avatar: makeitsimple
    makeitsimple
    Participant
    October 10, 2025 at 14:54

    Thanks for the support! My topic “Shipping methods layout alignment issue on Checkout page” has been successfully resolved.

    #456954 Copied
  • Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘Shipping methods layout alignment issue on Checkout page’' has been successfully resolved, and the topic is now closed for further responses

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Mango – Responsive eCommerce PSD Template
lazy-placeholder
Animals Store – WooCommerce Theme
lazy-placeholder
Wedding – WordPress Theme
lazy-placeholder
Marseille 03 – WordPress WooCommerce Theme
lazy-placeholder
Niche Market 03 – Multivendor WP WooCommerce Theme
lazy-placeholder
Hosting Store – WordPress WooCommerce Theme
lazy-placeholder
Handmade artisans – WordPress WooCommerce Theme
lazy-placeholder
Coffee Store – WordPress WooCommerce Theme
lazy-placeholder
Classic Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Kidsstore – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.