webentwicklung-frage-antwort-db.com.de

Woocommerce: Benutzerdefinierte Felder und E-Mail-Shortcodes, ec_custom_field

Wie kann ich einem Woocommerce-Produkt ein benutzerdefiniertes Feld hinzufügen UND dieses Feld in den E-Mails anzeigen, die beim Kauf generiert wurden?

Es gibt sehr wenig Dokumentation dazu, und die Hälfte davon scheint aus Jahren zu stammen, als die Codestruktur anders war.

1
user92979

Nach langem Hin und Her haben wir es herausgefunden. Hier ist die Dokumentation, die wir für uns selbst geschrieben haben. Es ist sehr enttäuschend, dass Woocommerce nicht die Mühe hatte, eine eigene Dokumentation dafür zu schreiben (stattdessen nur einen Link zu einem teuren Plugin).

Ich habe die Teile, die über das Anpassen der Vorlage für die Produktbestellung sprechen, nicht hinzugefügt. Ich habe das nicht getan.


Hintergrund: PHP führt einen Haufen Code aus, um eine Seite zu generieren. Es werden viele Filter ausgeführt, um die Daten zu "verarbeiten" und die Einstellungen vorzunehmen. Anschließend wird eine Aktion ausgeführt, um im Grunde den HTML-Code der resultierenden Seite auszudrucken.

Ein "Filter" wird ausgeführt, bevor die Seiten gerendert werden. Eine "Aktion" wird ausgeführt, um die Seite zu schreiben, dh um den generierten HTML-Code zu schreiben, der an den Webbrowser-Client gesendet werden soll.

Sie können an bestimmten Stellen, die Woocommerce zur Verfügung stellt, eigene Filter und Aktionen hinzufügen (z. B. um einen Button vor dem Checkout-Button auszudrucken). Es gibt bestimmte Punkte, an denen WordPress/Woocommerce Ihre benutzerdefinierten Funktionen ausführen kann.

Um Ihre eigenen benutzerdefinierten Dinge hinzuzufügen, bearbeiten Sie die Datei: public_html/wp-content/themes/Divi-child/functions.php und rufen entweder add_filter () oder add_action () auf, mit: * einem Schlüsselnamen des Woocommerce-Hooks * dem Textname Ihrer Funktion, die Sie während dieses Hook-Punkts ausführen möchten. Ihre Funktion wird zu einer Liste hinzugefügt, die Woocommerce zu einem bestimmten Zeitpunkt während der Ausführung ausführt.


Schritte für ein benutzerdefiniertes Feld. Beispiel ist "Augenfarbe", der Anzeigetitel ist "Augenfarbe" und der Schlüssel ist "Augenfarbe".

Schritt 1: Fügen Sie der Checkout-Seite eine "Aktion" hinzu, um dieses neue Feld zu rendern.

////////////////////
//            (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>';
}

Schritt 2: Saugen Sie die vom Benutzer eingegebene 'Augenfarbe' ein und speichern Sie sie mit den Bestelldaten.

Der Benutzer klickt auf "Bestellung aufgeben", was ein gewöhnliches HTML-Formular ist, und sendet alle eingegebenen Details über HTTP POST -Felder, wie in der Webwelt üblich.

Also müssen wir dieses Feld einbringen und es mit einem Schlüssel an die Bestellung "anhängen". Dies geschieht über eine "Aktion", bei der der Mechanismus nicht genau bekannt ist oder wann dies ausgeführt wird.

Beachten Sie, dass hier unten die Text-Taste ** steht.

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

Muss nicht mit dem Schlüssel POST identisch sein, sondern ist ein Schlüssel, der der Bestellung beigefügt ist. Aber lassen Sie es uns so weitermachen. Beachten Sie, dass wir this_kind_of_naming normalerweise nur als Konvention für Schlüssel verwenden.

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'] ) );
    }
}

Schritt 3 - Zeigen Sie dieses Feld auf der Seite 'Bestellung bearbeiten' an, die sich vermutlich im Backend von Wordpress befindet.

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>';
}

Schritt 4 - zeige dies in der E-Mail!

Der Magic Raindance Shortcode ist

[ec_custom_field key="eye_colour"]

Fügen Sie dies in den "Haupttext" des Woocommerce "Email Customizer" ein und ersetzen Sie diesen Block durch den Text, den der Benutzer in das Bestellformular eingegeben hat.

Schritt 5 - Zeigen Sie dies auf der Bestellbearbeitungsseite

(Zeigen Sie im Backend an, wo Sie alle Bestellungen sehen, die die Leute ausgeführt haben.)

Wir werden wieder einen Haken in die functions.php einfügen. Beachten Sie, dass der Hakenname "woocommerce_admin_order_data_after_billing_address" heißt. Diese Information erscheint also NACH dem Abschnitt "Rechnungsadresse". Es gibt wahrscheinlich eine Reihe anderer Hooks, sodass Sie diese Informationen an einer anderen Stelle auf der Seite anzeigen können.

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>';
}

Schritt 6 - Bonuslevel - Welche Felder stehen ec_custom_field zur Verfügung?

Es ist nicht offensichtlich, welcher Code im Teil [ec_custom_field key = "???"] erforderlich ist. Lassen Sie uns daher eine Liste dieser Felder auf der Produktbestellungsseite im Backend von Wordpress anzeigen (dh im Admin-Bereich, in dem Sie alle Produktbestellungen sehen können, die von Personen durchgeführt wurden).

Wieder werden wir einen Haken in die functions.php einfügen. Dieses Mal werden wir eine Liste aller Felder ausdrucken, die an die Bestellung angehängt sind (anscheinend an den HTTP-Post angehängt).

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>';
}

Dadurch wird eine Liste aller Schlüssel und ihrer Werte ausgedruckt, sodass Sie nicht raten müssen, welchen Schlüssel Sie verwenden müssen.

1
user92979