Skip to content

Instantly share code, notes, and snippets.

@AnupRaj
Last active September 13, 2021 21:53
Show Gist options
  • Save AnupRaj/7e5b46addc48e3bd9be31e4248b92d5b to your computer and use it in GitHub Desktop.
Save AnupRaj/7e5b46addc48e3bd9be31e4248b92d5b to your computer and use it in GitHub Desktop.
Nozama CSS with Woocommerce One Page Checkout
.site-logo {
font-size: 28px;
}
.payment_box {
padding: 15px;
margin: 5px 0 0;
}
#wc-stripe-card-element {
border: 1px solid gray;
}
.woocommerce-tabs.wc-tabs-wrapper {
max-width: 900px;
margin: 0 auto;
}
.item{border:none;}
body.post-type-archive-product .row-items .col-xl-3.col-lg-4.col-sm-6.col-12 {
border: 1px solid #f5f5f5;
}
body.woocommerce-page p.item-title {
min-height: 60px;
}
.related.products .col-xl-3.col-lg-4.col-sm-6.col-12 {
border: 1px solid #f5f5f5;
}
.item-content {
min-width: 0;
padding: 10px 10px 10px;
}
.row-items .col-xl-3.col-lg-4.col-sm-6.col-12 {
border: 1px solid #f5f5f5;
}
.item .item-star-rating {
min-height: 30px;
}
p.item-title {
min-height: 40px;
}
th.woocommerce-product-attributes-item__label {
min-width: 200px;
}
.row-items .col-lg-4.col-sm-6.col-12 {
border: 1px solid #e0e0e0;
}
/* checkout */
input#ship-to-different-address-checkbox {
min-height: 20px;
min-width: 20px;
}
body.woocommerce-checkout .head-search-form-wrap,
body.woocommerce-checkout nav.woocommerce-breadcrumb {
display: none;
}
nav.woocommerce-breadcrumb {
margin-bottom: 10px;
}
body.woocommerce-checkout .main {
padding-top: 30px;
}
@media (min-width: 992px){
body.woocommerce-checkout textarea#order_comments {
min-height: 150px;
}
body.woocommerce-checkout div#customer_details {
max-width: 50%;
float: left;
}
body.woocommerce-checkout h3#order_review_heading {
max-width: 49%;
float: right;
min-width: 48%;
}
body.woocommerce-checkout div#order_review {
max-width: 49%;
float: right;
min-width: 48%;
}
body.woocommerce-checkout .col-1, body.woocommerce-checkout .col-2 {
min-width: 99%;
}
}
.woocommerce-checkout .woocommerce-info, .woocommerce-checkout .woocommerce-form-coupon {
max-width: 600px;
}
/* cart */
@media (min-width: 1350px){
.cart-collaterals .cart_totals {
width: 100%;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
margin-left: 0;
}
.cart-collaterals {
margin-top: 0px;
}
form.woocommerce-cart-form {
max-width: 60%;
float: left;
}
}
@media (min-width: 768px){
.cart-collaterals .cart_totals {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
-webkit-box-flex: 0;
-ms-flex: 0 0 33.33333%;
flex: 0 0 100%;
max-width: 100%;
margin-left: none;
}
.wc-proceed-to-checkout {
text-align: right;
}
}
body.woocommerce-checkout .widget-sections-footer {
display: none;
}
body.woocommerce-checkout .footer-widgets {
display: none;
}
@media (min-width: 768px){
.head-search-form-wrap {
-webkit-box-flex: 0;
-ms-flex: 0 0 70%%;
flex: 0 0 70%%;
max-width: 70%;
}
}
#order_review_heading {
padding-top: 0px;
margin-top: 0px;
border-top: none;
}
body.woocommerce-page input.input-text,body.woocommerce-page textarea.input-text{
word-wrap: break-word;
-webkit-box-direction: normal;
font: inherit;
margin: 0;
appearance: none;
-webkit-font-smoothing: inherit;
background: transparent;
border: 1px transparent solid;
background-clip: padding-box;
border-radius: 5px;
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.9285714286em 0.7857142857em;
word-break: normal;
line-height: inherit;
background-color: white;
color: #333333;
border-color: #d9d9d9;
transition: all 0.2s ease-out;
}
body.woocommerce-page input.input-text:focus,body.woocommerce-page textarea.input-text:focus {
outline: none;
border-color: #111111;
-webkit-box-shadow: 0 0 0 1px #111111;
box-shadow: 0 0 0 1px #111111;
}
a.remove{
border: 1px solid gray;
border-radius:50%;
height:15px !important;
width:15px !important;
color: darkred !important;
font-size:15px !important;
padding:0px 5px;
}
a.remove:hover{
color:red !important;
border-color: red !important;
}
body.woocommerce input.input-text {
word-wrap: break-word;
-webkit-box-direction: normal;
font: inherit;
margin: 0;
appearance: none;
-webkit-font-smoothing: inherit;
background: transparent;
border: 1px transparent solid;
background-clip: padding-box;
border-radius: 5px;
display: block;
box-sizing: border-box;
width: 100%;
padding: 1em 0.8em;
word-break: normal;
line-height: inherit;
background-color: white;
color: #333333;
border-color: #d9d9d9;
transition: all 0.2s ease-out;
font-size: 18px;
}
body.woocommerce label {
color: #737373;
font-size: 0.9em;
}
body.woocommerce-checkout div#order_review {
background: #f5f5f5;
padding: 30px 30px;
border-radius: 10px;
}
#order_review .opc_cart_item td.product-name{
width:100%
}
#order_review .product-quantity {
width: 100px;
text-align: left;
}
#shipping_method label {
width: 120px;
font-weight: 900;
padding-top: 10px;
}
.wc-stripe-gateway-desc {
margin-bottom: 10px;
}
span.wc-stripe-card-icons-container {
padding: 0px 30px;
}
img.wc-stripe-card-icon {
margin: 3px;
}
.navigation-main > li > ul::before {
content: "";
position: absolute;
top: -12px;
right: 10px;
width: 0;
height: 0;
left: unset;
}
body.woocommerce-cart .head-nav, body.woocommerce-checkout .head-nav {
display: none;
}
.woocommerce-checkout-review-order-table tfoot td, .woocommerce-table--order-details tfoot td {
width: 125px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment