Return to previous page

Assistance Required for Checkout Page Modifications

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

Drishti

Participant

September 30, 2024 at 21:20

I have a few queries regarding modifications I would like to make on the checkout page of my WooCommerce store. I would greatly appreciate your guidance on how to implement the following changes:

1) Hide “You saved” Message: I would like to hide the “You saved” message that appears after the total amount on the checkout page.

2) Change Last Name Field to Optional: Please guide me on how to change the last name field from required to optional.

3) Remove “(optional)” Label: I want to remove the “(optional)” label that appears next to optional fields on the checkout form.

4) Restrict Phone Number Input: Currently, the phone number field accepts characters and shows an error message for invalid inputs. I would like to restrict this field to accept only numeric values.

5) Display Validation Errors Below Input Fields: I want all validation error messages to be displayed directly below the corresponding input fields instead of at the top area of the page.

6) Default Close Shipping Address Info: I would like the shipping address information section to be closed by default on the checkout page. I have already tried enabling and disabling the “Active checkbox” toggle under “Shipping Details” but did not achieve the desired result.

I do not want to use the plugin, please suggest me the code changes, wherever possible.

Thank you for your assistance in resolving these issues. I look forward to your guidance.

Files is visible for topic creator and
support staff only.

#416525 Copied Theme version: 9.4.1

1 Answer
Luca Rossi

Support staff

October 2, 2024 at 05:34
Hi @Drishti,

#1 & #3: Please try adding the following CSS codes under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
.woocommerce-checkout tr.rp_wcdpd_promotion_total_saved_table_row,
.woocommerce-checkout span.optional {
    display: none;
}
```
#2: Add this custom code under functions.php file locates in your child theme:
```
add_filter( 'woocommerce_default_address_fields', 'adjust_requirement_of_checkout_address_fields' );
function adjust_requirement_of_checkout_address_fields( $fields ) {
    $fields['last_name']['required']    = false;
    return $fields;
}
```
#4: Add this custom code under functions.php file locates in your child theme:
```
add_action('wp_footer', 'n2t_wp_footer');
function n2t_wp_footer(){
    ?>
    <script>
        jQuery(function($){
            $('input[type="tel"]').on('input', function() {
                this.value = this.value.replace(/[^0-9]/g, '');
            });
        });
    </script>
    <?php
}
```
#5: It’s not possible now and it requires many customization codes to achieve but it will fall out of scope our support standard services we provide. Thanks for understanding!

#6: We’ve changed the Shipping destination to Default to customer billing address for you https://prnt.sc/rwkinTevUylb.

Should you have any more questions or require further assistance, feel free to contact us.

Best Regards,
8Theme’s Team
#416680 Copied
Tagged: checkout page assistance, custom woocommerce solutions, ecommerce website support, page modification help, professional wordpress assistance, woocommerce checkout changes, wordpress woocommerce templates
Viewing 2 results - 1 through 2 (of 2 total)