Change design – shopping/checkout pages

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

  • Avatar: Giles
    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.
    26 Answers
    Avatar: Rose Tyler
    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

    Avatar: Giles
    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

    Avatar: Rose Tyler
    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

    Avatar: Giles
    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?

    Avatar: John Holden
    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

    Avatar: Giles
    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

    Avatar: Olga Barlow
    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

    Avatar: Giles
    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

    Avatar: Giles
    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

    Avatar: Giles
    Giles
    Participant
    July 24, 2020 at 12:46

    Ah, they are under ‘static blocks’

    Avatar: Giles
    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

    Avatar: Giles
    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

    Avatar: Olga Barlow
    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

    Avatar: Giles
    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

    Avatar: Giles
    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.

    Avatar: Giles
    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. 🙂

    Avatar: John Holden
    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

    Avatar: Giles
    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

    Avatar: Giles
    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?

    Avatar: Olga Barlow
    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

    Avatar: Giles
    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?

    Avatar: Olga Barlow
    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

    Avatar: Giles
    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!

    Avatar: Giles
    Giles
    Participant
    July 28, 2020 at 17:06

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

    Avatar: Giles
    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

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 29, 2020 at 07:25

    Hello,

    We are glad that you sorted out.

    Regards

  • Viewing 27 results - 1 through 27 (of 27 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.