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.
Share Improve this question asked May 23, 2018 at 18:27 OT AMDOT AMD 951 gold badge1 silver badge4 bronze badges2 Answers
Reset to default 0this 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.