Reklama sponsora

Edycja i tworzenie pól w WooCommerce



Powszechnie znana wtyczka WooCommerce pozwala nam w bardzo prosty sposób prowadzić swój własny sklep internetowy, dostarczając nam wiele prostych narzędzi. Zarządzanie płatnościami, formularz zamówieniowy, zarządzanie produktami – wszystko to można tam znaleźć. Jednakże zdarza się, że np. na stronie finalizacji zakupu przydałoby nam się jakieś dodatkowe pole uwzględniające np. specjalne uwagi klienta, a wtyczka WooCommerce nam takiej opcji nie umożliwia. W takim przypadku możemy pokusić się o dodanie własnych pól (definicję tego terminu poznaliśmy w poprzednich wpisach przy wtyczce ACF). Rozwiązać nasz problem możemy na dwa sposoby: używając dodatkowej wtyczki (np. WooCommerce Checkout Manager) albo poprzez kodowanie.
W tym wpisie wyjaśnię sposób drugi.

 

Na początek trochę teorii

Wtyczka WooCommerce zanim przekaże pola do wyświetlenia, najpierw je filtruje. Dzięki temu, mamy nad tymi polami pełną kontrolę – możemy je nadpisywać, usuwać lub dodawać całkiem nowe pola.

Płatność (billing):

$address_fields = apply_filters('woocommerce_billing_fields', $address_fields);</pre>

 

Zakupy (shipping):

$address_fields = apply_filters('woocommerce_shipping_fields', $address_fields);

Strona finalizacji zakupu również posiada swoją klasę i pola (checkout fields). W tym przypadku jednak istnieje cała tablica przypisująca określone pola, aczkolwiek całość jest również przepuszczana przez filtr, dzięki czemu i nad „checkout fields” mamy pełną kontrolę. Różni się jedynie sposób dojścia do nich.

Tablica:

$this->checkout_fields['billing']    = $woocommerce->countries->get_address_fields( $this->get_value('billing_country'), 'billing_' );
$this->checkout_fields['shipping']   = $woocommerce->countries->get_address_fields( $this->get_value('shipping_country'), 'shipping_' );
$this->checkout_fields['account']    = array(
    'account_username' => array(
        'type' => 'text',
        'label' => __('Account username', 'woocommerce'),
        'placeholder' => _x('Username', 'placeholder', 'woocommerce')
        ),
    'account_password' => array(
        'type' => 'password',
        'label' => __('Account password', 'woocommerce'),
        'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
        'class' => array('form-row-first')
        ),
    'account_password-2' => array(
        'type' => 'password',
        'label' => __('Account password', 'woocommerce'),
        'placeholder' => _x('Password', 'placeholder', 'woocommerce'),
        'class' => array('form-row-last'),
        'label_class' => array('hidden')
        )
    );
$this->checkout_fields['order']  = array(
    'order_comments' => array(
        'type' => 'textarea',
        'class' => array('notes'),
        'label' => __('Order Notes', 'woocommerce'),
        'placeholder' => _x('Notes about your order, e.g. special notes for delivery.', 'placeholder', 'woocommerce')
        )
    );

 

Filtr:

$this->checkout_fields = apply_filters('woocommerce_checkout_fields', $this->checkout_fields);

 

Nadpisywanie podstawowych pól WooCommerce

Tak jak wcześniej zostało wspomniane, w WooCommerce możemy albo dodać całkiem nowe, swoje pola, bądź nadpisać te, które wtyczka nam już dostarcza. By to zrobić, należy wpiąć się w „woocommerce_checkout_fields” filtr. Na potrzeby tego wpisu, zmienimy treść placeholder’a przy uwagach do zamówienia.

Obecnie treść wygląda następująco:

By to zmienić, musimy dodać funkcję w pliku functions.php znajdującym się w katalogu naszego motywu:

// robimy zaczep
add_filter( 'woocommerce_checkout_fields' , 'nadpisanie_checkout_fields' );

// nasza zaczepiona funkcja - $fields jest przekazane przez filtr!
function nadpisanie_checkout_fields( $fields ) {
     $fields['order']['order_comments']['placeholder'] = 'Nowy placeholder';
     return $fields;
}

 

A oto efekt powyższego kodu:

 

 

Dodawanie swojego pola

Dodawanie swoich pól odbywa się podobnie jak nadpisywanie, jedynie w tym przypadku nie odnosimy się już bezpośrednio do nazw czy tablic, a po prostu tworzymy całkowicie nowe pole metodą „woocommerce_form_field”. Wygląda to następująco:

add_action('woocommerce_after_order_notes', 'moje_pole');
function moje_pole($checkout)
{
    echo '<div id="moje_pole"><h2>' . __('test') . '</h2>';
    woocommerce_form_field('nazwa_pola', array(
        'type' => 'text',
        'class' => array(
            'my-field-class form-row-wide'
         ) ,
        'label' => __('moje pole') ,
        'placeholder' => __('tutaj wpisz tresc') ,
        'required' => true,
    ) , $checkout->get_value('nazwa_pola'));
   echo '</div>';
}

