Return to previous page

Changing buttons and displays in cart - by Darja

This topic has 12 replies, 3 voices, and was last updated 5 years, 3 months ago ago by Rose Tyler

Darja

Participant

August 6, 2019 at 16:54

Hello,

We would like to modify the color and the text of notices that pop-up when you add the product to cart or modify it and also the colors of two buttons (the needed changes are attached in screenshots). Where can we make these modifications?

Best regards

Please, contact administrator
for this information.

#218598 Copied Theme version: 5.4.1 WooCommerce version: 3.6.5

11 Answers

Olga Barlow

Support staff

August 6, 2019 at 18:07

Hello,

1) Provide mockups(screenshots) of the notices that you want to implement. We don’t have special options to edit these notices and it could be implemented by additional customization. To give you correct CSS code I need to know the final result you want to achieve.

2) Styles of the different types of the buttons you can change in Theme Options > Styling > http://prntscr.com/op68x4

Regards

#218601 Copied

Darja

Participant

August 7, 2019 at 09:48

Thank you for the quick response.

1. I am attaching the look we want to achieve with the boxes.

2. The buttons worked well, except the add to cart and the buttons in cart – they have the border but we put all the borders to none. Are the settings for those somewhere else?

Best regards and thank you for your help

Please contact administrator
for this information.

#218629 Copied
Olga Barlow

Support staff

August 7, 2019 at 11:12
Hello,

1) Customize the code according to the message type that you want to style.
```
.woocommerce-message {    
    background-color: #ddc178;
    font-size:18px;
    border-top: none !important;
    display: flex !important;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding-left: calc(1.8em + 25px);
}
.woocommerce-message .button {
    background-color: #fff !important;
    padding: 7px 15px;
    margin-left: auto;
    font-size: 16px;
    text-decoration: none;
}
.woocommerce-message:before {
    color: #ffffff;
    font-size:25px;
}
```
2) Add the border width 0. There is default border for the buttons that’s why you set borer-width 0 to remove it.

Regards
#218644 Copied
Darja

Participant

August 7, 2019 at 12:53

Thank you the CSS worked perfectly.

One more question regarding the cart – we would like to remove/hide return to the shop, update the cart and some shipping text (picture in the attachment)

Best regards and thank you for your help

Please contact administrator
for this information.

#218664 Copied

Rose Tyler

Support staff

August 7, 2019 at 13:13

Could you, please, provide URL of the cart page?

Regards

#218668 Copied

Darja

Participant

August 7, 2019 at 13:48

Our website is still on local server

#218671 Copied
Rose Tyler

Support staff

August 7, 2019 at 14:15
Please try this custom CSS code:
```
.woocommerce-cart .woocommerce-shipping-destination,
.woocommerce-cart .actions .mob-center button, .woocommerce-cart .return-shop {
    display: none;
}
```
Regards
#218675 Copied
Darja

Participant

August 7, 2019 at 17:05

Thank you for all your support, it worked perfectly.

#218694 Copied

Rose Tyler

Support staff

August 8, 2019 at 07:02

You’re welcome!

Regards

#218703 Copied

Darja

Participant

August 8, 2019 at 07:48

One more question regarding the art: is it possible to just display the quantity without having the – and + button next to it (screenshot in attachment)?

Please contact administrator
for this information.

#218710 Copied
Rose Tyler

Support staff

August 8, 2019 at 07:56
```
.woocommerce-cart-form__cart-item div.quantity .minus, 
.woocommerce-cart-form__cart-item div.quantity .plus {
    display: none;
}
.woocommerce-cart-form__cart-item .quantity input[type="number"] {
    border-left: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
}
```
Regards
#218714 Copied
Viewing 12 results - 1 through 12 (of 12 total)