Changing cart and check out elements

Support
#1

Hi again,

How do i change all of the X-Theme related areas as seen in the screenshots below? I would like to change the headers font like the ‘Cart’ and ‘Checkout’ examples here, make the grey background bar transparent and also make the background of the blue and pink bars transparent also as well as changing the color of the font in that area too.

I would like to be able to add this styling to all of the top bars that appear in the cart and check out areas that are in the screenshots below and any others that I may of missed.



#2

Hi,

To add styling to those top bars, you can add the code below in Theme Options > CSS

/* title */
.woocommerce-checkout .hentry .entry-title,
.woocommerce-cart .hentry .entry-title {
    font-family: Lato, sans-serif!important;
    font-weight: 700!important;
    word-spacing: 2px!important;
    letter-spacing: 0.2em!important;
    color: #6f6f6f!important;
}
/* title background */
.woocommerce-checkout .entry-header,
.woocommerce-cart .entry-header {
    background: transparent  !important;
}
/* wocommerce alert styling */
.x-alert-info.woocommerce-info {
    font-family: "Roboto",sans-serif;
    background-color: transparent;
    border: 0;
    color: #3a87ad;
    box-shadow:none;
    font-size: 14px;
    text-shadow: none;
}

Change the colors, style and size as you like.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

#3

OK thank you very much, how ever there are still issues as seen in the screen shot supplied. How can I also edit the background colours of the form fields please. I would like them a light grey if possible and may I also ask how I can widen both of the columns on the check out page as the are a little squished. Thanks!

#4

Hi,

To change the colors and widen columns, you can add the code below in Theme Options > CSS

.woocommerce-checkout form input {
   border-color:#000 !important;
   background-color:#eee !important;
}

.woocommerce-checkout  .col2-set {
   min-width:48%;
}

.woocommerce-checkout-review-order {
  min-width:48%; 
}

Hope that helps

#5

Okay great thank you for your help so far however there are still some styling issues. When I click on purchase and the form has not been filled the font in the fields turns to green is there anyway that I can get it either to remain the same color or have it to turn to black instead? And can I also remove the red warning box so that it is just red text please?

And can I also please remove the background boxes on both the added to cart and removed from cart warnings and also possibly change the font colour? Many thanks!

#6

Hello @mode500,

Please remove this code:

And replace it with code instead:

.woocommerce-checkout form input,
.woocommerce-validated input {
   border-color:#000 !important;
   background-color:#eee !important;
   color: black;
}

.woocommerce-checkout  .col2-set {
   min-width:48%;
}

.woocommerce-checkout-review-order {
  min-width:48%; 
}

And to remove the background boxes on both the added to cart and removed from cart warnings and also possibly change the font colour, you can use this code:

.woocommerce-notices-wrapper .woocommerce-message{
    background-color: transparent;
    color: red;
    border: none;
    box-shadow: none;
}

We would loved to know if this has work for you. Thank you.

#7

Okay thanks a lot! You guys are awesome :slight_smile: And one last thing hopefully … I want to be able to change the alert box for the checkout field to be a deeper color than the washy color it is at present with pref #ec373f and a white font please.

#8

Oh and I don’t know whether it is just me (?) or whether it is a default for anyone on my site but I see that the ‘Ship To A Different Address’ is always checked as a default and that the form for that part is always open, I would like it to be unchecked by default so that the form is hidden until the check box is ticked.

Can you please look at this for me and tell me if it just on my side of things or whether it is automatically checked for you also and if it what I need to do to change that default thanks.

#9

Hi,

  1. To change the background color of the allert box, you can add the code below in Theme Options > CSS 
.woocommerce-checkout .x-alert-danger {
    background-color: #ec373f;
    border-color: #DB141E;
    color: #fff;
}
  1. To make it unchecked, you can add the code below in your child theme’s functions.php file
add_filter( 'woocommerce_ship_to_different_address_checked', '__return_false' );

Please note that the codes provided above serves as a guide only and is to help you in getting started. Further customization from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you for understanding

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.