Woocommerce – custom product data tabs

Kolejny raz spotkałem się z potrzebą stworzenia możliwości dodania dodatkowych pól do produktu. Takie pole można później wyświetlić w dodatkowej zakładce (tabs) na stronie produktu. Najczęściej spotykanym przypadkiem jest konieczność dodania np. tabeli rozmiarów w sklepie odzieżowym. Lub jak ostatnio tabeli z właściwościami technicznymi dla sklepu z piecami centralnego ogrzewania.

Hook woocommerce_product_data_tabs

WooCommerce zapewnia różne zaczepy do różnych zadań lub działań. Do umieszczenia dodatkowej zakładki w panelu administratora podczas edycji lub dodawania nowego produktu woocommerce użyjemy haka woocommerce_product_data_tabs i dodamy do niego filtr.

// dodajemy zakładkę w edycji produktu
add_filter( 'woocommerce_product_data_tabs', 'gc_product_data_tab' );

function gc_product_data_tab( $product_data_tabs ) {
 $product_data_tabs['gc-custom-tab'] = array(
 'label' => 'Rozmiarówka',
 'target' => 'gc_custom_product_data',
 'class' => array( 'show_if_simple', 'show_if_variable' ),
 );
 return $product_data_tabs;
}

Nową zakładkę nazwałem roboczo gc-custom-tab. Nazwa ta będzie istotna przy kolejnych etapach. Warto również zapamiętać, że jako cel kliknięcia zakładki (target) wpisany mamy id gc_custom_product_data, który niebawem wykorzystamy. Gdyby zależało nam na tym, aby nowa zakładka znalazła się wyżej a nie na samym końcu, należy dodać parametr priority. Przykładowo ‘priority’ => ’20’ wyświetli naszą zakładkę na drugim miejscu zaraz za ustawieniami głównymi.
Należy jeszcze wspomnieć, że podczas dodawania zakładki mamy dostępne następujące klasy warunkujące jej wyświetlanie.

• show_if_simple – pokaż tylko dla prostych produktów
• hide_if_simple – ukryj jeśli produkt jest prosty
• show_if_variable – pokaż jeśli produkt z wariantami
• show_if_downloadable – pokaż jeśli produkt do pobrania
• hide_if_virtual – ukryj jeśli produkt wirtualny

Powyższy kod umieszczony w functions.php spowoduje dodanie nowej zakładki podczas edycji produktu woocommerce. Dokładnie jak na poniższym zrzucie ekranu.

Custom tab css

W pierwszym etapie utworzyliśmy jedynie pustą zakładkę. Brak tam jakichkolwiek pół do edycji. Przy nazwie zakładki mamy domyślną ikonę. Może na początek najmniej istotna kwestia czyli wymiana ikony. Zrobimy to w najprostszy sposób, czyli wklejając css do nagłówka za pomocą akcji admin_head. Dla ułatwienia wykorzystamy, którąś z dostępnych ikon WooCommerce. Na tym etapie przyda nam się zapamiętana nazwa naszej zakładki czyli gc-custom-tab ponieważ dzięki niej dotrzemy we wpisie css do odpowiedniego elementu: li.gc-custom-tab_options.

function gc_custom_style() { 
?>
<style>
 #woocommerce-product-data ul.wc-tabs li.gc-custom-tab_options a:before { 
 font-family: WooCommerce; 
 content: '\e038'; 
 } 
</style>
<?php 
} 
add_action( 'admin_head', 'gc_custom_style' ); 

Powyższy kod pozwolił nam na zmianę ikony przy nowej zakładce “Rozmiarówka”. Efekt widoczny na poniższym zrzucie ekranu.

Woocommerce product data panels

