Return to previous page

How to make shipping methods display full width of the block?

This topic has 4 replies, 2 voices, and was last updated 1 weeks, 6 days ago ago by Luca Rossi

Goostaf

Participant

April 3, 2025 at 13:42

How to make shipping methods display full width of the block? We are currently offsetting

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#439611 Copied Theme version: 9.4.7

3 Answers
Luca Rossi

Support staff

April 4, 2025 at 06:45
Hello @Goostaf,

Thank you for reaching out to us.

To make the shipping methods display at the full width of the block, you may need to apply some custom CSS to adjust the layout. Please try adding the following CSS code to your theme’s custom CSS section (Appearance > Customize > Additional CSS):

tr.woocommerce-shipping-totals.shipping { display: table-row; } tr.woocommerce-shipping-totals.shipping th, tr.woocommerce-shipping-totals.shipping td{ width: 100%; display: block; max-width: 100% !important; }

https://prnt.sc/G3z51bfwI0-A

Best Regards,
8Theme’s Team
#439682 Copied
Goostaf

Participant

April 4, 2025 at 11:38

Thanks, on pc not bad, but there is still room on the right side, and on mobile the whole thing shifts and is out of width

Files is visible for topic creator and
support staff only.

#439755 Copied

Luca Rossi

Support staff

April 4, 2025 at 12:41

Dear @Goostaf,

Thank you for reaching out to us.

Please note that the shipping methods are structured within an HTML table format, which makes it quite challenging to apply custom CSS effectively. Implementing the desired changes would require modifications to the HTML structure itself.

For any customizations that go beyond the default functionality, we kindly encourage you to submit a request through our Customization Panel, available at: https://www.8theme.com/account/#etheme_customization_panel. Please be aware that such customization services may incur additional charges.

If you have any further questions or need additional assistance, please do not hesitate to contact us.

Best regards,
The 8Theme Team

#439763 Copied
Viewing 4 results - 1 through 4 (of 4 total)