Home › Forums › Basel support forum › 2 Columns on Cart page
2 Columns on Cart page
- This topic has 3 replies, 2 voices, and was last updated 7 years, 8 months ago by Artem Temos.
-
AuthorPosts
-
March 10, 2017 at 3:02 am #10668
naxgoParticipantHi 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 TemosKeymasterHello,
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
naxgoParticipantWow!! 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 TemosKeymasterYou 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 🙂
-
AuthorPosts
The topic ‘2 Columns on Cart page’ is closed to new replies.
- You must be logged in to create new topics. Login / Register