theme development - how to edit woocommerce checkout page

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.

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.

• theme-development
• customization
• woocommerce-offtopic
• shortcode

Share Improve this question asked May 23, 2018 at 18:27 OT AMDOT AMD 9511 gold badge11 silver badge44 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

this solves the issue here:

.woocommerce .col-1, .woocommerce .col-2 {
        max-width:none;
}

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/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.