wPHP - wordpress, woocommerce - kodowanie bez wtyczek
WordPress - zakoduj to sam w PHP
woocommerce_product_data_tabs-editor

Woocommerce – custom product data tabs

Grzegorz Chodacki2 stycznia 2020dla admina, woocommerce woocommerce_process_product_meta_simple, woocommerce_process_product_meta_variable, woocommerce_product_data_panels, woocommerce_product_data_tabs, wp_editor

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.

woocommerce produkt nowa zakładka
Tworzenie nowej zakładki edycji produktu – woocommerce_product_data_tabs

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.

icon custom product data tab
Ikona w nowej zakładce edycji produktu woocommerce

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.

woocommerce custom field editor 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' ); 
Woocommerce – automatyczne dodawanie atrybutów Modyfikacja woocommerce breadcrumbs

Related Posts

layout, woocommerce

Wyszukiwanie postów tylko po tytułach

Temat wydawał się dość prosty, a jednak zajął mi trochę czasu. Wujek Google wcale nie jest tak łaskawy w odpowiedzi na pytanie co zrobić aby wyniki wyszukiwania w wordpress obejmowały jedynie szukanie po tytułach postów (produktów) a nie po całej treści (opisie).

optymalizacja, woocommerce

Jak przyspieszyć stronę wyłączając odświeżanie koszyka woocoomerce

Bardzo często zdarza się, że nasza strona z woocommerce działa wolno. Narzędzia do testowania prędkości typu GTMetrix, często pokazują, że wpływ na prędkość ładowania strony może mieć skrypt wc-ajax=get_refreshed_fragments. Generuje on opóźnienia i obciążenie serwera. Do czego jest on potrzebny, czy jest potrzebny i jak go wyłączyć?

layout, woocommerce

Dodanie niestandardowych pól do produktu WooCoomerce

Zagadnienie dotyczy innego podejścia niż przy poprzednim wpisie. Poprzednio dla produktów prostych i produktów z wariantami wyliczana była cena za 1m2 na podstawie wymiarów produktu po czym wyświetlana na karcie produktu. Tym razem dodamy dodatkowe pola od strony zaplecza, tj. cenę (pole input) oraz jednostkę (pole wyboru select). Trudność polega na tym, że w zależności […]

Ostatnie wpisy

  • Jak wyłączyć odzyskiwanie hasła
  • Pobieranie aktualnego kursu walut przez API NBP
  • Poczta interia – nie dochodzą maile
  • Wyszukiwanie postów tylko po tytułach
  • Related product – produkty podobne w woocommerce

Najnowsze komentarze

    Archiwa

    • wrzesień 2022
    • lipiec 2022
    • kwiecień 2022
    • marzec 2022
    • październik 2021
    • wrzesień 2021
    • kwiecień 2021
    • marzec 2021
    • grudzień 2020
    • lipiec 2020
    • marzec 2020
    • luty 2020
    • styczeń 2020
    • maj 2019
    • luty 2019
    • listopad 2018
    • sierpień 2018
    • czerwiec 2018
    • maj 2018
    • marzec 2018
    • luty 2018
    • styczeń 2018

    Kategorie

    • dla admina
    • layout
    • optymalizacja
    • woocommerce

    Meta

    • Zaloguj się
    • Kanał wpisów
    • Kanał komentarzy
    • WordPress.org
    Strony na Wordpress - uKONTENTowani.pl
    TO NIE JEST STRONA DLA INSTALATORÓW WTYCZEK