Return to previous page

Change design – shopping/checkout pages

This topic has 27 replies, 4 voices, and was last updated 4 years, 4 months ago ago by Rose Tyler

Giles

Participant

July 11, 2020 at 12:14

Hi, is there any way to add a header, or change colours on this page. See https://prnt.sc/tfubrm

I was just hoping to make it look a bit better.

Thanks,
Giles

Please, contact administrator
for this information.

#244089 Copied Theme version: 6.3.7 WooCommerce version: 4.2.2

26 Answers

Rose Tyler

Support staff

July 11, 2020 at 12:49

Hello,

Theme Options > Breadcrumbs > “Special Breadcrumbs On Cart, Checkout, Order Page” > Off and change other settings there depends on your needs.
Theme Options > Styling > Dark buttons

Regards

#244095 Copied

Giles

Participant

July 11, 2020 at 14:41

Thanks but is there any way to add a header image? something like this maybe https://prnt.sc/tfw7u4

#244113 Copied
Rose Tyler

Support staff

July 11, 2020 at 15:13
Try to add this code in Theme Options > Theme Custom CSS:
```
.cart-checkout-nav,
.cart-checkout-nav .active, 
.cart-checkout-nav .active + .delimeter {
    background-color: #aa0061;
    color: white;
    margin-bottom: 15px;
}
```
Regards
#244118 Copied
Giles

Participant

July 14, 2020 at 09:58

That’s great, thanks. Is there a way to have it FULL WIDTH? And also change the text + links colours?

#244352 Copied

John Holden

Support staff

July 14, 2020 at 17:26

Hi,

1. Full-width

– Unfortunately, this is not an option built into the theme at the moment. We will see if this can be improved in the future.

2. Colors

Try below code

– go to Theme Options > Breadcrumbs

Regards,
Hung PD

#244400 Copied

Giles

Participant

July 22, 2020 at 12:28

Hi , is it possible to just add a heading like this perhaps? https://prnt.sc/tmisw9 and https://prnt.sc/tmitw8

#245031 Copied

Olga Barlow

Support staff

July 22, 2020 at 15:29

Hello,

Go to Pages > edit cart/checkout pages and add heading you need before the cart/checkout shortcode.

Regards

#245067 Copied

Giles

Participant

July 24, 2020 at 12:37

This is what i see when I click edit https://prnt.sc/tntqxi

Should i edit this with Elementor?

Also, is there a way to change the font size on the checkout page https://prnt.sc/tnts9i

#245251 Copied

Giles

Participant

July 24, 2020 at 12:43

I see it’s possible to add a banner – where do i find/edit these? https://prnt.sc/tntwnb

#245252 Copied

Giles

Participant

July 24, 2020 at 12:46

Ah, they are under ‘static blocks’

#245253 Copied

Giles

Participant

July 24, 2020 at 13:28

I’ve add a custom header using static blocks but is it now possible to remove the default header underneath this? see – https://prnt.sc/tnutpd

#245256 Copied

Giles

Participant

July 24, 2020 at 13:33

Sorry for so many emails but i work things out while i’m waiting so some of them can be ignore now.

Essentially i just want to improve the checkout, cart, account pages, et

So the questions are…

1. can i remove the defaut header https://prnt.sc/tnutpd
2. can i chnage the font sizes or make bolder https://prnt.sc/tnts9i
3. is it possible to make this section wider https://prnt.sc/tnux98

Thanks,
Giles

#245257 Copied
Olga Barlow

Support staff

July 24, 2020 at 17:08
Hello,

1) If you want to add any content before/after the cart/checkout form you need to edit the page. If you use Elementor as the main page builder then using Elementor, if WPBakery – WPBakery.
2) Font size of the elements on the checkout page could be changed only by additional CSS customization. You can use Theme Options > Custom CSS for these purposes or Yellow Pencil plugin.
3) Yes, banner to that area you can add using Static Blocks.
4) Edit the cart/Checkout page and choose the Breadcrumbs Style > Disable http://prntscr.com/tnz2i3 or add the custom CSS
```
.cart-checkout-nav {
    display: none;
}
```
5)

is it possible to make this section wider https://prnt.sc/tnux98

Nope, there is no such option. It’s possible only by additional PHP customization if you have appropriate skills.

Regards
#245286 Copied
Giles

Participant

July 24, 2020 at 18:04

thanks for the feedback

1. so i have to edit this shortcode? https://prnt.sc/tnzzj1

How would i do this? I just need to remove this header text

#245296 Copied

Giles

Participant

July 24, 2020 at 18:09

2. Is there any CSS you could give me to make the font bigger perhaps? Or even the form fields. They just need to be a darker colour.

#245298 Copied

Giles

Participant

July 24, 2020 at 18:23

Just left a review by the way. It’s the least i can do with this amazing support. 🙂

#245300 Copied

John Holden

Support staff

July 25, 2020 at 06:19

Hi,

Thank you so much for your reviews

1. Go to Theme Options > Breadcrumbs https://prnt.sc/to8b7w

2. Please describe more in the screenshots

Regards,
Hung PD

#245335 Copied

Giles

Participant

July 27, 2020 at 19:35

Hi ,thanks for this but the problem is i need them for the other pages such as https://www.web-design-hosting-surrey.co.uk/skinsense-test/product/firming-neck-decollete-cream-100ml/

is there a way to remove them just from the cart, checkout pages ?…
https://www.web-design-hosting-surrey.co.uk/skinsense-test/cart/
https://www.web-design-hosting-surrey.co.uk/skinsense-test/checkout/

Let me know what you think.

Thanks,
Giles

#245614 Copied

Giles

Participant

July 27, 2020 at 19:40

I found a way to remove the large version but the small versuon still shows https://prnt.sc/tpgrk4

Maybe there is a way to move this to the top of the page?

#245615 Copied

Olga Barlow

Support staff

July 28, 2020 at 14:13

Hello,

Remove the banner before the breadcrumbs http://prntscr.com/tpwufr and edit the page using Elementor and add the necessary content before the checkout form http://prntscr.com/tpww6g
If you want to disable the breadcrumbs for the cart/checkout page you can do this in the page settings http://prntscr.com/tpwx2x

Regards

#245670 Copied

Giles

Participant

July 28, 2020 at 15:54

thanks but not sure this will work

so i want to KEEP the banner i designed in elementor, but i want to lose the bread crumbs ONLY on the CART and CHECKOUT pages because I want to keep them on ALL other pages.

make sense?

#245697 Copied

Olga Barlow

Support staff

July 28, 2020 at 16:07

Hello,

If you want to disable the breadcrumbs for the cart/checkout page you can do this in the cart/checkout page settings http://prntscr.com/tpwx2x

Regards

#245704 Copied

Giles

Participant

July 28, 2020 at 16:55

Ah great! It was actually quite simple then . I just needed to do it on that individual page, ratehr than globally. Thanks!

#245712 Copied

Giles

Participant

July 28, 2020 at 17:06

Sorry, just one quick thing – how do i remove this now https://prnt.sc/tq0dy1

#245720 Copied

Giles

Participant

July 28, 2020 at 17:27

I worked it out. it’s just you can add this content on the page OR you can do it with static blocks. thanks

#245728 Copied

Rose Tyler

Support staff

July 29, 2020 at 07:25

Hello,

We are glad that you sorted out.

Regards

#245760 Copied
Viewing 27 results - 1 through 27 (of 27 total)