{"id":233674,"date":"2023-02-19T13:23:00","date_gmt":"2023-02-19T10:23:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233674"},"modified":"2022-11-11T08:47:41","modified_gmt":"2022-11-11T05:47:41","slug":"tworz-niestandardowe-zakladki-produktow-woocommerce-z-zaawansowanymi-polami-niestandardowymi","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/tworz-niestandardowe-zakladki-produktow-woocommerce-z-zaawansowanymi-polami-niestandardowymi\/","title":{"rendered":"Tw\u00f3rz niestandardowe zak\u0142adki produkt\u00f3w WooCommerce z zaawansowanymi polami niestandardowymi"},"content":{"rendered":"\n<p>Podczas przegl\u0105dania produktu w <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerce<\/a> informacje o produkcie s\u0105 wy\u015bwietlane w zak\u0142adkach. Te zak\u0142adki s\u0105 naprawione i generowane przez WooCommerce, poza Twoj\u0105 kontrol\u0105. W tym po\u015bcie dowiesz si\u0119, jak doda\u0107 kod, kt\u00f3ry pozwala autorom dodawa\u0107 niestandardowe karty z niestandardow\u0105 tre\u015bci\u0105 do produkt\u00f3w.<\/p>\n<p>Zastrze\u017cenie: Istnieje rozszerzenie WooCommerce o nazwie <a href=\"https:\/\/woocommerce.com\/products\/woocommerce-tab-manager\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WooCommerce Tab Manager<\/a>, kt\u00f3re zapewnia t\u0119 funkcj\u0119. To jednak nie jest darmowe. Nie testowa\u0142em tego sam, ale o ile widz\u0119, obs\u0142uguje tylko edytor WYSIWYG (to, co widzisz, to to, co dostajesz) dla zawarto\u015bci zak\u0142adki. Ten post jest dla tych, kt\u00f3rzy chc\u0105 bardziej dopracowa\u0107 zawarto\u015b\u0107 zak\u0142adki lub samodzielnie napisa\u0107 kod bez p\u0142acenia za kolejn\u0105 wtyczk\u0119.<\/p>\n<p>Aby upro\u015bci\u0107 proces, u\u017cyjemy wtyczki <a href=\"https:\/\/www.advancedcustomfields.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Advanced Custom Fields (ACF).<\/a> Ale powiniene\u015b by\u0107 w stanie do\u015b\u0107 \u0142atwo zast\u0105pi\u0107 cz\u0119\u015b\u0107 ACF w\u0142asnym niestandardowym kodem, je\u015bli nie chcesz u\u017cywa\u0107 wtyczki. ACF jest dost\u0119pny w <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wersji darmowej<\/a> i wersji <a href=\"https:\/\/www.advancedcustomfields.com\/pro\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Pro<\/a>. W ACF Pro jest sprytny typ pola: repeater, kt\u00f3ry idealnie nadaje si\u0119 do tego typu zastosowa\u0144. Je\u015bli jednak nie masz lub nie chcesz kupi\u0107 licencji Pro, nie martw si\u0119. Poni\u017cszy samouczek kodu poka\u017ce Ci, jak dodawa\u0107 pola za pomoc\u0105 zar\u00f3wno darmowej wersji, jak i repeatera w wersji Pro.<\/p>\n<p>Je\u015bli nie znasz jeszcze ACF, to, w czym pomaga nam ACF, jest \u0142atwa konfiguracja p\u00f3l meta postu \u2013 wszelkiego rodzaju. Mo\u017cesz \u0142atwo doda\u0107 edytor, selektor plik\u00f3w, selektor dat lub kolor\u00f3w, selektor post\u00f3w lub kategorii z obs\u0142ug\u0105 wielu wybor\u00f3w i zmiany kolejno\u015bci i nie tylko. To samo mo\u017cemy osi\u0105gn\u0105\u0107 bez ACF, ale wtedy musieliby\u015bmy sami kodowa\u0107 wy\u015bwietlanie i zapisywanie zawarto\u015bci metaboks\u00f3w.<\/p>\n<h2>Co zrobimy<\/h2>\n<p>M\u00f3wi\u0105c pro\u015bciej, chcemy umo\u017cliwi\u0107 dodawanie niestandardowych zak\u0142adek do widoku produktu. Ka\u017cda karta obs\u0142uguje tytu\u0142 wy\u015bwietlany jako etykieta karty oraz zawarto\u015b\u0107, kt\u00f3ra jest wy\u015bwietlana po klikni\u0119ciu karty. Niestandardowe zak\u0142adki naprawd\u0119 zale\u017c\u0105 od rodzaju projektu lub potrzeb; mo\u017ce potrzebujesz zak\u0142adek ze specyfikacjami technicznymi, zak\u0142adk\u0105 z plikami (np. podr\u0119czniki u\u017cytkownika itp.), dodatkowymi informacjami lub niestandardowym zapytaniem wy\u015bwietlaj\u0105cym powi\u0105zane produkty.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e196664e9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e196664e9.png\" alt=\"Tw\u00f3rz niestandardowe zak\u0142adki produkt\u00f3w WooCommerce z zaawansowanymi polami niestandardowymi\" ><\/a><\/p>\n<p>W tym samouczku zachowamy prostot\u0119, dodaj\u0105c edytor WYSIWYG do zawarto\u015bci zak\u0142adek. Jak wspomniano powy\u017cej, \u0142atwo jest zaimplementowa\u0107 inne typy p\u00f3l (np. pliki lub zapytanie post), to tylko r\u00f3\u017cnica w kodzie, kt\u00f3ry piszesz, aby wy\u015bwietli\u0107 zawarto\u015b\u0107 zak\u0142adki \u2013 co nie jest zwi\u0105zane z tym samouczkiem.<\/p>\n<p>Je\u015bli masz ACF Pro i chcesz u\u017cy\u0107 repeatera do \u0142atwego dodawania wielu kart; pomi\u0144 nast\u0119pn\u0105 sekcj\u0119. Je\u015bli masz tylko bezp\u0142atn\u0105 wersj\u0119 ACF, kontynuuj. Wad\u0105 braku pola repeatera jest to, \u017ce musisz zdefiniowa\u0107 sta\u0142\u0105 liczb\u0119 zak\u0142adek. Tak wi\u0119c autor nie mo\u017ce tworzy\u0107 nieograniczonej liczby zak\u0142adek, jak mo\u017ce z repeaterem. Ale to bezp\u0142atne rozwi\u0105zanie b\u0119dzie dzia\u0142a\u0107 dobrze w sklepach internetowych, w kt\u00f3rych potrzebujesz tylko okre\u015blonych (liczby) niestandardowych zak\u0142adek.<\/p>\n<h2>Samouczek dla bezp\u0142atnej wersji ACF<\/h2>\n<h3>Dodawanie p\u00f3l ACF<\/h3>\n<p>Dodanie nowego metaboksu z polami jest naprawd\u0119 \u0142atwe dzi\u0119ki ACF. Masz dwie opcje; u\u017cyj interfejsu u\u017cytkownika ACF do skonfigurowania wszystkiego lub dodaj pola wed\u0142ug kodu. Zwykle ustawienie p\u00f3l w admin to droga. Ale je\u015bli chcesz upewni\u0107 si\u0119, \u017ce pola istniej\u0105 w wielu witrynach WordPress (np. Programowanie hosta lokalnego, serwer testowy i serwer na \u017cywo), mo\u017cesz skorzysta\u0107 z dodania p\u00f3l wed\u0142ug kodu w motywie lub wtyczce.<\/p>\n<p>Musisz skonfigurowa\u0107 nast\u0119puj\u0105ce elementy:<\/p>\n<ul>\n<li>Grupa, kt\u00f3ra wy\u015bwietla si\u0119, gdy typ wpisu jest r\u00f3wny produktom WooCommerce<\/li>\n<li>Wprowadzanie tekstu dla tytu\u0142u karty<\/li>\n<li>Jakiekolwiek pola chcesz dla zawarto\u015bci karty. Jako przyk\u0142ad dodamy edytor WYSIWYG.<\/li>\n<li>(Opcjonalnie) Dodatkowe tytu\u0142y kart i zawarto\u015b\u0107 kart dla tylu kart, kt\u00f3re chcemy obs\u0142ugiwa\u0107.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e197a93a6.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e197a93a6.png\" alt=\"Tw\u00f3rz niestandardowe zak\u0142adki produkt\u00f3w WooCommerce z zaawansowanymi polami niestandardowymi\" ><\/a><\/p>\n<p>Pami\u0119taj, aby zapami\u0119ta\u0107 nazwy p\u00f3l, poniewa\u017c b\u0119dziesz musia\u0142 si\u0119 do nich p\u00f3\u017aniej odwo\u0142ywa\u0107. Zdefiniowa\u0142em tytu\u0142 zak\u0142adki jako <code>tab_title<\/code>i pole WYSIWYG jako <code>tab_contents<\/code>.<\/p>\n<p>Je\u015bli wolisz doda\u0107 pola wed\u0142ug kodu, oto przyk\u0142ad. Dodaj to w pliku motywu <code>functions.php<\/code>lub wtyczki:<\/p>\n<pre><code>if (class_exists('acf')) {\n    add_action('acf\/init', function() {\n        $fields = [\n            [\n                'key' =&gt; 'field_tab_title',\n                'label' =&gt; __('Custom tab title', 'txtdomain'),\n                'name' =&gt; 'tab_title',\n                'type' =&gt; 'text',\n            ],\n            [\n                'key' =&gt; 'field_tab_contents',\n                'label' =&gt; __('Custom tab content', 'txtdomain'),\n                'name' =&gt; 'tab_contents',\n                'type' =&gt; 'wysiwyg',\n                'tabs' =&gt; 'all',\n                'toolbar' =&gt; 'full',\n                'media_upload' =&gt; 1,\n                'delay' =&gt; 0,\n            ],\n        ];\n\u00a0\n        acf_add_local_field_group([\n            'key' =&gt; 'group_custom_woocommerce_tabs',\n            'title' =&gt; __('Custom Tabs', 'txtdomain'),\n            'fields' =&gt; $fields,\n            'label_placement' =&gt; 'top',\n            'menu_order' =&gt; 0,\n            'style' =&gt; 'default',\n            'position' =&gt; 'normal',\n            'location' =&gt; [\n                [\n                    [\n                        'param' =&gt; 'post_type',\n                        'operator' =&gt; '==',\n                        'value' =&gt; 'product'\n                    ]\n                ]\n            ],\n        ]);\n    });\n}<\/code><\/pre>\n<p>Je\u015bli potrzebujesz wi\u0119cej ni\u017c jednej karty, po prostu dodaj kolejny zestaw tytu\u0142u karty i zawarto\u015bci karty po <code>line #19<\/code>. Pami\u0119taj tylko, aby zachowa\u0107 <code>name<\/code>niepowtarzalno\u015b\u0107.<\/p>\n<p>Kiedy edytujemy produkt, powinni\u015bmy zobaczy\u0107 ten metabox:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e198aac0f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e198aac0f.png\" alt=\"Tw\u00f3rz niestandardowe zak\u0142adki produkt\u00f3w WooCommerce z zaawansowanymi polami niestandardowymi\" ><\/a><\/p>\n<h3>Wyprowadzanie niestandardowych kart<\/h3>\n<p>WooCommerce pozwala nam filtrowa\u0107 <code>woocommerce_product_tabs<\/code>pod k\u0105tem manipulowania zak\u0142adkami. Jako argument tego filtra otrzymasz tablic\u0119 dla wszystkich kart. Tablica sk\u0142ada si\u0119 z tablic dla ka\u017cdej karty z unikalnymi kluczami. Ale tablica dla ka\u017cdej karty nie zawiera rzeczywistego wyniku zawarto\u015bci karty. Zamiast tego oczekuje wywo\u0142ania zwrotnego \u2013 nazwy funkcji, kt\u00f3r\u0105 WooCommerce uruchomi w celu wyprowadzenia zawarto\u015bci karty.<\/p>\n<p>Po wej\u015bciu do funkcji mo\u017cesz u\u017cy\u0107 <code>global $post<\/code>, aby uzyska\u0107 dost\u0119p do bie\u017c\u0105cego obiektu posta, lub je\u015bli chcesz, aby obiekt produktu wygenerowa\u0142 WooCommerce, po prostu zr\u00f3b <code>global $product<\/code>. Potrzebujemy identyfikatora posta, aby pobra\u0107 warto\u015b\u0107 naszych p\u00f3l niestandardowych za pomoc\u0105 funkcji ACF <code>[get_field](https:\/\/www.advancedcustomfields.com\/resources\/get_field\/)()<\/code>. W poni\u017cszym przyk\u0142adzie kodu pobieramy tylko tytu\u0142 karty i sprawdzamy, czy jest pusta, czy nie. Je\u015bli tak nie jest, dodaje now\u0105 kart\u0119 do tablicy. Nie nale\u017cy dodawa\u0107 kart, w kt\u00f3rych tytu\u0142 karty jest pusty.<\/p>\n<pre><code>if (class_exists('acf') &amp;&amp; class_exists('WooCommerce')) {\n    add_filter('woocommerce_product_tabs', function($tabs) {\n        global $post, $product;  \/\/ Access to the current product or post\n        $custom_tab_title = get_field('tab_title', $post-&gt;ID);\n\u00a0\n        if (!empty($custom_tab_title)) {\n            $tabs['awp-'. sanitize_title($custom_tab_title)] = [\n                'title' =&gt; $custom_tab_title,\n                'callback' =&gt; 'awp_custom_woocommerce_tabs',\n                'priority' =&gt; 10\n            ];\n        }\n        return $tabs;\n    });\n\u00a0\n    function awp_custom_woocommerce_tabs($key, $tab) {\n        global $post;\n\u00a0\n        ?&gt;&lt;h2&gt;&lt;?php echo $tab['title']; ?&gt;&lt;\/h2&gt;&lt;?php\n\u00a0\n        $custom_tab_contents = get_field('tab_contents', $post-&gt;ID);\n        echo $custom_tab_contents;\n    }\n}<\/code><\/pre>\n<p>Pami\u0119taj, \u017ce mo\u017cesz u\u017cy\u0107 &#8217; <code>priority<\/code>&#8217; do kontrolowania pozycji zak\u0142adki. Na przyk\u0142ad ustawienie go na 1 spowoduje, \u017ce Twoja karta pojawi si\u0119 jako pierwsza, przed wszystkimi kartami WooCommerce. Zdefiniuj nazw\u0119 funkcji dla <code>callback<\/code>elementu \u201e &quot;. W linii <code>#17<\/code>definiujemy funkcj\u0119, kt\u00f3r\u0105 uruchomi WooCommerce do wyprowadzania zawarto\u015bci karty.<\/p>\n<p>Te funkcje wywo\u0142ania zwrotnego kart otrzymaj\u0105 dwa parametry; klucz i element tablicy wszystkich warto\u015bci dla bie\u017c\u0105cej karty. Wewn\u0105trz naszej funkcji zwrotnej ponownie wypisujemy tytu\u0142 karty, odwo\u0142uj\u0105c si\u0119 do dostarczonej <code>$tab<\/code>tablicy. WooCommerce powtarza swoje tytu\u0142y kart wewn\u0105trz a <code>h2<\/code>, wi\u0119c robimy to samo. A nast\u0119pnie u\u017cywamy, <code>get_field()<\/code>aby uzyska\u0107 warto\u015b\u0107 zawarto\u015bci karty i po prostu powt\u00f3rzy\u0107 warto\u015b\u0107. Dostosuj lini\u0119, <code>#23<\/code>aby pasowa\u0142a do dowolnego typu p\u00f3l, kt\u00f3re doda\u0142e\u015b (np. selektor obiekt\u00f3w postu, obrazy lub co\u015b innego).<\/p>\n<p>Zwr\u00f3\u0107 uwag\u0119, \u017ce umie\u015bci\u0142em wszystko w sprawdzaniu if, kt\u00f3re sprawdza, czy aktywowane s\u0105 zar\u00f3wno WooCommerce, jak i ACF. Jest to dobra praktyka, aby zapobiec uszkodzeniu witryny.<\/p>\n<p>I <strong>to wszystko<\/strong>! Uda\u0142o Ci si\u0119 stworzy\u0107 kod do dodawania niestandardowych zak\u0142adek WooCommerce!<\/p>\n<p>Je\u015bli chcesz to zrobi\u0107 z polem wzmacniaka ACF Pro, aby obs\u0142ugiwa\u0107 nieograniczon\u0105 liczb\u0119 zak\u0142adek, czytaj dalej.<\/p>\n<h2>Samouczek dla ACF Pro i repeatera<\/h2>\n<h3>Dodawanie p\u00f3l ACF<\/h3>\n<p>Dodaj swoj\u0105 grup\u0119 za pomoc\u0105 interfejsu administratora ACF lub dodaj\u0105c j\u0105 za pomoc\u0105 kodu w motywie lub plikach wtyczek. Musimy skonfigurowa\u0107 nast\u0119puj\u0105ce elementy:<\/p>\n<ul>\n<li>Grupa, kt\u00f3ra wy\u015bwietla si\u0119, gdy typ wpisu jest r\u00f3wny produktowi WooCommerce<\/li>\n<li>Repeater z nast\u0119puj\u0105cymi podpolami:\n<ul>\n<li>Wprowadzanie tekstu dla tytu\u0142u karty<\/li>\n<li>Jakiekolwiek pola chcesz dla zawarto\u015bci karty.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>W ten spos\u00f3b mo\u017cesz to skonfigurowa\u0107 za pomoc\u0105 administratora ACF:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19a1ed6d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19a1ed6d.png\" alt=\"Tw\u00f3rz niestandardowe zak\u0142adki produkt\u00f3w WooCommerce z zaawansowanymi polami niestandardowymi\" ><\/a><\/p>\n<p>Lub mo\u017cesz doda\u0107 grup\u0119 wed\u0142ug kodu w nast\u0119puj\u0105cy spos\u00f3b:<\/p>\n<pre><code>if (class_exists('acf')) {\n    add_action('acf\/init', function() {\n        $fields = [\n            [\n                'key' =&gt; 'field_custom_tabs_repeater',\n                'label' =&gt; __('Custom tabs', 'txtdomain'),\n                'name' =&gt; 'custom_tabs_repeater',\n                'type' =&gt; 'repeater',\n                'layout' =&gt; 'row',\n                'button_label' =&gt; __('Add new tab', 'txtdomain'),\n                'sub_fields' =&gt; [\n                    [\n                        'key' =&gt; 'field_tab_title',\n                        'label' =&gt; __('Tab title', 'txtdomain'),\n                        'name' =&gt; 'tab_title',\n                        'type' =&gt; 'text',\n                    ],\n                    [\n                        'key' =&gt; 'field_tab_contents',\n                        'label' =&gt; __('Tab content', 'txtdomain'),\n                        'name' =&gt; 'tab_contents',\n                        'type' =&gt; 'wysiwyg',\n                        'tabs' =&gt; 'all',\n                        'toolbar' =&gt; 'full',\n                        'media_upload' =&gt; 1,\n                        'delay' =&gt; 0,\n                    ],\n                ],\n            ],\n        ];\n\u00a0\n        acf_add_local_field_group([\n            'key' =&gt; 'group_custom_woocommerce_tabs',\n            'title' =&gt; __('Custom Tabs', 'txtdomain'),\n            'fields' =&gt; $fields,\n            'label_placement' =&gt; 'top',\n            'menu_order' =&gt; 0,\n            'style' =&gt; 'default',\n            'position' =&gt; 'normal',\n            'location' =&gt; [\n                [\n                    [\n                        'param' =&gt; 'post_type',\n                        'operator' =&gt; '==',\n                        'value' =&gt; 'product'\n                    ]\n                ]\n            ],\n        ]);\n    });\n}<\/code><\/pre>\n<p>Tak czy inaczej, podczas edycji produkt\u00f3w powiniene\u015b otrzyma\u0107 ten metabox:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19e02c1d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152607-61e4e19e02c1d.png\" alt=\"Tw\u00f3rz niestandardowe zak\u0142adki produkt\u00f3w WooCommerce z zaawansowanymi polami niestandardowymi\" ><\/a><\/p>\n<h3>Wyprowadzanie niestandardowych kart<\/h3>\n<p>Wyprowadzanie niestandardowych kart jest bardzo podobne do tego, co zrobili\u015bmy powy\u017cej w bezp\u0142atnej wersji. Filtrujemy <code>woocommerce_product_tabs<\/code>, ale tutaj przechodzimy przez ka\u017cdy powt\u00f3rzony element z repeatera. Potrzebujemy sposobu na zidentyfikowanie ka\u017cdego elementu w repeaterze za pomoc\u0105 kluczy, wi\u0119c sami generujemy klucz, u\u017cywaj\u0105c pozycji p\u0119tli i wersji tytu\u0142u tabulatora. W funkcji zwrotnej wyodr\u0119bniamy pozycj\u0119 p\u0119tli z klucza i u\u017cywamy jej do odwo\u0142ywania si\u0119 do tablicy naszego repeatera.<\/p>\n<pre><code>if (class_exists('acf') &amp;&amp; class_exists('WooCommerce')) {\n    add_filter('woocommerce_product_tabs', function($tabs) {\n        global $post, $product;  \/\/ Access to the current product or post\n        $custom_tabs_repeater = get_field('custom_tabs_repeater', $post-&gt;ID);\n\u00a0\n        if (!empty($custom_tabs_repeater)) {\n            $counter = 0;\n            $start_at_priority = 10;\n            foreach ($custom_tabs_repeater as $custom_tab) {\n                $tab_id = $counter. '_'. sanitize_title($custom_tab['tab_title']);\n                $tabs[$tab_id] = [\n                    'title' =&gt; $custom_tab['tab_title'],\n                    'callback' =&gt; 'awp_custom_woocommerce_tabs',\n                    'priority' =&gt; $start_at_priority++\n                ];\n                $counter++;\n            }\n        }\n        return $tabs;\n    });\n\u00a0\n    function awp_custom_woocommerce_tabs($key, $tab) {\n        global $post;\n\u00a0\n        ?&gt;&lt;h2&gt;&lt;?php echo $tab['title']; ?&gt;&lt;\/h2&gt;&lt;?php\n\u00a0\n        $custom_tabs_repeater = get_field('custom_tabs_repeater', $post-&gt;ID);\n        $tab_id = explode('_', $key);\n        $tab_id = $tab_id[0];\n\u00a0\n        echo $custom_tabs_repeater[$tab_id]['tab_contents'];\n    }\n}<\/code><\/pre>\n<p>Wewn\u0105trz naszej funkcji filtruj\u0105cej pobieramy warto\u015b\u0107 repeatera i sprawdzamy, czy nie jest pusty. Nast\u0119pnie definiujemy zmienn\u0105 licznika, zaczynaj\u0105c od 0 (tablice zawsze zaczynaj\u0105 si\u0119 od pozycji 0), kt\u00f3r\u0105 zwi\u0119kszamy o 1 dla ka\u017cdego elementu wewn\u0105trz p\u0119tli (w linii <code>#18<\/code>). W p\u0119tli dla ka\u017cdego elementu repeatera przypisujemy je wszystkie do tej samej funkcji zwrotnej. U\u017cywamy funkcji WordPressa, <code>[sanitize_title](https:\/\/developer.wordpress.org\/reference\/functions\/sanitize_title\/)()<\/code>aby przekonwertowa\u0107 tytu\u0142 karty na jej wersj\u0119 \u015blimakow\u0105 i do\u0142\u0105czymy go do klucza.<\/p>\n<p>W naszej funkcji zwrotnej w wierszu <code>#31 - 32<\/code>wykonujemy kilka prostych manipulacji ci\u0105gami znak\u00f3w, aby wyodr\u0119bni\u0107 warto\u015b\u0107 licznika (kt\u00f3ra zaczyna si\u0119 od 0 i jest zwi\u0119kszana o 1 dla ka\u017cdego elementu). Nast\u0119pnie u\u017cywamy tego po prostu jako indeksu tablicy repeater\u00f3w, aby pobra\u0107 prawid\u0142owe pole zawarto\u015bci karty.<\/p>\n<p>I <strong>to wszystko<\/strong>! Wdro\u017cy\u0142e\u015b nieograniczon\u0105 liczb\u0119 niestandardowych zak\u0142adek w WooCommerce!<\/p>\n<p>Pami\u0119taj, \u017ce WYSIWYG mo\u017cesz zast\u0105pi\u0107 dowolnym rodzajem pola. Musisz tylko zmieni\u0107 spos\u00f3b wyprowadzania pola w wierszu <code>#23<\/code>.<\/p>\n<h2>Wniosek<\/h2>\n<p>Pisanie w\u0142asnego kodu do dodawania niestandardowych zak\u0142adek WooCommerce jest naprawd\u0119 \u0142atwe, gdy zrozumiesz podstawow\u0105 koncepcj\u0119 tego, jak robi to WooCommerce. Nie wymaga nawet du\u017cej ilo\u015bci kodu. To idealne rozwi\u0105zanie dla tych, kt\u00f3rzy nie chc\u0105 lub nie mog\u0105 inwestowa\u0107 w licencje rozszerzaj\u0105ce lub po prostu potrzebuj\u0105 prostego rozwi\u0105zania dla swojego sklepu internetowego.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Samouczek dotycz\u0105cy dodawania niestandardowych zak\u0142adek WooCommerce do produkt\u00f3w. Zobacz, jak \u0142atwo to zrobi\u0107 dzi\u0119ki wtyczce Advanced Custom Fields i odrobinie kodu.<\/p>\n","protected":false},"author":1,"featured_media":224911,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,721,1110,815,845,845,856,856,866,866,815],"tags":[1169],"class_list":{"0":"post-233674","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-deweloper","9":"category-n-a","10":"category-wtyczki","11":"category-samouczki","13":"category-woocommerce-7","15":"category-wordpress-7","18":"tag-affiai-pl"},"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=233674"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/233674\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224911"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=233674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=233674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=233674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}