Two Column Checkout for WooCommerce with Enfold
/* =============================================================================
WooCommerce Modifications
========================================================================== */
$color-black-darker: #999999;
$color-black-dark: #848484;
$color-grey-tabs-border: #e4e4e4;
#top div.woocommerce-message {
background-color: $color-green;
color: $color-white-hard;
}
#top table.shop_table .actions .coupon .button,
#top table.shop_table .actions .button {
background-color: $color-black-darker;
border-color: $color-black-dark;
&:hover {
background-color: $color-purple-lighter;
border-color: $color-purple-lighter-border;
}
}
.woocommerce-cart {
.cart-collaterals .cart_totals a.button.alt {
background-color: $color-green;
border-color: $color-green;
width: 100%;
}
.woocommerce form {
display: inline-block;
}
.cart-collaterals {
display: inline-block;
float: right;
.cart_totals {
float: right;
width: 90%;
}
}
}
.entry-content .woocommerce {
.checkout .col-1,
.checkout .col-2 {
width: 100%;
}
#customer_details {
width: 55%;
}
.cart_totals.calculated_shipping {
border: 2px solid $color-grey-tabs-border;
padding: 30px;
@include border-radius(3px);
}
h3#order_review_heading {
padding: 30px 30px 15px 30px;
border-top: 2px solid $color-grey-tabs-border;
border-right: 2px solid $color-grey-tabs-border;
border-left: 2px solid $color-grey-tabs-border;
@include border-radius-all(3px, 3px, 0px, 3px);
}
#order_review {
padding: 0px 30px 30px 30px;
border-bottom: 2px solid $color-grey-tabs-border;
border-right: 2px solid $color-grey-tabs-border;
border-left: 2px solid $color-grey-tabs-border;
@include border-radius-all(0px, 3px, 3px, 3px);
}
#order_review,
#order_review_heading {
width: 42%;
display: inline-block;
margin-left: 3%;
margin-bottom: 0px;
}
#payment #place_order {
background-color: $color-green;
border-color: $color-green;
width: 100%;
}
}
@media (min-width: 991px) {
.woocommerce-cart {
.woocommerce form {
width: 70%;
}
.cart-collaterals {
width: 30%;
}
}
}
@media (min-width: 768px) and (max-width: 990px) {
.woocommerce-cart {
.woocommerce form {
width: 65%;
}
.cart-collaterals {
width: 35%;
}
}
}
@media (max-width: 767px) {
.entry-content .woocommerce {
.checkout .col-1,
.checkout .col-2,
#customer_details,
#order_review,
#order_review_heading,
.cart_totals.calculated_shipping {
width: 100% !important;
}
#order_review,
#order_review_heading {
border: none !important;
padding: 0px !important;
margin-left: 0%;
}
}
}
@media (max-width: 567px) {
.woocommerce-cart {
.cart-collaterals {
.cart_totals {
float: left;
width: 100%;
a.button.alt {
width: 100%;
}
}
}
}
}