Checkout

Resolved tkoleola
(@tunde84)

4 years, 9 months ago

WOOCOMMERCE CHECKOUT

Please excuse my technical ignorance as we have recently had a website developed which still has a number of issues we are trying to resolve. I am trying to tackle these issues myself, if possible.

The post in this forum relates to the checkout as follows:

1. Customer adds product to the basket, then go to the checkout to make payment. A message appears on the screen which reads as follows:

[Product name] “Susie Babydoll Black” has been added to your basket.

We would like to remove this message, and have it not appear on the screen – please could someone help with this issue please

2. The section heading titled ‘BILLING DETAILS’ is a total different font/size as the other sections. Please could you kindly help with how we make it the same as the other sections

3. The black form field outline is to thick, how do we reduce this to the same style as the field for promo code

Sorry for the multiple questions but any assistance on any of these would be welcome. Please also note I will need very basic instructions as to how to resolve.

Thanks

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Peter Lawrenson
(@lorro)

4 years, 9 months ago
1. Don’t know.

2. Try this custom css:
```
.woocommerce-billing-fields h3 {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}
```
3. In Additional CSS at Dashboard > Appearance > Customize, look for and remove this bit (near the bottom)
```
.woocommerce-input-wrapper input[type=text], .woocommerce-input-wrapper .select2-selection {
  border: 2px solid #000 !important;
}
```
Mirko P.
(@rainfallnixfig)

4 years, 9 months ago
Hey @tunde84,

Thanks for reaching out on the WooCommerce forum.

We would like to remove this message, and have it not appear on the screen

This can be achieved with some custom CSS. Under Appearance > Customize > Additional CSS, you can add the following code:
```
/* Remove item added to your basket message on checkout */
.woocommerce-checkout .woocommerce-message {
visibility: hidden;
}
```
The section heading titled ‘BILLING DETAILS’ is a total different font/size as the other sections. Please could you kindly help with how we make it the same as the other sections

You can use this CSS here:
```
/* Make section heading Billing Details on checkout same style as other section headings */
.oxy-ou-billing-form .woocommerce-billing-fields h3 {
font-size: 18px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
}
```
The black form field outline is to thick, how do we reduce this to the same style as the field for promo code

See if this is working for you:
```
/* change border thickness and color */
.woocommerce-input-wrapper input[type=text], .woocommerce-input-wrapper .select2-selection {
border: 1px solid #d3ced2 !important;
}
```
If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools.com. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Hope this helps.

Update: Thanks so much @lorro for your help here. While I was busy checking CSS I didn’t notice you were also writing on the thread 🙂
- This reply was modified 4 years, 9 months ago by Mirko P..
Thread Starter tkoleola
(@tunde84)

4 years, 9 months ago

Many thanks Mirko and Lorro, this has resolved the issue!

Thanks for all your help

Tunde

Mirko P.
(@rainfallnixfig)

4 years, 9 months ago

Many thanks Mirko and Lorro, this has resolved the issue!

You’re welcome! Happy to hear we’ve been helpful.

If you have further questions feel free to open a new thread.

Cheers.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Checkout’ is closed to new replies.