Return to previous page

Enhancement in the cart & checkout pages

This topic has 10 replies, 3 voices, and was last updated 4 weeks, 1 days ago ago by Andrew Mitchell

The Egyptian Developers

Participant

March 29, 2024 at 08:11

Hello Team

We need some enhancement & changes in the cart & checkout pages

Please, contact administrator
for this information.

#389037 Copied Theme version: 9.3.2

9 Answers

The Egyptian Developers

Participant

March 30, 2024 at 05:05

Dear Team

any updates?

#389225 Copied
Luca Rossi

Support staff

March 30, 2024 at 06:44
Dear The Egyptian Developers Team,

We hope this message finds you well.

We kindly request your assistance in implementing specific CSS customizations to our website theme. Please navigate to the Theme Options, select Theme Custom CSS, and then proceed to Global CSS. Once there, could you insert the following CSS code:
```
/*========= Point #1 =========*/
table.cart .product-name img,
.woocommerce-checkout-review-order-table .cart_item .product-name img, 
.woocommerce-order-details tbody .product-name img {
    border: 1px solid #e1e1e1;
    border-radius: 10px;
}

/*========= Point #3 =========*/
@media (min-width: 481px){
    .wc-proceed-to-checkout {
        display: flex;
        justify-content: space-between;
    }
    .wc-proceed-to-checkout a {
        font-size: 14px !important;
        margin-bottom: 0 !important;
        width: 48%;
    }
}

/*========= Point #4 & #5 =========*/
#payment .payment_methods label {
    font-size: 12px !important;
}
#payment > ul > li.wc_payment_method.payment_method_bacs > div > p > span > br:nth-child(1) {
    display: none;
}
```
Regarding the customization for point #3, we understand that it may require additional code that is beyond the scope of our support. For guidance on this matter, we recommend reviewing the following article on Stack Overflow: https://stackoverflow.com/questions/47011688/move-coupon-field-after-checkout-payment-in-woocommerce/47018982#47018982

We appreciate your attention to this request and look forward to your prompt action. Should you have any questions or require further clarification, please do not hesitate to contact us.

Best regards,
8Theme’s Team
#389230 Copied
The Egyptian Developers

Participant

March 30, 2024 at 13:00

Thank you so much for your support

Please contact administrator
for this information.

#389269 Copied

The Egyptian Developers

Participant

March 30, 2024 at 13:16

Please contact administrator
for this information.

#389272 Copied
Luca Rossi

Support staff

March 30, 2024 at 15:35
Hi @The Egyptian Developers,

How do I turn the plus and minus buttons around with curves on the entire website?

The fastest way is using the custom CSS code:
```
.quantity-wrapper span.minus.et-icon.et_b-icon,
div.quantity>.minus, td.quantity>.minus{
    border-radius: 0 5px 5px 0 !important;
}
.quantity-wrapper span.plus.et-icon.et_b-icon,
div.quantity>.plus, td.quantity>.plus{
    border-radius: 5px 0 0 5px !important;
}
```
How do we make the menu spacing and alignment & fit like the new UX instead of the old one?
```
.header-bottom .et-row-container.et-container {
    max-width: 100%;
}
```
Let us know how it goes!
#389287 Copied
The Egyptian Developers

Participant

March 30, 2024 at 16:11

The plus and minus work well in Arabic but do not work well in English Language.

Please contact administrator
for this information.

#389291 Copied
Luca Rossi

Support staff

March 30, 2024 at 16:26
Hi @The Egyptian Developers,

Please update the previous CSS code:
```
.quantity-wrapper span.minus.et-icon.et_b-icon,
div.quantity>.minus, td.quantity>.minus{
    border-radius: 0 5px 5px 0 !important;
}
.quantity-wrapper span.plus.et-icon.et_b-icon,
div.quantity>.plus, td.quantity>.plus{
    border-radius: 5px 0 0 5px !important;
}
```
– To:
```
.rtl .quantity-wrapper span.minus.et-icon.et_b-icon,
.rtl div.quantity>.minus, 
.rtl td.quantity>.minus{
    border-radius: 0 5px 5px 0 !important;
}
.rtl .quantity-wrapper span.plus.et-icon.et_b-icon,
.rtl div.quantity>.plus, 
.rtl td.quantity>.plus{
    border-radius: 5px 0 0 5px !important;
}

.quantity-wrapper span.minus.et-icon.et_b-icon,
div.quantity>.minus, 
td.quantity>.minus{
    border-radius: 5px 0 0 5px !important;
}
.quantity-wrapper span.plus.et-icon.et_b-icon,
div.quantity>.plus, 
td.quantity>.plus{
    border-radius: 0 5px 5px 0 !important;
}
```
Hope it helps!
#389293 Copied
The Egyptian Developers

Participant

March 30, 2024 at 17:15

It works fine now; thank you so much for your support

#389295 Copied

Andrew Mitchell

Support staff

March 30, 2024 at 17:15

Dear The Egyptian Developers,

We hope you’re reveling in the experience our theme brings! Your enthusiasm is what fuels our passion. Would you be so kind as to channel that energy into a 5-star rating on ThemeForest? Your feedback is the spark that lights our way!

Click here to spread the love: https://themeforest.net/downloads

Thank you for being an integral part of our journey!

Best Regards,
The 8Theme Team

#389296 Copied
Tagged: advanced wordpress shop checkout, efficient woocommerce cart, enhanced cart checkout, improved wordpress checkout, optimized wordpress ecommerce checkout, seamless woocommerce checkout experience, woocommerce templates upgrade
Viewing 10 results - 1 through 10 (of 10 total)