Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Columns classes (col-1 and col-2) conflicts with Bootstrap v4 #15793

Closed
cyrildc opened this Issue Jun 26, 2017 · 14 comments

Comments

Projects
None yet
@cyrildc
Copy link

cyrildc commented Jun 26, 2017

WooCommerce uses the classes col-1 and col-2 in the following files:

  • templates/checkout/form-checkout.php
  • templates/myaccount/form-login.php
  • templates/order/order-details-customer.php

These classes are used in Boostrap v4 to create 1/12 and 2/12 column.
.col-1 { -webkit-box-flex: 0; -webkit-flex: 0 0 8.333333%; -ms-flex: 0 0 8.333333%; flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { -webkit-box-flex: 0; -webkit-flex: 0 0 16.666667%; -ms-flex: 0 0 16.666667%; flex: 0 0 16.666667%; max-width: 16.666667%; }

@WPprodigy

This comment has been minimized.

Copy link
Member

WPprodigy commented Jun 27, 2017

WooCommerce doesn't declare Bootstrap support, so not sure if this is something that will be/should be changed. There are countless frameworks and themes out there and it would be impossible to be compatible with them all.

CC @jameskoster

@claudiosanches

This comment has been minimized.

Copy link
Member

claudiosanches commented Jun 27, 2017

I'm not a big fan of col-1 or col-2, both means nothing... Maybe replace for better naming in 4.0.0.
But right now the best solution in to create custom templates inside the theme to avoid fix any conflict with your theme Bootstrap v4 based.

@jameskoster

This comment has been minimized.

Copy link
Member

jameskoster commented Jun 27, 2017

We'll be adding new classes whenever we get around to #10674

But I'm still not sure we'll ever fully remove all the old classes. Too much risk for breakage for comparatively little reward.

Imo your best approach would be to dequeue the wc stylesheets and add your own custom versions. It's the only way to rule out conflicts 100%.

@hasanrang

This comment has been minimized.

Copy link

hasanrang commented Oct 6, 2017

In-case anyone may looking for quick fix until the issue fixed. just replace the col-1 and col-2 by appropriate bootstrap class, hope that help.

`
$('#customer_details .col-1').removeClass('col-1').addClass('col-6').css({"display": "inline-block", "vertical-align": "top"});
$('#customer_details .col-2').removeClass('col-2').addClass('col-5').css('display','inline-block');
$('.woocommerce-MyAccount-content .col-1').removeClass('col-1').addClass('col-12');
$('.woocommerce-MyAccount-content .col-2').removeClass('col-2').addClass('col-12');

`

@viviancruzbt

This comment has been minimized.

Copy link

viviancruzbt commented Jan 10, 2018

I did fix with CSS.
There is my SASS code:
.woocommerce{
.col-1, .col-2{
max-width:none;
}
}

@kurdi89

This comment has been minimized.

Copy link

kurdi89 commented Mar 7, 2018

as viviancruzbt suggested this worked for me :

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

@max4kaps

This comment has been minimized.

Copy link

max4kaps commented May 31, 2018

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

@Coernel82

This comment has been minimized.

Copy link

Coernel82 commented Jun 16, 2018

Those workarounds didn't work for me. My solution:
Use a custom bootstrap version: https://getbootstrap.com/docs/3.3/customize/ and un-tick the "Forms" in the first colum "Common CSS".

@muktoapb

This comment has been minimized.

Copy link

muktoapb commented Aug 13, 2018

this works for me
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row {
display: block;
}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
max-width: unset;
}

@PopcornDesign

This comment has been minimized.

Copy link

PopcornDesign commented Sep 7, 2018

I am having this issue with latest bootstrap

LORDofDOOM added a commit to LORDofDOOM/oceanwp that referenced this issue Sep 23, 2018

Make compatible with Bootstrap 4:
- Change every 'col-' to 'owp-col-' (except WooCommerce releated stuff, because there are also col-1, col-2 classes -> woocommerce/woocommerce#15793)
- Add max-width: unset and display: block to WooCommerce to make sure Bootstrap forms work
- Add custom CSS to _navigation.scss to make navigation work with Bootstrap
- Recompile style.css and woocommece.css
@smarterdigitalltd

This comment has been minimized.

Copy link

smarterdigitalltd commented Oct 6, 2018

A good solution would be to use a WordPress filter on the CSS classes in the template file. Backwards compatible, and easily changed by a developer. No need to override the template. Feasible?

@iziCodeBlog

This comment has been minimized.

Copy link

iziCodeBlog commented Nov 17, 2018

Replace all "col-" on "boot-col-" and "form-row" on "boot-form-row" in file "bootstrap.min.css"
And now use the new name wherever you want to see bootstrap
Also I attach my modified working file...
Just change the name from " bootstrap.txt " on " bootstrap.min.css"
Because I can't add css files to github

bootstrap.txt

@jilson23

This comment has been minimized.

Copy link

jilson23 commented Nov 20, 2018

this works for me
.woocommerce-billing-fields .form-row, .woocommerce-shipping-fields .form-row,.woocommerce form .form-row {
display: block;
}

.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 {
max-width: unset;
}

excelent, this works for me

@strabsquad

This comment has been minimized.

Copy link

strabsquad commented Apr 4, 2019

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

Thanks for the quick tip fix

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.