i have created my own theme for my woocommerce store i'm facing a layout issue in the checkout page, after debugging in chrome tools somehow i find out that the default main div is set to col-1 and if i were to edit it to col-12 that would fix the issue here however i'm using shortcode to use the woocommerce checkout functionality so i dont really have checkout page file and so not able to edit/override the checkout page so please if anyone can help me on how to set the default div from col-1 to be col-12 would be much appreciable. Thanks.

enter image description here

2 Answers 2


this solves the issue here:

.woocommerce .col-1, .woocommerce .col-2 {

You can make changes in the HTML structure of checkout page by making changes in checkout template of WooCommerce.

WooCommerce provides the feature to overwrite its default templates by adding template files in your active theme and making changes in those files.

Refer WooCommerce docs: https://docs.woocommerce.com/document/template-structure/

If you have the WooCommerce template in your theme then WooCommerce will call that template instead of calling the template from WooCommerce plugin.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.