Teraz najważniejszy etap, czyli stworzenie zawartości w panelu naszej zakładki. Żeby nie było tak prosto to podejmę się zadania stworzenia edytowalnej zawartości, co pozwoli nam na umieszczenie kodu html. Choćby wspomnianej wcześniej tabeli z rozmiarami. Do stworzenia edytowalnego pola wykorzystam wbudowaną funkcję wp_editor. Natomiast sam panel stworzymy dodając akcję do woocommerce_product_data_panels.

 
add_action('woocommerce_product_data_panels', 'gc_product_data_fields'); 
function gc_product_data_fields() { 
global $post; 
// id musi być takie samo jak target w gc-custom-tab 
?>
<div id = 'gc_custom_product_data' class = 'panel woocommerce_options_panel' >; 
 <div class = 'options_group'>
 <?php 
 $tabela_rozmiar = get_post_meta( $post->ID, 'rozmiar_tabela', true ); 
 if (empty($tabela_rozmiar)) 
 $tabela_rozmiar = &amp;amp;lt;table class="rozmiarowka"&amp;amp;gt; 
 &amp;amp;lt;tbody&amp;amp;gt;&amp;amp;lt;tr&amp;amp;gt;&amp;amp;lt;td align="center"&amp;amp;gt;&amp;amp;lt;/td&amp;amp;gt; 
 &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;&amp;amp;amp;lt;img src="/media/static/sizeKoszulkiA.gif" alt="" /&amp;amp;amp;gt;&amp;amp;amp;lt;/td&amp;amp;amp;gt; 
 &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;&amp;amp;amp;lt;img src="/media/static/sizeKoszulkiD.gif" alt="" /&amp;amp;amp;gt;&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;/tr&amp;amp;amp;gt; 
 &amp;amp;amp;lt;tr&amp;amp;amp;gt; &amp;amp;amp;lt;th align="center"&amp;amp;amp;gt;XS&amp;amp;amp;lt;/th&amp;amp;amp;gt; 
 &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;/tr&amp;amp;amp;gt; 
 &amp;amp;amp;lt;tr&amp;amp;amp;gt; &amp;amp;amp;lt;th align="center"&amp;amp;amp;gt;S&amp;amp;amp;lt;/th&amp;amp;amp;gt; &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;/tr&amp;amp;amp;gt; 
 &amp;amp;amp;lt;tr&amp;amp;amp;gt; &amp;amp;amp;lt;th align="center"&amp;amp;amp;gt;M&amp;amp;amp;lt;/th&amp;amp;amp;gt; &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;/tr&amp;amp;amp;gt; 
 &amp;amp;amp;lt;tr&amp;amp;amp;gt; &amp;amp;amp;lt;th align="center"&amp;amp;amp;gt;L&amp;amp;amp;lt;/th&amp;amp;amp;gt; &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;td align="center"&amp;amp;amp;gt;-&amp;amp;amp;lt;/td&amp;amp;amp;gt; &amp;amp;amp;lt;/tr&amp;amp;amp;gt; 
 &amp;amp;amp;lt;/tbody&amp;amp;amp;gt; &amp;amp;amp;lt;/table&amp;amp;amp;gt;'; 

 wp_editor( $tabela_rozmiar, 'rozmiar_tabela', array( 'media_buttons' =&amp;amp;amp;gt; false, 'textarea_rows' =&amp;amp;amp;gt; 8, 'tabindex' =&amp;amp;amp;gt; 4, 'tinymce' =&amp;amp;amp;gt; array( 'theme_advanced_buttons1' =&amp;amp;amp;gt; 'bold, italic, ul, min_size, max_size', 'theme_advanced_buttons2' =&amp;amp;amp;gt; '', 'theme_advanced_buttons3' =&amp;amp;amp;gt; '', 'theme_advanced_buttons4' =&amp;amp;amp;gt; '', ), )); 
 ?&amp;amp;amp;gt; 
 &amp;amp;amp;lt;/div&amp;amp;amp;gt; &amp;amp;amp;lt;/div&amp;amp;amp;gt; &amp;amp;amp;lt;?php } 

Efekt działania tego kodu widać na poniższym zrzucie. Czyli klient tworząc nowy produkt dostaje szablon gotowej tabeli, którą musi jedynie wypełnić kilkoma liczbami. Nie ma potrzeby kopiowania kodu tabeli z innego produktu. Jest to dość wygodne rozwiązanie i może być rozsądne w wielu sytuacjach szczególnie gdy mamy jakieś zestawienia tabelaryczne lub inne udziwnienia wymagające kodu html.

Na koniec musimy zapisać zawartość naszego pola. W starszych wersjach woocommerce, do zapisu prostego produktu używaliśmy funkcji woocommerce_process_product_meta_simple. Natomiast do zapisu produktu z wariantami używaliśmy woocommerce_process_product_meta_variable.

function gc_save_proddata_custom_fields($post_id) {
 $rozmiar_tabela = $_POST['rozmiar_tabela'];
 if (!empty($rozmiar_tabela)) {
 update_post_meta($post_id, 'rozmiar_tabela', $rozmiar_tabela);
 }
}
// zapis dla produktu prostego
add_action( 'woocommerce_process_product_meta_simple', 'gc_save_proddata_custom_fields' );
// dla zapisu wariantu osobna funkcja
add_action( 'woocommerce_process_product_meta_variable', 'gc_save_proddata_custom_fields' );

W nowej wersji Woocommerce (od wersji 3.0.2) mamy do dyspozycji hak (hook) woocommerce_process_product_meta.

function gc_save_proddata_custom_fields( $post_id ) { 
 $rozmiar_tabela = $_POST['rozmiar_tabela'];
 if (!empty($rozmiar_tabela)) {
 update_post_meta($post_id, 'rozmiar_tabela', $rozmiar_tabela);
 }
}; 
 
add_action('woocommerce_process_product_meta', 'gc_save_proddata_custom_fields' );