Return to previous page

Editing The Top Section For The Cart Page

This topic has 21 replies, 3 voices, and was last updated 2 years ago ago by Tony Rodriguez

TFS

Participant

November 3, 2022 at 02:13

Hello,

Can we edit the top section which appears on the cart page?

It is currently

SHOPPING CART – CHECKOUT – ORDER STATUS and the background it grey in color. There is also text saying; You are out of time! Checkout now to avoid losing your order!

– Can we change the text, color, and add images there?

Thanks for your help!

#337766 Copied Theme version: 8.3.35

20 Answers

Tony Rodriguez

Support staff

November 3, 2022 at 06:30

Hello, @TFS,

1. For changing those words, you have to change in the theme language files, you can use the Loco translate plugin for it, https://www.8theme.com/documentation/xstore/theme-translation/base-theme-translation/

Like:

https://postimg.cc/gwW7VC5L
https://postimg.cc/jwkvFm8X
https://postimg.cc/JyYbrJb7
https://postimg.cc/yWZFKDWB
https://postimg.cc/VJYMX4gL

2. For changing the color and placing the image, we have to check it on your site, and we need your site WP Admin URL and Credentials in the private content area of this topic and the screenshot as well what exactly you want?

Regards 8Themes Team.

#337784 Copied

TFS

Participant

November 3, 2022 at 16:43

Hello Tony,

1) Thanks!
Just to make sure this will just change the “words” and this wont effect anything else? Also Loco translate, it sounds like a language plugin? Is this a language plugin?

2) The domain name is on the private area content.

I would like to make it more “appealing”

Can you show me the steps on how I can edit the section?
Is there any blocks for this section?

I would want to do something like;

1) Space the words a little down from the menu bar.
2) Add a logo on the left side side.
3) Make the color something different for the background such as black.
4) Change the text “You are out of time! Checkout now to avoid losing your order!” to something else.
5) Move the text of “shopping cart – checkout – order status” more to the right side.

Thanks for your help!

4)

Please contact administrator
for this information.

#337823 Copied
Tony Rodriguez

Support staff

November 4, 2022 at 07:34
Hello, @TFS,

1. Yes it will only change the words and will not affect anything else.
And yes Loco translate is the language plugin.

2. Points listed below:

2.1: Space the words a little down from the menu bar.

You can use the below given CSS code under XStore >> Theme Settings >> Theme Custom CSS >> Global and it will work for you like this: https://postimg.cc/dLyZvc7T
```
.cart-checkout-nav {
    padding: 5vw 0 !important;
}
```
2.2: Unfortunately this is not possible to place the logo before those words, there is no such option for it.

2.3: Make the color something different for the background such as black.

You can use the below given CSS code under XStore >> Theme Settings >> Theme Custom CSS >> Global and it will work for you like this: https://postimg.cc/HczRVNVw
```
.cart-checkout-nav {
    background-color: #000 !important;
}
.cart-checkout-nav .active {
    color: #fff !important;
}
```
4.3.Change the text “You are out of time! Checkout now to avoid losing your order!” to something else.

You can change it from XStore >> Dashboard >> Sale Booster >> Cart/Checkout Pages: https://postimg.cc/p98dyrmt

4.4.Move the text of “shopping cart – checkout – order status” more to the right side.

You can use the below given CSS code under XStore >> Theme Settings >> Theme Custom CSS >> Global and it will work for you like this: https://postimg.cc/SJDzrs7h

.cart-checkout-nav {
text-align: right !important;
}

Regards 8Themes Team.
#337856 Copied
TFS

Participant

November 9, 2022 at 23:56

Hello Tony,

Is there any other way to change the top text or is this loco translate the only way? Not sure why a translation plugin is needed?

Thanks for your help!

#338235 Copied

Tony Rodriguez

Support staff

November 10, 2022 at 06:04

Hello, @TFS,

Unfortunately, there is no other way, The other way will be a hardcode in the theme core files but that will affect your site and also it will change after every update, so it’s not safe, the safest one is to change in the language files.

Regards 8Themes Team.

#338243 Copied

TFS

Participant

November 10, 2022 at 11:58

Hello Tony,

Thanks!
I will look at the instructions.

Can I also use this plugin to add more languages such as French and Spanish?

#338268 Copied

Rose Tyler

Support staff

November 11, 2022 at 03:37

Hello, @TFS,

