How to change styles in Checkout page - by Kathy

This topic has 15 replies, 3 voices, and was last updated 9 years, 10 months ago ago by Eva Kemp

  • Avatar: kathycb
    Kathy
    Participant
    January 23, 2015 at 16:56

    Can you tell me where the stylesheets/styles are that control the look of the checkout page ? Specifically, the first paragraph for returning customers. And then later on – the Additional Information — Order Notes are; where would I find the code to modify the default text that is in the box, ‘Notes about your order…”

    Here’s a link: https://fabiusindoorsports.com/checkout/

    Thankyou

    14 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    January 23, 2015 at 19:54

    Hello,

    The text “Notes about your order…” can be changed in the file wp-content/plugins/woocommerce/includes/class-wc-checkout.php (line 116).
    And the text for returning customer is placed in the file wp-content/plugins/woocommerce/templates/checkout/form-login.php.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: kathycb
    Kathy
    Participant
    January 24, 2015 at 01:22

    Thank you —

    One more – sorry to piecemeal this; can you tell me in the Billing Details area if (and where) I can change the state size dropdown to be smaller (it’s quite large); and delete the second address line (apartment, etc.)?

    Avatar: Eva
    Eva Kemp
    Support staff
    January 24, 2015 at 01:53

    Hello,

    Add this code in custom.css file:

    .woocommerce-checkout .form-row .chosen-container-single .chosen-single, .woocommerce-checkout .form-row .chosen-container .chosen-drop {
        width: 300px !important;
    }
    p#billing_address_2_field input {
      display: none;
    }

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: kathycb
    Kathy
    Participant
    January 26, 2015 at 20:40

    Neither of those edits changed anything; any other suggestions?

    Avatar: Robert Hall
    Robert Hall
    Support staff
    January 26, 2015 at 20:47

    Hello,

    Please provide us with link to the page and wp-admin access in Private Content.

    Regards,
    Robert Hall.

    Avatar: kathycb
    Kathy
    Participant
    January 27, 2015 at 17:19

    Please see below

    Please, contact administrator
    for this information.
    Avatar: kathycb
    Kathy
    Participant
    January 27, 2015 at 17:49

    Can you also provide instruction to fix the ‘Returning Customer Click here to login’ on the Checkout page? The show/hide functionality isn’t working.

    Avatar: Eva
    Eva Kemp
    Support staff
    January 27, 2015 at 19:11

    Hello,

    In the code you added previously in custom.css } was missed, that’s why other code that was added after, wasn’t recognized. I’ve added } and now the changes are visible on the Checkout page. Please check.

    Could you clarify concerning “Returning Customer Click here to login”?
    What exactly do you want to do?

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: kathycb
    Kathy
    Participant
    January 27, 2015 at 19:32

    I can’t believe I missed the ‘}’, I’m sorry to waste your time with that issue!!

    About the other issue — if you are not logged in and get to the checkout page, you see wording, “Returning Customer? Click here to login” — with the login user name/password boxes displayed.

    If you click on the ‘Click here to login‘ (it is a link); the login user name/password boxes disappear.

    I’m thinking the issue is a show/hide thing that isn’t working correctly; where the user is just supposed to see ‘Returning Customer? Click here to login‘ — and upon clicking the link, the login user name/password boxes appear.

    Does this explain better?

    Avatar: Eva
    Eva Kemp
    Support staff
    January 27, 2015 at 19:48

    Hello,

    “Click here to login” form fields are already opened by default on the Checkout page:
    http://i.imgur.com/mOC1aAO.png

    When you click that link again the form is hidden when you click it once more the form is shown again.

    Please check.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: kathycb
    Kathy
    Participant
    January 27, 2015 at 19:55

    Is there anyway to make the default hidden and have the login display upon clicking link to login? It’s confusing to my users.

    Avatar: Eva
    Eva Kemp
    Support staff
    January 27, 2015 at 20:03

    Hello,

    This form is loaded from Woocommerce plugin folder and you need contact their support to modify that block.

    Thank you.
    Regards,
    Eva Kemp.

    Avatar: kathycb
    Kathy
    Participant
    January 28, 2015 at 14:37

    OK, thank you for all your help with me!

    Avatar: Eva
    Eva Kemp
    Support staff
    January 28, 2015 at 17:05

    Hello,

    You’re welcome.

    Regards,
    Eva Kemp.

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

The issue related to '‘How to change styles in Checkout page’' has been successfully resolved, and the topic is now closed for further responses

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