Home › Forums › Basel support forum › 2 Columns on Cart page › Reply To: 2 Columns on Cart page
March 10, 2017 at 8:28 am
#10682
Artem Temos
Keymaster
Hello,
It can be done only with CSS customization. Here is a code that you need to add to the Custom CSS section to do this.
.woocommerce-cart .cart-actions .col-md-6 {
width: auto;
-webkit-flex: none;
-ms-flex: none;
flex: none;
}
.woocommerce-cart .cart-actions {
margin-bottom: 30px;
}
.woocommerce-cart .cart-actions .col-md-6:last-child {
padding-left: 0;
}
.woocommerce-cart .cart_totals {
width: auto;
float: none;
}
.woocommerce-cart .woocommerce {
display: flexbox;
display: flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.woocommerce-cart .cart-collaterals,
.woocommerce-cart form {
padding-left: 15px;
padding-right: 15px;
}
.woocommerce-cart .woocommerce-message {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
width: 100%;
margin-left: 15px;
margin-right: 15px;
}
.woocommerce-cart .cart-collaterals {
-webkit-flex-basis: 40%;
-ms-flex-basis: 40%;
flex-basis: 40%;
width: 40%;
}
.woocommerce-cart form {
-webkit-flex-basis: 60%;
-ms-flex-basis: 60%;
flex-basis: 60%;
width: 60%;
}
.cross-sells {
display: none;
}
@media (max-width: 991px) {
.woocommerce-cart .cart-collaterals,
.woocommerce-cart form {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
width: 100%;
}
}
@media (max-width: 768px) {
.woocommerce-cart .cart-actions .col-md-6:last-child {
padding-left: 15px;
}
}
Regards