need to change style of shipping methods on checkout and cart page

The shipping methods are sorted chaotically and I need to change that… The shipping text should be above the shipping methods, then the shipping methods in the left column and the prices in the right column. I am attaching pictures, the first picture shows my website, the second picture shows how it should look.

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the page URL so I will check and give you a possible solution?

Best Regards

Yeah sorry – nove.zapichy.sk

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

/* Align the radio buttons and text in a row */
#shipping_method li {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 5px 0;
}

/* Adjust radio button positioning */
#shipping_method input[type="radio"] {
    margin-right: 20px !important;
}

/* Align text on the left and price on the right */
#shipping_method label {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

Best Regards

not good… i want Doprava(shipping text) on top, then under Doprava i want shipping options, your code make it even worse, also on mobile phone radio button automaticly uncheck after a few seconds. There is image how it is looks like.

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and try adding the following Custom CSS in the desktop Custom CSS area under Theme Settings >> Custom CSS.

#shipping_method li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    right: 80px !important;
    position: relative;
    margin-top: 30px;
}

#shipping_method input[type="radio"] {
    right: 10px !important;
}

table :is(tbody,tfoot) th  {
     flex: 1 !important;
     display: flex;
     justify-content: space-between !important;
}

Best Regards.

now it is even worse…

Attachments:

You must be logged in to view attached files.

i got it…
/* Zarovná celú tabuľku dopravy */
.woocommerce-shipping-totals {
display: flex;
flex-direction: column;
}
/* Zobrazí nadpis ‘Doprava’ ako samostatný riadok nad možnosťami */
.woocommerce-shipping-totals th {
text-align: left;
width: 100%;
height: 40px;
text-decoration: underline;
text-decoration-color: #e4e4e4;
text-underline-offset: 1em;
}
.woocommerce-shipping-totals td {
width: 100%;
}
/* Nastaví zarovnanie dopravy v dvoch stĺpcoch */
#shipping_method label {
display: flex;
justify-content: space-between;
}
but thanks for your time…

Hello,

You’re welcome! Glad you were able to sort it out and get the desired layout. If you need any further assistance or adjustments, feel free to reach out.

Best Regards

[Author]

Posts