Assistance Required for Checkout Page Modifications

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

  • Avatar: Drishti
    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.
    1 Answer
    Avatar: Justin
    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

  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.