Removing fields from WC checkout

This topic contains 3 replies, has 2 voices, and was last updated by  alex 1 week, 5 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #4055

    alex
    Participant
    • 187 Posts
    @abourne

    Hello, applied some snippets to customise the checkout field. Works great – for desktop. For mobile, the UI is off.

    Do you have suggestions to make the fields properly display in full width for mobile?

    add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
    function woo_remove_product_tabs( $tabs ) {
    unset( $tabs['additional_information'] );
    return $tabs;
    }
    
    /* WooCommerce: The Code Below Removes The Additional Information Title Text */
    add_filter('woocommerce_enable_order_notes_field', '__return_false');
    
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
    
    function custom_override_checkout_fields( $fields ) {
    unset($fields['billing']['billing_company']);
    unset($fields['billing']['billing_address_1']);
    unset($fields['billing']['billing_address_2']);
    unset($fields['billing']['billing_country']);
    unset($fields['billing']['billing_state']);
    unset($fields['order']['order_comments']);;
    unset($fields['account']['account_username']);
    unset($fields['account']['account_password']);
    unset($fields['account']['account_password-2']);
    return $fields;
    }

    Hopefully these snippets are helpful and save time for others, as WC’s documentation did not quite provide this exact solution so clearly.

    Regards

    #4070

    themosaurus
    Keymaster
    • 1250 Posts
    @themosaurus

    Hi @abourne,

    This is an issue with Gwangi, the checkout should not be displayed in two columns on mobile. This will be fixed in the next update, thank you for your feedback. In the meantime you can use this CSS snippet:

    @media screen and (max-width: 768px) {
    	#customer_details .col-1,
    	#customer_details .col-2 {
    		flex: 0 0 100%;
    		max-width: 100%;
    		padding-right: 0;
    	}
    }

    Please paste this CSS in the Custom CSS panel of your Customizer and it should resolve the issue.

    Regards

    #4091

    alex
    Participant
    • 187 Posts
    @abourne

    Worked perfectly. Appreciate it.

    #4092

    alex
    Participant
    • 187 Posts
    @abourne

    .

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.