.order-cards-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start; gap: 20px; } .order-card {
flex-basis: calc(50% - 20px); margin-bottom: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
} .order-card .order-id {
font-weight: bold;
font-size:1.2rem;
margin-bottom: 5px;
}
.order-card .order-date {
color: #888;
}
.order-card .order-total {
margin-top: 10px;
} .product-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
} .product-item {
flex-basis: calc(33.33% - 10px);
} .product-image img {
width: 100%;
height: auto;
} .product-name {
margin-top: 5px;
font-size: 14px;
font-weight: bold;
}
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.product-item {
width: calc(33.33% - 10px);
margin: 5px;
padding: 10px;
}
.product-image {
margin-bottom: 10px;
}
.product-name {
font-weight: bold;
}
Make sure to include this CSS code in your wc-returns.css file. It provides the card layout for orders and flexbox styling for the product list, with each row containing two product items. Feel free to adjust the styles further to match your desired design.