Theme css clash on checkout with stackable options

This topic has 5 replies, 3 voices, and was last updated 1 hour, 14 minutes ago ago by Tony Rodriguez

  • Avatar: Anastasia
    Anastasia
    Participant
    April 28, 2026 at 01:29

    Hi there,

    I’m messaging you because I’m not sure what steps to take. I’ve received feedback that the checkout is not looking great on mobile and it’s a bit confusing for the clients so I’m trying to make it better. The issue is the alignment and (lack of) stacking of the delivery options. As you can see here – https://prnt.sc/dv1ihzKx7W9Q – the text is in a very narrow column and not very easily readable. I want to stack the elements under each other.

    This is my best attempt to fix the issue – https://prnt.sc/QWVD9onT1KRR – I admit that I know only the basic css coding and I used AI for help but I know that I’m hitting a wall because there’re theme styles that are “stronger” than my added code.

    Can you please advice me how to proceed? Should I hire someone to fix that for me?

    Thank you!

    Best wishes,
    Anastasia

    Content is visible for topic creator and
    support staff only.
    4 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    April 28, 2026 at 07:28

    Hello @Anastasia,

    We kindly suggest that you review the following videos, which demonstrates the configuration settings we have enabled on your website to ensure a proper responsive layout on the cart and checkout pages.

    Cart page: https://gyazo.com/edf5fc5c7fe4500482b90be6a12e7d9d
    Checkout page: https://gyazo.com/8c0557be9c7dd2b539eb4a7b365076f2 (this adjustment moves the shipping section separately and provides additional spacing).

    Additionally, we have added the following custom CSS to xstore-child/style.css:

    .etheme-woocommerce-shipping-methods td[colspan="2"] #shipping_method li {  
        flex-wrap: wrap;  
    }

    Frontend example: https://gyazo.com/3acd18e09e480e3cb783551449e5e6bc

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: Anastasia
    Anastasia
    Participant
    April 28, 2026 at 22:26

    Oh my god, you fixed it with the Elementor editor, I’m in fact speechless because I’ve spend not one or two days trying to fix it myself. Thank you so very much, @Jack Richardson, you’re amazing!

    Best wishes,
    Anastasia

    Avatar: Anastasia
    Anastasia
    Participant
    April 28, 2026 at 22:27

    Thanks for the support! My topic “Theme css clash on checkout with stackable options” has been successfully resolved.

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    April 28, 2026 at 22:27

    Dear Anastasia,

    Thanks for being part of our WordPress & WooCommerce community!

    We’re happy we could assist you. Your feedback truly matters — it helps us make XStore better, faster, and more reliable with every release.

    Together, we’re shaping a better WooCommerce experience for everyone.

    Topic closed.
    The 8Theme Team

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Theme css clash on checkout with stackable options’' has been successfully resolved, and the topic is now closed for further responses

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