Return to previous page

Woocommerce Shipping Calculator mobile layout shifting

This topic has 11 replies, 3 voices, and was last updated 4 months, 3 weeks ago ago by Luca Rossi

ProdbyDaan

Participant

December 17, 2023 at 13:25

Hey Team,

when i use my Mobile Phone and open the “Shipping Calculator” Button on the Cart Page. The layout is shifting and it looks messed up.

https://prnt.sc/5jE6jlVpA788

https://prnt.sc/KVAMmuY-9u_i

I use one of the xStore Website Templates..

Could you help?
Thanks!

#376911 Copied Theme version: 9.2.5 WooCommerce version: 8.4.0

10 Answers

Rose Tyler

Support staff

December 17, 2023 at 16:23

Hello, ProdbyDaan,

Thank you for getting in touch with us.

As we can see, your Cart page uses the default WooCommerce shortcode.
Please verify that the issue you are experiencing is not a result of any third-party plugins or custom code implemented on your website.

Thank you for your cooperation and we look forward to hearing from you soon.

Kind Regards,
8theme team

#376929 Copied

ProdbyDaan

Participant

December 17, 2023 at 19:41

Hey Rose,

okay i checked it on my staging page.
It looks like its caused by the Plugin “Rank Math SEO”.

Thats strange.
So i will contact the Rank Math Support

#376935 Copied

ProdbyDaan

Participant

December 17, 2023 at 19:52

Okay rechecked.
Not all Problems went.

Disabled all unnecessary plugins.
Check alle Custom CSS. But nothing configured for the Shipping Calculator,

Best regards.
Daniel Peters

You can recheck my staging page.

Please contact administrator
for this information.

#376936 Copied
Luca Rossi

Support staff

December 18, 2023 at 06:26
Dear @ProdbyDaan,

We hope this message finds you well.

We have identified a solution to the issue you are experiencing with the mobile display. To implement the necessary adjustments, please insert the following custom CSS code into your website’s theme settings. You can do this by navigating to Theme Options, selecting Theme Custom CSS, and then pasting the code into the Global CSS section:
```
@media (max-width: 480px){
    .cart-checkout-multistep .cart-collaterals {
        padding: 0 !important;
    }
    .woocommerce-cart .cart_totals h2,
    .woocommerce-cart .cart_totals table.shop_table.shop_table_responsive th,
    .woocommerce-cart .cart_totals table.shop_table.shop_table_responsive td{
        padding: 15px 30px;
    }
    
    .woocommerce-cart .cart_totals table.shop_table tr.shipping {
        display: flex !important;
        width: 430px;
        flex-wrap: wrap;
    }
    .woocommerce-cart .cart_totals table.shop_table tr.shipping th,
    .woocommerce-cart .cart_totals table.shop_table tr.shipping td {
        width: 100%;
    }
}
@media (max-width: 430px){
    .woocommerce-cart .cart_totals table.shop_table tr.shipping {
        width: 400px;
    }
}
```
Please apply these changes at your earliest convenience and verify that the display issue has been resolved. Should you require any further assistance or have any questions, do not hesitate to reach out.

Best regards,
The 8Theme Team
#376951 Copied
ProdbyDaan

Participant

December 18, 2023 at 08:34

Hello Luca,

thanks for the quick response.
Could you recheck the page?

It’s better but still not 100% correct.

Thanks!

#376968 Copied
Luca Rossi

Support staff

December 18, 2023 at 08:45
Hello @ProdbyDaan,

Can you please also add this custom CSS code?
```
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0 30px 30px;
}
```
Let us know how it goes!
#376969 Copied
ProdbyDaan

Participant

December 18, 2023 at 08:58

Hey Luca it doesnt work :/

Could you connect you to my Admin Dashboard and check it?

Please contact administrator
for this information.

#376973 Copied

Luca Rossi

Support staff

December 18, 2023 at 09:03

Hi @ProdbyDaan,

This is how it looks on our end: https://prnt.sc/Bv80SB1cK5G5

Can you please provide us your screenshots or video?

Thank you so much!

Best regards,
The 8Theme Team

#376975 Copied

ProdbyDaan

Participant

December 18, 2023 at 09:16

Hey Luca,

i visit my site directly via iPhone 14 Pro. Not in the Response View in Firefox/Chrome.

On my site ot looks like this:

https://prnt.sc/8ehPc_noH0CE
https://prnt.sc/IKF14XUdxEc8

Thanks.

#376977 Copied

Luca Rossi

Support staff

December 18, 2023 at 09:30

Dear @ProdbyDaan,

We are writing to express our gratitude for the screenshots you provided. Following your input, we have made some modifications to the custom CSS codes, and we are pleased to inform you that the visual presentation has been enhanced accordingly.

At your earliest convenience, could you please review the updates and confirm that everything is to your satisfaction?

We value your feedback and look forward to your response.

Best Regards,
The 8Theme Team

#376979 Copied
Tagged: efficient shipping calculator, flexible woocommerce templates, mobile layout shift, optimized mobile woocommerce, responsive woocommerce design, woocommerce shipping calculator, wordpress woocommerce templates
Viewing 11 results - 1 through 11 (of 11 total)

The issue related to '‘Woocommerce Shipping Calculator mobile layout shifting’' has been successfully resolved, and the topic is now closed for further responses

Woocommerce Shipping Calculator mobile layout shifting

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection