If I have check payment enabled, the customer can use that and get an order confirmation emails. The order status is then “on hold,” until I manually change the order status to “payment pending”.
After this, if I send another Order Detals email to the customer, it will have a link in the email “Pay for this order” that takes them to a pay screen where they get option to choose to pay by check where they get instructions about how to pay by check, or other methods of payment if they are available.
The “Pay for this order” in the email is the same link as is on the Account>>Order>>Pay Button for the order. This is fine if logged in, but if the customer clicks the link in the email and they are not logged in, they get a login page that is a default theme login page with no top/bottom margins and a full width form. It appears there is not template for it and I would have to style the login page manually with CSS.
It needs a little defalt styling. Better yet, a template too.
Thank you. I didnt even see that there as a label, my bad.
Hopefully in release coming soon then. Because as it stands there isn’t a work around is there?
The padding and margin on this #brx-content is on the ouside of the wc pay template. So you can’t set any outer padding or margins on the wc pay template if you use custom CSS like I posted above. It’s a real pain.
I am not even sure this can be done any way else. If the order is paid for and completed, you can’t see the order receipt this way. You can see it only if the order status is “pending payment”, “failed” or “draft” this way.
It seems it is just an alternate template to the pay template.
I’m using this CSS for both that only applies to the login form when not logged-in so the order pay and order received templates outer margin and templates can be styled independently.
/*----- START Login to Pay for Order and View Order Received -----*/
body:not(.logged-in).woocommerce-order-pay #brx-content > .woocommerce,
body:not(.logged-in).woocommerce-order-received #brx-content > .woocommerce {
max-width: 1260px;
align-self: center;
padding: 0 30px 0 30px;
margin: 50px auto 50px auto;
}
@media (max-width: 478px) {
body:not(.logged-in).woocommerce-order-pay #brx-content > .woocommerce,
body:not(.logged-in).woocommerce-order-received #brx-content > .woocommerce {
padding: 0 10px 0 10px;
margin: 50px auto 50px auto;
}
}
.woocommerce-order-pay .woocommerce .woocommerce-info,
.woocommerce-order-received .woocommerce .woocommerce-info {
margin-bottom: 20px;
}
.woocommerce-order-pay .woocommerce .button,
.woocommerce-order-received .woocommerce .button {
font-family: "Nunito";
background-color: #546b82;
color: #ffffff;
}
/*----- END Login to Pay for Order and View Order Received -----*/
Then on the Order Reciept, Checkout Thank You, and Pay templates, if you use padding and margins on a section or container wrapped around the whole template, you would add some custom CSS to remove it when not logged in.
In this case for a section set to use padding, you can do this:
