Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 15, 2022 at 6:55 pm #1376282
    conlcoa

    I would like to do a few minor layout changes to checkout page. I just don’t know how to accomplish this.

    What I’m trying to find/learn is where to adjust the html and some of the text.
    For example:
    1) I have a checkbox requiring acknowledgment of the terms and conditions. I REALLY need to move this above the payment options so it is checked before selecting payment. It’s in the same section, but I don’t know how to move it.
    2) I’d like to change the words “Ship to a different address” that is part of the Billing Details.

    I know how to adjust the CSS.
    I’ve looked at plugins, but all they do is change the fields (on, off, order).
    I’m looking for how to manage the layout.

    Is there a template for the checkout page?
    Is there a file I could open in Dreamweaver?
    If so, where is it?

    Thanks!

    • This topic was modified 2 years ago by conlcoa.
    December 17, 2022 at 4:34 pm #1376479
    Rikard

    Hey conlcoa,

    Maybe you could use one or more hooks to achieve that? https://www.businessbloomer.com/woocommerce-visual-hook-guide-checkout-page/

    Best regards,
    Rikard

    December 18, 2022 at 12:14 am #1376547
    conlcoa

    Thanks Rikard, can you give me any advise on how that will determine it’s location within the page? I want to move the necessary components just a little. Isn’t there a template somewhere?

    December 18, 2022 at 12:45 pm #1376575
    Rikard

    Hi,

    Those templates should be located under /plugins/woocommerce/templates/checkout/.

    Best regards,
    Rikard

    December 21, 2022 at 9:25 pm #1377047
    conlcoa

    Let me try a deeper explanation of #1 above.

    I have a single product in a store.
    I have added the PayPal standard checkout.
    The checkbox for accepting the site’s Terms & Conditions is required.
    The “container” at the bottom of the checkout page contains the PayPal buttons and the required T&C checkbox.
    The required T&C checkbox is BELOW the PayPal buttons.
    Customers can not see the checkbox.
    Customers attempt to pay via PayPal, but of course it will not process.

    SOLUTION NEEDED: HOW DO I MOVE THE CHECKBOX ABOVE THE PAYPAL BUTTONS? SAME AREA, DIFFERENT ORDER.
    Checkbox first. PayPal buttons below.

    NOTE: I have tried several checkout plugins for managing checkout fields. None so far have options for the payment area.

    December 22, 2022 at 11:01 am #1377082
    Rikard

    Hi,

    Thanks for the clarification. What if you place them next to each other instead? You could try this in Quick CSS:

    #payment {
  display: flex;
}

    Best regards,
    Rikard

    December 22, 2022 at 10:28 pm #1377158
    conlcoa

    Thanks! I got it.!
    I added “display: flex” and “flex-direction: column” to the outer div container. I added “display: flex” to both the inside divs ( the required checkbox div and the payment buttons div ). I added “order: 1” to the required checkbox div & “order: 2” to the payment buttons div. They are now stacked and the required checkbox is on top.
    Thank you so much for giving me some insight on where to start!

    December 23, 2022 at 2:27 am #1377179
    Mike

    Hi,
    Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘How to Edit Checkout Page’ is closed to new replies.