Home Forums Basel support forum 2 Columns on Cart page Reply To: 2 Columns on Cart page

#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