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
  • #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.
    #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

    #10683

    naxgo
    Participant

    Wow!! You guys are great!

    It works perfect, exactly what I’ve expected 🙂

    Thank you so much!

    #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 🙂

Tagged: ,

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

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