Support » Plugin: WooCommerce » Missing explanitory text in check out fields

  • Hi!

    In my woocommerce check out page, I have removed most of the billing fields, and I only use the email and password fields. In the password field, the grey text inside the field, reads “Passord”, but the email field does not have any explanitory text, it’s empty. Does anyone know where I should add the word “Email”, so that it appears in the email field?

Viewing 8 replies - 1 through 8 (of 8 total)
  • You are looking to setup the “placeholder” for the email field.

    All is explained here:
    https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

    You will need some code like this in functions.php for your child theme. Sorry not tested.

    <?php
    add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
    function custom_override_checkout_fields( $fields ) {
      $fields['billing']['billing_email']['placeholder'] = 'Email address';
      return $fields;
    }
    

    The <?php is not needed a second time if its in the file already.

    Thread Starter irik

    (@irik)

    Thanks for your reply. Unfortunately, I’m quite new to woocommerce and coding. Can you please guide me? My checkout page looks like this: https://testsidene.com/shop/?add-to-cart=15967
    As you can see, I need some text to tell my users what kind of information they need to provide in the billing fields.

    I tried to copy you code in my functions file, but I get an php-error (maybe because I pasted it somewhere wrong, or maybe because I’ve already used some coding to get rid of excess billing fields. Maybe you spot an error somewhere? Here’s my code (functions.php of my child theme):

    <?php

    // enqueue the child theme stylesheet

    Function wp_schools_enqueue_scripts() {
    wp_register_style( ‘childstyle’, get_stylesheet_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘childstyle’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘wp_schools_enqueue_scripts’, 11);

    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_2’]);

    unset($fields[‘billing’][‘billing_country’]);

    unset($fields[‘billing’][‘billing_phone’]);
    unset($fields[‘order’][‘order_comments’]);
    unset($fields[‘billing’][‘billing_address_2’]);

    unset($fields[‘billing’][‘billing_company’]);

    return $fields;
    }
    // removes Order Notes Title – Additional Information
    add_filter( ‘woocommerce_enable_order_notes_field’, ‘__return_false’ );

    /**
    * Custom text on the receipt page.
    */
    function isa_order_received_text( $text, $order ) {
    $new = $text . ‘ Trykk på “teoriprøver” i menyen for å sette i gang. Lykke til :-)’;
    return $new;
    }
    add_filter(‘woocommerce_thankyou_order_received_text’, ‘isa_order_received_text’, 10, 2 );

    Your code is pasted as plain text and the editor can change it. Please repost the code – this time highlight the code block and click the “code” button just above the editor box. This will identify the code as code, and the editor will leave it alone.

    Thread Starter irik

    (@irik)

    Uups… didn’t know, thank you for helping me out 🙂 Hope you can see the code now …

    <?php
    
    // enqueue the child theme stylesheet
    
    Function wp_schools_enqueue_scripts() {
    wp_register_style( 'childstyle', get_stylesheet_directory_uri() . '/style.css'  );
    wp_enqueue_style( 'childstyle' );
    }
    add_action( 'wp_enqueue_scripts', 'wp_schools_enqueue_scripts', 11);
    
    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_2']);
     
        unset($fields['billing']['billing_country']);
      
        unset($fields['billing']['billing_phone']);
        unset($fields['order']['order_comments']);
        unset($fields['billing']['billing_address_2']);
        
        unset($fields['billing']['billing_company']);
        
             		
        return $fields;
    }
    // removes Order Notes Title - Additional Information
    add_filter( 'woocommerce_enable_order_notes_field', '__return_false' );
    
    /**
     * Custom text on the receipt page.
     */
    function isa_order_received_text( $text, $order ) {
        $new = $text . ' Trykk på <a href="http://testsidene.com/teoriprove-bil-klasse-b/">"teoriprøver"</a> i menyen for å sette i gang. Lykke til :-)';
        return $new;
    }
    add_filter('woocommerce_thankyou_order_received_text', 'isa_order_received_text', 10, 2 );

    Your code validates using this service:
    http://phpcodechecker.com/
    and, if you did have a php error, your checkout page would be plain white. So I think your code is good, though it may not yet do all that you want.

    Consider turning on the fields labels so you can see what you are doing. Add this custom css:

    .woocommerce form.checkout .col2-set p.form-row label {
        display: block
    }
    

    If you update to WP 4.7, custom css can be entered at:
    Dashboard > Appearance > Customise > Additional CSS
    You can turn off the field labels when you are finished.

    Next, you will want to add some placeholders to the remaining fields. So inside your function custom_override_checkout_fields() you will need some additional lines:

    $fields['billing']['billing_first_name']['placeholder'] = 'Fornavn';
    $fields['billing']['billing_last_name']['placeholder'] = 'Etternavn';
    $fields['billing']['billing_email']['placeholder'] = 'Epostadress';
    

    Just work through the fields one-by-one.

    Thread Starter irik

    (@irik)

    Fantastic! Thank you very much! It worked wonders:-) I noticed another post by you, where you mentioned Loco Translate. I’ve installed thins plugin, and I want to make my “Read More”-buttons have a Norwegian text, but in Loco Translate I noticed that “Read More” already was translated. So do you know what else I can do to thanslate the “Read More”-buttons? You can see the buttons here: https://testsidene.com/blogg/

    The translations are in groups. Did you look at:
    Dashboard > Loco Translate > Themes > your-theme-name
    and
    Dashboard > Loco Translate > WordPress > development

    Also make sure you clicked the sync button just before you filtered the translations.

    If you still have the problem, ask your theme vendor’s support service. wordpress.org forum members don’t have access to commercial themes.

    Thread Starter irik

    (@irik)

    I tried the things you suggested, but unfortunately, it didn’t work, so I have to ask my theme vendor. But thanks anyway! It’s much appreciated!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Missing explanitory text in check out fields’ is closed to new replies.