Efekt powyższego kodu:

 

Dodaliśmy więc akcję „moje_pole”, w której tworzymy pole o nagłówku „Test” (fragment kodu html) i miejscem do wprowadzenia tekstu (prosty textfield). Tutaj także ustalamy, czy pole musi zostać wypełnione przed zatwierdzeniem (‚required’ => true).

 

Walidacja wartości pola

Za sprawdzenie czy pole zostało wypełnione, odpowiada poniższy kod:

add_action('woocommerce_checkout_process', 'moje_pole_proces');
function moje_pole_proces()
{
   //jeśli pole nie jest wypełnione, pojawi się wiadomość z błędem
   if (!$_POST['nazwa_pola']) wc_add_notice(__('Proszę wprowadzić wartość.') , 'error');
}

 

 

Efekt kodu:

 

Zapisywanie wartości pola w meta danych

By móc później wyświetlić wartość naszego pola na późniejszych stronach lub w panelu admina, należy najpierw zaktualizować meta dane wartością wpisaną w nasze pole.
Oto kod:


add_action('woocommerce_checkout_update_order_meta', 'update_moje_pole');
function update_moje_pole($order_id)
{
    if (!empty($_POST['nazwa_pola'])) 
    {
        update_post_meta($order_id, 'Własne pole', sanitize_text_field($_POST['nazwa_pola']));
    }
}

W warunku if sprawdzamy, czy pole nie jest puste. Jeśli warunek jest spełniony, aktualizujemy meta dane metodą „update_post_meta”. Jako drugi argument metoda ta przyjmuje nazwę, pod jaką będziemy przechowywać naszą wartość z nowego pola.

 

Wyświetlanie wartości pola

Wprowadźmy najpierw jakiś tekst do naszego pola:

Aby wyświetlić wartość naszego pola np. w panelu administracyjnym, wystarczy ten krótki kod:


add_action( 'woocommerce_admin_order_data_after_shipping_address', 'wyswietlanie', 10, 1 );
function wyswietlanie($order)
{
    global $post_id;
    $order = new WC_Order( $post_id );
    echo <p><strong>'.__('Wartość nowego pola').'</strong>' . get_post_meta($order->get_id(), 'Własne pole', true ) . '</p>';
}

 

Jak można zauważyć, w metodzie „get_post_meta” za jeden z argumentów służy nam wcześniej wspomniana nazwa, która pozwala nam się odwołać do wartości przechowywanej przez nasze pole.
Oto efekt powyższego kodu:

 

Usuwanie pól

Poza dodawaniem nowych pól, możemy również usuwać pola już istniejące w szablonach dostępnych od WooCommerce.

Rzućmy najpierw okiem jak wygląda strona finalizacji przed edycją:

Z powyższego formularza usuniemy pole „Nazwa firmy (opcjonalne)”. Aby tego dokonać, do naszego pliku functions.php należy dopisać ten fragment kodu:

 


add_filter( 'woocommerce_checkout_fields' , 'usuwanie_pola' );

function usuwanie_pola( $fields ) 
{
    unset($fields['billing']['billing_company']);
    return $fields;
}

Funkcja ta w argumencie pobiera $fields – czyli pola, które mają być usunięte bądź „unset” – nieustawione. Rezultat tego kodu wygląda następująco:

Widok formularza po usunięciu pola nazwy firmy

Jak widać powyżej, pole opcjonalne z nazwą firmy nie wyświetla się już w formularzu.

 

Wyświetlenie zawartości pola w mailu informującym klienta

Normą jest, że klient po złożeniu zamówienia dostaje email potwierdzający zamówienie z informacjami o kosztach, sposobie płatności, sposobie dostawy itp. Jeśli chcemy, by w tym mailu pojawiła się również zawartość pola przez nas niedawno stworzonego, musimy użyć następującego kodu:


add_action( 'woocommerce_email_after_order_table', 'email_po_zamowieniu' );
function email_po_zamowieniu( $order ) { ?>

<h3>Nazwa pola: </h3>
<table>
<tr>
<td>Wartość: </td>
<td><?php echo wptexturize( get_post_meta( $order->id, 'Własne pole', true ) ); ?></td>
</tr>
</table>

<?php
}

Mail potwierdzający zamówienie będzie wyglądał następująco:

 

Podsumowując, WooCommerce jest bardzo pomocną, rozbudowaną i ciekawą wtyczką, pozwalającą na prowadzenie sklepu bez znajomości programowania, a z minimalną wiedzą z tej dziedziny, daje naprawdę spore pole do manewru w edycji i rozwijaniu naszego sklepu. W tym wpisie zostały opisane podstawowe możliwości edycji jakie oferuje nam wtyczka, także polecam sięgnąć do dokumentacji i dowiedzieć się więcej.

 


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *