Checkout layout mess

Hi there,

Thank you for sending over that link.

So, I see that the CSS that is causing that is coming from your theme: /wp-content/themes/scss/mixins/_grid.scss

It appears to be setting those columns to have a max-width of 8.33333%, which is why they are so squished like that.

The best course of action would be to reach out to your theme developers to ask about this, and see about having that addressed in the theme itself.

For now, you could use some CSS like below to remove the styling on those columns just on the Checkout page:

.woocommerce-checkout .col-1 {
    -ms-flex: initial;
    flex: initial;
    max-width: initial;
}

.woocommerce-checkout .col-2 {
    -ms-flex: initial;
    flex: initial;
    max-width: initial;
}

You can add that to the “Additional CSS” section of your Customizer (Appearance > Customize).

Hi there,

I’m not sure what you are referring to by “the break for the checkot form” — however, after adding that CSS, I see it is no longer squished like in your initial screenshot.

There is a lot of styling being added to all the fields/labels/tables/etc on the page, coming from your active theme:

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

If you do not like the way it is displaying with that styling, please reach out to your theme developers to ask about changing the design.

You could also try switching back to the default Storefront theme to see how the fields/forms display without the styling being added by your theme.

To avoid affecting your customers, you may could do that testing on a staging site. If you don’t have one already, your hosting company might offer one as part of your package. Alternatively, you can use a free plugin like https://wordpress.org/plugins/wp-staging/

Hi there,

By default, it’s only possible to Activate a single theme at a time on a WordPress installation.

I know there are some plugins around that make it possible to use more than one theme on a site at a time though — it looks like there’s a guide for setting one up here:
https://www.wpbeginner.com/wp-themes/how-to-use-multiple-themes-for-pages-in-wordpress/

Aside from that, another option would be to set up a multisite network, and install your WooCommerce Store as a subsite. There’s information about setting up multisite here:

Create A Network

https://www.wpbeginner.com/wp-tutorials/how-to-install-and-setup-wordpress-multisite-network/
https://www.wpbeginner.com/glossary/multisite/