Custom CSS for WooCommerce Checkout Page (for Themeless & Hello Theme users)

If you are a Hello Theme or Themeless user currently using WooCommerce, you’ll love this useful gem. We’ve put together this Custom CSS for your checkout page which will help make things look a bit sexier 🙂

To use this CSS, simply open up your Checkout page using Elementor Page Builder. Then navigate to your Advanced tab –> Custom CSS and copy/paste the following CSS as seen in this video:

/* WC Checkout Page Custom CSS by Charles TheCoder v1.3 */

/* 2 COLUMN SETTINGS */

@media (min-width: 981px) {
  .woocommerce { overflow: hidden;}
  .woocommerce:after { clear: both; }
  .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 { width: 100%; }
  .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2 { display: none; }
  .woocommerce .col2-set, .woocommerce-page .col2-set { float:left; width: 48%; }
  #order_review_heading, .woocommerce #order_review, .woocommerce-page #order_review {
    float: left;
    width:48%;
    margin-left: 2%;
  }
}
 
/* Rounded corners on the WooCommerce "alert" messages */
.woocommerce-error, .woocommerce-info, .woocommerce-message { border-radius: 5px; }
 
/* Section Titles */
 
h3 {
    font-size: 1.75rem;
    color: #d63663;
}
 
/* FORM STYLING */

.select2-container .select2-selection--single { height: 40px; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  color: #4e4e4e;
  font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 8px; }
.select2-container--default .select2-selection--single {
  background-color: rgba(0, 1, 0, 0.01);
  border: none;
}
 
.elementor-widget-text-editor {
    color: #492f70;
    font-family: "Roboto", Sans-serif;
    font-weight: 400;
}
 
/* YOUR ORDER FIELD TITLES */

table th {
    font-weight: bold;
    color: #492f70;
}

/* PAYMENT METHOD AREA*/

.woocommerce-checkout #payment { background: rgba(0, 1, 0, 0.01)!important; }
.woocommerce-checkout #payment ul.payment_methods { border: none; }

/* PLACE ORDER BUTTON CUSTOMIZATION */
 
#place_order {
  background-image: linear-gradient(90deg,#d63663 0%,#492f70 100%)!important;
  border: transparent;
  color: #fff;
  box-shadow: rgba(0, 0, 0, 0.30) 0px 2px 8px 0px;
  padding: 10px;
}
 
#place_order:hover { background-image: linear-gradient(90deg,#492f70 0%,#d63663 100%)!important; }

input.text, input.title, input[type="email"], input[type="password"], input[type="tel"], input[type="text"], select, textarea {
    border: none;
    color: #010101;
    height: 50px;
    width: 100%;
}

.woocommerce form .form-row textarea, .woocommerce input[type="email"], .woocommerce input[type="number"], .woocommerce input[type="password"], .woocommerce input[type="reset"], .woocommerce input[type="search"], .woocommerce input[type="tel"], .woocommerce input[type="text"], .woocommerce input[type="url"], .woocommerce textarea, .woocommerce-page form .form-row textarea, .woocommerce-page input[type="email"], .woocommerce-page input[type="number"], .woocommerce-page input[type="password"], .woocommerce-page input[type="reset"], .woocommerce-page input[type="search"], .woocommerce-page input[type="tel"], .woocommerce-page input[type="text"], .woocommerce-page input[type="url"], .woocommerce-page textarea {
    border-color: #ddd;
    background: #f0f0f0;
    box-shadow: none;
    border-radius: 0;
}

Responses

Your email address will not be published. Required fields are marked *