web-dev-qa-db-fra.com

Woocommerce: champs personnalisés et codes courts de courrier électronique, ec_custom_field

Comment puis-je ajouter un champ personnalisé à un produit Woocommerce ET que ce champ apparaisse dans les courriels générés lors de l'achat?

Il existe très peu de documentation à ce sujet, et la moitié semble être celle d'il y a des années, lorsque la structure du code était différente.

custom-fieldwoocommerce
1
user92979

Après beaucoup de tripes, nous avons compris. Voici la documentation que nous avons écrite pour nous-mêmes. Il est très décevant que Woocommerce n’ait pas la peine d’écrire sa propre documentation à cet effet (mais uniquement un lien vers un plugin coûteux).

Je n'ai pas ajouté les parties qui traitent de la personnalisation du modèle pour la commande de produit, je ne l'ai pas fait.

Arrière-plan: PHP exécute un tas de code pour générer une page. Il existe de nombreux filtres exécutés avant pour "traiter" les données et configurer, puis 1 action est exécutée à la fin pour imprimer le code HTML de la page obtenue.

Un "filtre" est exécuté avant le début du rendu des pages. Une "action" est exécutée POUR écrire la page, c'est-à-dire pour écrire le code HTML généré à envoyer au client du navigateur Web.

Vous pouvez ajouter vos propres filtres et actions à certains moments fournis par Woocommerce (par exemple, pour imprimer un bouton avant le bouton de paiement). Il y a des points spécifiés à "accrocher", où wordpress/woocommerce exécutera vos fonctions personnalisées.

Pour ajouter vos propres éléments personnalisés, modifiez le fichier: public_html/wp-content/themes/Divi-child/functions.php et appelez add_filter () ou add_action (), avec: * un nom de clé du hook woocommerce *, le nom du texte de votre fonction que vous voulez exécuter pendant ce point de raccordement. Votre fonction est ajoutée à une liste que Woocommerce exécutera à un moment donné au cours de l'exécution.

Donc, étapes pour un champ personnalisé. Exemple: "Couleur des yeux", le titre d'affichage est "Couleur des yeux" et la clé est "Couleur des yeux".

Étape 1: Ajoutez une "action" à la page de paiement pour afficher ce nouveau champ.

////////////////////
//            (run this after 'order notes')   (call it 

custom_WHATEVERKEY_checkout_field - same as function name)
//                         |                             |
//                         |                             |
//                         v                             v
add_action( 'woocommerce_after_order_notes', 'custom_eye_colour_checkout_field' );

//       function name must match text above in add_action
function custom_eye_colour_checkout_field( $checkout ) {

    // div id can be anything, you use this id to match CSS styling
    // 'echo' will 'print' out HTML to the resulting page... this is the point of 'actions'
    echo '<div id="custom_eye_colour_checkout_field"><h2>' . __('Eye Colour') . '</h2>';

    // 'eye_colour' is the key... 'class' will be the CSS styling class
    // Label is displayed in the order page,
    // Placeholder is what is written in the little text box before user starts typing.
    //
    woocommerce_form_field( 'eye_colour', array(
        'type'          => 'text', // could be a number or something else, page will help validate
        'class'         => array('my-field-class form-row-wide'), // CSS style class
        'label'         => __('Eye Colour (whatever you like in the title)'),
        'placeholder'   => __('Enter the eye colour you would like, display in the entry text box'),
        ), $checkout->get_value( 'eye_colour' ));
    // note the eye_colour key at the bottom line here

    // and finish the little HTML enclosing div.
    echo '</div>';
}

Étape 2: Aspirez la "couleur des yeux" saisie par l'utilisateur et stockez-la avec les détails de la commande.

L'utilisateur cliquera sur "Passer la commande", qui est un formulaire HTML ordinaire et soumettra tous les détails saisis via des champs HTTP POST comme d'habitude dans le monde du Web.

Nous devons donc importer ce champ et le "joindre" à l'ordre avec une clé. Cela se fait via une 'action', pas exactement du mécanisme ou quand cela est exécuté.

Notez que ci-dessous, la clé de texte ** ici,

update_post_meta( $order_id, ' ** eye_colour ** ', sanitize_text_field( $_POST['eye_colour'] ) );

Ne doit pas nécessairement être identique à la touche POST, il s'agit d'une clé associée à la commande. Mais, gardons la même chose. Notez que nous utilisons habituellement this_kind_of_naming pour les clés comme une convention.

add_action( 'woocommerce_checkout_update_order_meta', 'custom_eye_colour_checkout_field_update_order_meta' );

function custom_eye_colour_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['eye_colour'] ) ) {
        update_post_meta( $order_id, 'eye_colour', sanitize_text_field( $_POST['eye_colour'] ) );
    }
}

Étape 3 - Affichez ce champ dans la page "Modifier la commande", qui, je suppose, se trouve dans le backend de Wordpress.

add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_eye_colour_checkout_field_display_admin_order_meta', 10, 1 );

function custom_eye_colour_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Eye Colour').':</strong> ' . get_post_meta( $order->id, 'eye_colour', true ) . '</p>';
}

Étape 4 - montrez ceci dans l'email!

Le shortcode magique Raindance est

[ec_custom_field key="eye_colour"]

Mettez cela dans le "texte principal" dans le "Customizer d'email" de Woocommerce, et il remplacera cette partie par le texte que l'utilisateur a saisi dans le formulaire de commande.

Étape 5 - montrez ceci dans la page de modification de commande

(Affichez dans le backend où vous regardez toutes les commandes que les gens ont passées)

Encore une fois, nous ajouterons un point d’accès au fichier functions.php. Notez que le nom du point d’accès est appelé "woocommerce_admin_order_data_after_billing_address". Cette information apparaît donc APRÈS la section "adresse de facturation". Il y a probablement beaucoup d'autres crochets pour que vous puissiez afficher cette information à un autre point de la page.

add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Eye Colour').':</strong> ' . get_post_meta( $order->id, 'eye_colour', true ) . '</p>';
}

Étape 6 - Niveau de bonus - quels champs sont disponibles pour ec_custom_field?

Le code requis dans la partie [ec_custom_field key = "???"] n'est pas évident. Laissons donc afficher une liste de ces champs dans la page de commande de produit, dans le backend de Wordpress (c.-à-d. La section Admin où vous pouvez voir toutes les commandes de produits que les gens ont passées).

De nouveau, nous allons ajouter un point d’accès au fichier functions.php. Cette fois, nous allons imprimer une liste de tous les champs associés à la commande (elle est associée à la publication HTTP, semble-t-il).

add_action( 'woocommerce_admin_order_data_after_billing_address', 'debug_checkout_field_display_admin_order_meta', 10, 1 );

function debug_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('(debug) List fields').':</strong>';
    $vals = get_post_meta( $order->id );
    // Assume each value is a 1 element array, seems to be the situation.
    foreach($vals as $key => $val) {
        echo '<br/>* <strong>' . $key . ':</strong> ' . $val[0];
    }
    /* To print out all the elements in the value-keys...
    foreach($vals as $key => $val) {
        echo '<br/>* <strong>' . $key . ':</strong> ' . $val;
        foreach($val as $key2 => $val2) {
            echo '<br/>** <strong>' . $key2 . ':</strong> ' . $val2;
        }
    }
     */
    echo '<br/>Thats it.<br/>';
    echo '</p>';
}

Cela affichera une liste de toutes les clés et de leurs valeurs, de sorte que vous n’aurez pas à deviner quelle clé vous devez utiliser.

1
user92979