Home › Forums › Basel support forum › 2 Columns on Cart page

2 Columns on Cart page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 10, 2017 at 3:02 am #10668

    naxgo
    Participant

    Hi guys!

    I have a small issue that is bothering me for a long time now 🙂 On the cart page “Cart totals” and “Proceed to checkout” are now shown at the very bottom of the page.

    Is there a possibility to split the layout in 2 parts on one screen and have “Product, Price, Quantity, Total etc.” on the left side (right now there is a lot of space in-between of those items) and have the “Cart totals” block on the right side?

    In that case the “proceed to checkout” button would be above the fold, which is very good for conversions.

    Thanks a lot in advance!

    Attachments:
    You must be logged in to view attached files.
    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

    March 10, 2017 at 9:16 am #10683

    naxgo
    Participant

    Wow!! You guys are great!

    It works perfect, exactly what I’ve expected 🙂

    Thank you so much!

    March 10, 2017 at 12:15 pm #10687

    Artem Temos
    Keymaster

    You are welcome, we are always happy to help you, write us when you have any difficulties or issues with our theme.

    And we would be glad if you will rate our theme with 5 stars on Theme Forest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

    Thank you in advance 🙂

  • Author
    Posts

Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘2 Columns on Cart page’ is closed to new replies.