Shipping Method layout un cart and checkout

Hi there Eduardo,

As you may expect, the styling/layout of the pages and elements is controlled by the active theme on your site (Avada). With our default Storefront theme, the shipping methods in the Cart are already left-aligned:

Link to image: https://d.pr/i/p60OV0

On your Cart page, it looks like the columns (label and shipping methods) are set to 50% each. Something like the following should make it so the label takes up less width and changes the shipping methods to be aligned to the left side.

.cart_totals table th {
  width: 25%;
}

.cart_totals table td {
    width: 75%;
    text-align: left;
}

.cart_totals table td .woocommerce-shipping-methods, .cart_totals table td .woocommerce-shipping-methods li {
    text-align: left;
}

It may take some tweaking to get it looking just the way you want though.

If you are still having issues, please reach out to Avada support for assistance, since the styling is coming from their theme.

Alternatively, if you need assistance with coding or custom development, we recommend reaching out to a developer from one of the services at https://woocommerce.com/customizations/

I hope that helps! Have a wonderful day!

Hi Kelly.
Thanks for your quick response. The code worked perfectly setting the th at 10% and the td at 80%, as you can see in the screen print (https://ibb.co/h7kvvff)
The only thing is that the total price also aligned with the radio buttons. Is there a way to leave this to the right, as to stay aligned with the subtotal?
If it′s beyond the scope of this, please accept my apologies and I′ll consult with Avada.
Thanks a lot.
Best Regards,
Eduardo

Sorry, I forgot to add. What would be the code to also make this work on the checkout page.
Thank you.
Have a good day!!

Hey there Eduardo,

I’m glad to hear the snippet worked!

It looks like this should align the total back to the right side.

.cart_totals table .order-total td {
    text-align: right;
}

As for the Checkout page, I tried just tweaking this style and it aligned to the left. The overall layout of the page is a bit different, so didn’t mess with the widths:

ul#shipping_method {
  text-align: left;
}

Disclaimer: this might not be the most efficient way to do all of that, but it looks like it should work.

For any further adjusting of the design though, please reach out to the Avada team.

Have a wonderful day!

Hi Kelly.
It worked perfectly on both pages!!!
Thanks a lot for your time.
Have an excelent day also.
Regards,
Eduardo

Hi there Eduardo,

I’m so glad to hear it worked! : )

I’m going to mark this thread as resolved. If you have any further questions, please start a new thread.

Take care, and have an amazing day/weekend!

Hi, I am wondering if there is a way to remove the shipping title from mobile-only? Currently, my shipping methods are showing with the radio buttons very close to the title

ex:
Shipping:(button) Standard: PRICE
(button) Express: PRICE

Is there a way to add a line break after the title or remove it altogether?

Additionally, why are the buttons on mobile-only showing square? Can they be circular like on the desktop?

Thanks in advance!
Screenshot: https://ibb.co/SPTNVGJ
Shop Link: https://jgl.677.myftpupload.com/cart/

• This reply was modified 4 years, 3 months ago by alexadesigns312. Reason: Added Link

Hi there @alexadesigns312,

Per forum guidelines, please start a new post for your new question, rather than commenting on an old/closed post.

Thank you!