Easily Customize the WooCommerce Cart Without Plugins

Published: February 1, 2023

Introduction:

Customizing the appearance of your WooCommerce cart page doesn’t have to be complicated. With a few CSS adjustments, you can achieve a personalized and visually appealing cart layout without relying on plugins or complex code editing. In this article, we’ll explore how you can easily customize the WooCommerce cart page using simple CSS adjustments, without the need for additional plugins or PHP coding.

/*******STRUCTURAL LAYOUT*******/

@media (min-width: 980px){
  form.woocommerce-cart-form {
      float: left;	
      width: 63%;
      margin-bottom: 0;
      margin-right: 2%;
  }
  
  .cart-collaterals {
      float: left;	
      width: 35%;
  }
  }
  
  /*Cart Summary Margin*/
  @media(max-width: 979px) {
    form.woocommerce-cart-form {
      margin-bottom: 2em;
  }
  }

/*******LEFT SIDE*******/
  
  /*Container Styles*/
  form.woocommerce-cart-form {
      padding: 3em;
      background: white;
      border-radius: 1em;
  }
  
  /*Coupon Area Styles*/
  [class*=woocommerce] .cart .actions .coupon > input[type=text] {
      width: 100%;	
      max-width: none;
      margin-bottom: 0px;
  }
  
  input#coupon_code {
      height: 50px;
      margin-right: 1em;
  }
  
  button.button.wp-element-button {
      height: 50px;
      background: none;
      color: rgb(90,44,255);
      font-size: 1em;
      width: 100%;
  }
  
  button.button.wp-element-button:hover {
      text-shadow: none;
      border: 1px solid rgb(90,44,255);
      opacity: 0.7;
  }
  
  [class*=woocommerce] .cart .actions .coupon {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      padding-top: 1.25em;
      flex-direction: row;
      align-items: center;
  }

/*******RIGHT SIDE*******/
  
  .cart-collaterals {
      padding: 3em;
      background: #f7f8fa;
      border-radius: 1em;
      box-shadow: 0em 0.5em 2em 0em rgb(0 0 0 / 30%);
      margin-top: 0em;
  }
  
  
  [class*=woocommerce] .cart-collaterals .cart_totals {
    margin-top: 0;
  }
  
   /*Form Field Focus Color Style*/
   textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=date]:focus, input[type=month]:focus, input[type=time]:focus, input[type=week]:focus, input[type=number]:focus, input[type=email]:focus, input[type=url]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=color]:focus, .uneditable-input:focus {
       border-color: #4e22e9; /*Change this to a color that best suits your design*/
       box-shadow: none;
       outline: 0;
   }
  
  [class*=woocommerce] .cart-collaterals .cart_totals h2 {
    display: none;
  }
  
  table th, table td {
      border-top: none;
      text-transform: uppercase;
      color: #4a4a4a;
  }
  
  [class*=woocommerce] .cart-collaterals table th {
    padding: 1em;
  }
  
  
   /*Order Total Line Item Styles*/
   tr.order-total {
       color: #0049ff; /*Accent color for total if desired*/
       background: #0049ff21; /*Accent background color if desired*/
   }
  
  a.checkout-button.button.alt.wc-forward.wp-element-button {
      width: 100%;
      color: #fff;
       border: none;
       box-shadow: rgba(0, 0, 0, 0.28) 0px 2px 8px 0px;
       padding: 1.5em;
      margin-top: 1em;
      text-transform: uppercase;
      font-size: 1em;
  }

/*******ALERT STYLES*******/
  
  
   /*Error Alert*/
   .woocommerce-error {
       background-color: #ff7e7e;
       border: none;
       color: #761f1f;
   }
   
   .woocommerce-error, .woocommerce-info, .woocommerce-message {
     text-shadow: none;
   }

Customizing the WooCommerce Cart with CSS:

By making use of CSS, you can easily customize the structural layout, styles, and alerts of your WooCommerce cart page. Let’s break down the provided CSS code and explain its purpose in simple terms:

Structural Layout:

The CSS code begins by defining the structural layout of the cart page, ensuring a visually balanced design. It specifies the positioning and width of the form and cart summary sections, allowing for better organization and readability on larger screens.

Left Side Customization:

The CSS then focuses on customizing the left side of the cart page, including the container styles, coupon area, and form field styles. These adjustments allow you to modify the background, padding, border radius, input widths, and button styles, creating a visually appealing and user-friendly cart layout.

Right Side Customization:

Next, the code moves on to customizing the right side of the cart page, specifically the cart collaterals section. It adjusts the padding, background color, border radius, and shadow to enhance the visual appearance of this section. It also modifies the order total line item styles and customizes the checkout button, making it wider, adding box-shadow, and adjusting the text styling.

Alert Styles:

The CSS includes styles for error alerts, ensuring that they stand out and are easily noticeable. By modifying the background color, border, and text color, you can create a visually distinct alert style for error messages.

Conclusion:

Customizing the WooCommerce cart page is made simple with CSS adjustments. By leveraging the provided CSS code, you can easily modify the layout, container styles, form fields, order total styles, checkout button appearance, and alert styles. Embrace the freedom to create a personalized and visually appealing cart page for your WooCommerce store without the need for plugins or complex coding.