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 = <table class="rozmiarowka"> 
     <tbody><tr><td align="center"></td> 
     <td align="center"><img src="/media/static/sizeKoszulkiA.gif" alt="" /></td> 
     <td align="center"><img src="/media/static/sizeKoszulkiD.gif" alt="" /></td> </tr> 
     <tr> <th align="center">XS</th> 
     <td align="center">-</td> <td align="center">-</td> </tr> 
     <tr> <th align="center">S</th> <td align="center">-</td> <td align="center">-</td> </tr> 
     <tr> <th align="center">M</th> <td align="center">-</td> <td align="center">-</td> </tr> 
     <tr> <th align="center">L</th> <td align="center">-</td> <td align="center">-</td> </tr> 
     </tbody> </table>'; 

     wp_editor( $tabela_rozmiar, 'rozmiar_tabela', array( 'media_buttons' => false, 'textarea_rows' => 8, 'tabindex' => 4, 'tinymce' => array( 'theme_advanced_buttons1' => 'bold, italic, ul, min_size, max_size', 'theme_advanced_buttons2' => '', 'theme_advanced_buttons3' => '', 'theme_advanced_buttons4' => '', ), )); 
    ?> 
    </div> </div> <?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' );