Dodano 2019-06-04 08:44:27 przez Klaudia
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.
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);
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 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).
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:
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.
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:
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:
Jak widać powyżej, pole opcjonalne z nazwą firmy nie wyświetla się już w formularzu.
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.