Return to previous page

Changes needed in the checkout/cart pages

This topic has 2 replies, 2 voices, and was last updated 4 months, 1 weeks ago ago by Luca Rossi

Abhimanyu

Participant

July 10, 2024 at 11:07

In my checkout page i want to make the following changes. Could you please help me out with these –

1. i want to make the “Order Notes (optional)” and “Ship to a different address?” BOLD.

2. in the cart page unnecessarily Paypal button is showing up and overlapping as shown in the screenshot

3. first in the cart page order summary is visible, again in the checkout page summary is visible. In the check out page it is making the make look busy. how to remove/disable the order summary in checkout page next to address details. let me know how to enable or disable its visibility.

4 Also the footer in checkout, cart pages etc are different from the one on my main page.

5. In the shipping and billing address, i want to order to change i.e first postcode then email then phone number. how do i do that?

Request you to kindly help me out with these changes

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#403966 Copied Theme version: 9.3.11

1 Answer
Luca Rossi

Support staff

July 10, 2024 at 15:00
Hi @Abhimanyu,

1. Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
div#ship-to-different-address,
p#order_comments_field label{
    font-weight: bold;
}
```
2. Please add this custom CSS code:
```
.ppc-button-wrapper {
    margin-bottom: 10px;
}
```
3. Do you want to remove this section on checkout page: https://prnt.sc/EGmsXX6ROLuG? If yes, please add this custom CSS:
```
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table tbody {
    display: none;
}
```
4. Please navigate to XStore > Theme Options > WooCommerce(Shop) > Cart/Checkout layout > FOOTER > enable Use Default Footer: https://prnt.sc/Lkf4n3LcTHC5

5. Please add this custom CSS codes:
```
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row {
    flex: 0 1 100%;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first, 
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last{
    flex: 0 1 50%;
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p#billing_email_field {
    order: 1;
    margin-bottom: var(--fields-v-gap, 1.43rem);
}

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper p#billing_phone_field {
    order: 2;
}
```
https://prnt.sc/RFp9ZjniQ-aZ

Best Regards,
8Theme’s Team
#404058 Copied
Tagged: enhanced woocommerce checkout, optimize wordpress checkout, revamp woocommerce cart page, woocommerce cart page changes, woocommerce checkout improvement, wordpress template modification, wordpress woocommerce upgrade
Viewing 2 results - 1 through 2 (of 2 total)