Thank you page without structure

Hi,

your theme looks real pretty, but the thank you page looks, let’s say very unfortunate.

There is no structure, WooCommerce Messages (e.g. Payment Messages) and so on are simply randomly displayed.

Can you help? A little more love would be nice!

Thanks!

Hello,

Thank you for noticing this. It is true that this page should look better, we will improve it in the next update.

We have prepared this CSS styles for you. Add this to the Custom CSS section in Theme Settings and if you will have any additional whishes we would be glad to hear them

.woocommerce-order-received .responsive-table {
    margin-bottom:50px;
}
.woocommerce-checkout .woocommerce .woocommerce-thankyou-order-received {
    background: transparent;
    border: 2px dashed #7a9c59;
    color: #7a9c59;
    font-weight: 600;
    width:100%;
    text-align:center;
    font-size:16px;
    margin-bottom:30px;
}
.woocommerce-thankyou-order-details,
.wc-bacs-bank-details {
    display: flex;
    -webkit-display: flex;
    display: -webkit-flex;
    -ms-display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    justify-content: space-between;
    -webkit-justify-content: space-between; 
    -ms-justify-content: space-between; 
}
.woocommerce-thankyou-order-details li strong,
.wc-bacs-bank-details li strong {
    display:block;
    margin-top:10px;
}
.woocommerce-thankyou-order-details li,
.wc-bacs-bank-details li{
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
    padding-left: 20px;
    padding-right: 20px;
    border-right: 1px solid #dfdfdf;
    text-align: center;
}
.woocommerce-thankyou-order-details li:last-child,
.wc-bacs-bank-details li:last-child {
    border-right:none;
}
.woocommerce-order-received ul.order_details {
    margin-left:0;
}
.woocommerce-order-received .amount {
    color: #4C4C4C;
}
.wc-bacs-bank-details-heading,
.wc-bacs-bank-details-heading + h3 {
    text-align:center;
}
.wc-bacs-bank-details-heading {
    margin-bottom:10px;
}
.wc-bacs-bank-details-heading + h3 {
    font-size: 14px;
}
.woocommerce-order-received .addresses .col-2 {
    border: 2px dashed #7a9c59;
    padding: 20px 20px 0 20px;
}

Regards

Useful

@lxyamerica, we will work on this page in our next update and try to make it even better.

Please adjust this in your theme. And don’t hesitate to make it a little prettier than the above quick fix CSS code.

Thanks! Close anytime

Yes, we will add some styles in the next update.

[Author]

Posts