If you want to create the multilanguage site you need a special plugin for these purposes https://colorlib.com/wp/wordpress-multilingual-plugins/ Support of the plugin should guide you.

Regards

#338337 Copied

TFS

Participant

November 19, 2022 at 07:07

Hello,

Thanks a ton guys for the help. Best help I have gotten from any theme.
I just have some more questions

1) How can I change the color of the number which are on the top. 1 for the shopping cart, 2 for the checkout, and 3 for the order status. I would want to make the colors something else.

2) How can I change the color for the text; shopping cart, checkout and order status?

3) When I remove an item from the cart, it says “—” has been removed. How can I edit the color for the bar? It currently is a green bar.

4) When the cart is empty it shows the following;

YOUR SHOPPING CART IS EMPTY
We invite you to get acquainted with an assortment of our shop. Surely you can find something for yourself!

Return To Shop

How can I change the text, color, button color for this section. Can I also add something such as an image?

5) The bar color for the free shipping meter (on the cart section) “spend — to get free shipping” – how can I edit the bar color. Right now it is green.

6) How can I edit the hover color text for the items in the cart.
For example; I have the AIR FRYER WITH DUAL ZONE, and when I hover over it – it becomes orange. I want to change this color.

7) There is a coupon code section in the cart page, how can I edit the text? It says “Coupon code” but I would like something different.

8) The coupon code has a button which says “ok”, when I hover over it – it becomes orange. How can I change the color?

9) There is a “clear shopping cart” button – how can I change the color?

10) There is a “proceed to checkout” button – how can I change the color?

11) There is a “continue shopping” button – how can I change the color?

12) There is a section called “Payment security” can this be edited?

Thanks a lot guys!

#338881 Copied
Tony Rodriguez

Support staff

November 19, 2022 at 10:35
Hello, @TFS,

1. Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://ibb.co/61Vssc9
```
.cart-checkout-nav .active:before {
    color: green !important;
    background-color: yellow !important;
}
```
2. Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://ibb.co/37j2xqg
```
.cart-checkout-nav a {
    color: red !important;
}
```
3. Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://ibb.co/9vSc7Mm
```
.woocommerce-cart.special-cart-breadcrumbs.woocommerce-cart .woocommerce-message:first-child {
    background-color: red !important;
}
```
4. Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://ibb.co/CnFGfrW
```
.woocommerce-cart .cart-empty.empty-cart-block h1 {
    color: red !important;
}
.woocommerce-cart .cart-empty.empty-cart-block p {
    color: green !important;
}
.woocommerce-cart .cart-empty.empty-cart-block a.btn.black.wp-element-button {
    background-color: orange !important;
}
```
5. Unfortunately, this is not possible to change the color using the Custom CSS so this requires extra Customization.

6. Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://ibb.co/gy72KNk
```
.woocommerce-cart table.cart .product-details .product-title:hover {
    color: green !important;
}
```
7. You have to change/translate it into the Theme and WooCommerce plugin language files using the Loco Translate plugin: https://www.8theme.com/documentation/xstore/theme-translation/base-theme-translation/

8. Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://ibb.co/h276Nfj
```
.woocommerce-cart .actions.clearfix input.btn.wp-element-button:hover {
    background-color: green !important;
}
```
9. Do you want to change the color of that button OR the button hover background color?

10. Please copy and paste the below given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://ibb.co/N9YCm43
```
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward.wp-element-button {
    background-color: yellow !important;
    color: red !important;
}
```
11. Do you want to change the color of that button OR the button hover background color?

12. In order to solve your issue Simply navigate to Dashboard >> Static Blocks >> All Static Block >> Edit the Cart page block. See the image for a better reference: https://ibb.co/s5ts91X and edit it as per your requirements: https://ibb.co/Ns92WB5

Regards 8Themes Team.
#338900 Copied
TFS

Participant

November 21, 2022 at 20:08

5. Unfortunately, this is not possible to change the color using the Custom CSS so this requires extra Customization.

– Hello Tony, my bar is showing as blue but on the demo it is green? Is there a way to choose?

7) 7. You have to change/translate it into the Theme and WooCommerce plugin language files using the Loco Translate plugin: https://www.8theme.com/documentation/xstore/theme-translation/base-theme-translation/

– Hello Tony, to confirm – the coupon code bars text “Coupon code” cannot be changed without the use of the translate plugin?

9. Do you want to change the color of that button OR the button hover background color?

– Hello Tony, is there a way to edit the color once hovered over?

11. Do you want to change the color of that button OR the button hover background color?

– Hello Tony, is there a way to edit the color once hovered over?

Thanks once again!

Please contact administrator
for this information.

#339118 Copied

TFS

Participant

November 21, 2022 at 20:10

Hello Tony,

For #10

I changed the color to red, is there any way to get a color change when it is hovered over?

I noticed that in the demo; https://xstore.8theme.com/elementor/demos/niche-market02/cart/

Once the proceed to checkout button (which is black) is hovered over, it gives a slight white colored “glare/change”

Is there a way to add that to other colors?

#339119 Copied
Tony Rodriguez

Support staff

November 22, 2022 at 06:14
Hello, @TFS,

5. Ok, I have tried and created the Custom CSS fix for it, Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://postimg.cc/0bmTnTk7
```
.woocommerce-cart .et-cart-progress .et_cart-progress-bar::-webkit-progress-value{
background-color: blue !important;
}
```
7. Unfortunately, this is not possible without Custom Code or translation.

9. Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://postimg.cc/tYKxQxGL
```
.woocommerce-cart form.woocommerce-cart-form .actions.clearfix .col-md-6.col-sm-6.mob-center a.clear-cart.btn.bordered:hover {
    background-color: orange !important;
}
```
11. Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements: https://postimg.cc/T5rXKFhj
```
.woocommerce-cart a.return-shop.button.btn.bordered.full-width:hover {
    background-color: orange !important;
}
```
10. Please copy and paste the below-given CSS code to XStore >> Theme Settings >> Theme Custom CSS >> Global CSS and check back your site after clearing the browser cache, you can change the color in the given code as per your requirements.
```
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt.wc-forward.wp-element-button:hover {
    background-color: orange !important;
    color: red !important;
}
```
Regards 8Themes Team.
#339141 Copied
TFS

Participant

November 23, 2022 at 03:53

Hello Tony,

5) I have added the code but the color does not change?
I want to add this custom code color; #D40000

7) Great, so I will need to add the plugin first.
Is there any steps on how I can change the words after? Should I Start a new topic for this?

9) I have added this as well, but it does not work?
I want to add this custom code color; #D40000

10) I have added this as well, but it does not work?
I want to add this custom code color; #D40000

11) I have added this as well, but it does not work?
I want to add this custom code color; #D40000

#339302 Copied

TFS

Participant

November 23, 2022 at 03:54

I added the code on the additional CSS section

#339303 Copied

TFS

Participant

November 23, 2022 at 04:49

Hello Tony,

Sorry, everything is working except the progress bar color. That is still showing as blue. Anyway to change it to the following color? #D40000

#339305 Copied
Tony Rodriguez

Support staff

November 23, 2022 at 06:27
Hello, @TFS,

Sound’s Good!! that your all issues have been solved.

And Regarding the Progress Bar color issue: I have tested it on your site and it is working fine: https://postimg.cc/yWzj6Njq
```
.woocommerce-cart .et-cart-progress .et_cart-progress-bar::-webkit-progress-value{
background-color: #D40000 !important;
}
```
I have tested the same code on my test site and working fine too: https://postimg.cc/Q9ZQM6pg

Regards 8Themes Team.
#339329 Copied
TFS

Participant

November 23, 2022 at 19:29

Hello Tony,

I added that to the custom CSS section and it does not work.

Any suggestions for this?

I have added this code;

.woocommerce-cart .et-cart-progress .et_cart-progress-bar::-webkit-progress-value{
background-color: #339438 !important;
}

#339414 Copied

Tony Rodriguez

Support staff

November 24, 2022 at 05:27

Hello, @TFS,

Could you please share your site WP Admin URL and Credentials with me here in this topic private content area, so that I will further check it for you on your site and help you out?

Regards 8Themes Team.

#339429 Copied

TFS

Participant

November 24, 2022 at 14:42

Hello Tony,

I can see that it works on one computer but not on the other.

Can you check what color it shows when you access it from your end? 🙂

Thanks for your help!

#339506 Copied

Tony Rodriguez

Support staff

November 24, 2022 at 14:48

Hello, @TFS,

Sound’s Good!! so it must be the cache issue on the computer it is not working for you, well for me, it is still showing green, seems I have the cache too 🙂 OR please try clear your site cache and server cache and check back.

Regards 8Themes Team.

#339508 Copied
Tagged: best, cart, editing, page, persuasive, selling, themes, woocommerce
Viewing 21 results - 1 through 21 (of 21 total)