Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1376282

    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 1 year, 5 months ago by conlcoa.
    #1376479

    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

    #1376547

    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?

    #1376575

    Hi,

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

    Best regards,
    Rikard

    #1377047

    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.

    #1377082

    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

    #1377158

    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!

    #1377179

    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

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