Jak programowo utworzyć niestandardowy typ produktu WooCommerce

Kiedy budujesz złożony sklep WooCommerce, być może będziesz musiał stworzyć własne rozwiązania konkretnych problemów. Jednym z tych problemów jest brak określonych typów produktów WooCommerce. Właśnie dlatego w QuadLayers przynieśliśmy Ci nasz przewodnik na temat tworzenia niestandardowego typu produktu WooCommerce dla Twojej witryny.

Przyjrzymy się, jak możesz zdefiniować typy produktów, włączyć określone opcje i ceny dla nich i wiele więcej. Ale najpierw przyjrzyjmy się typom produktów WooCommerce i temu, co mogą zrobić niestandardowe typy produktów.

Po co dodawać niestandardowy typ produktu w WooCommerce?

Domyślnie WooCommerce ma cztery unikalne typy produktów. To są:

• Prosty produkt
• Produkt zmienny
• Zewnętrzny/Afiliowany
• Produkt do pobrania

Oczywiście dzięki zewnętrznym wtyczkom WooCommerce możesz dodawać więcej typów produktów, takich jak produkty subskrypcyjne, produkty do rezerwacji, członkostwa i inne.

Ale co, jeśli chcesz utworzyć typ produktu inny niż te określone typy? Jeśli masz szczególne wymagania, których nie mogą spełnić domyślne typy produktów WooCommerce, lub jeśli chcesz utworzyć niestandardowy typ produktu, taki jak członkostwo lub produkty aukcyjne bez korzystania z wtyczki innej firmy, możesz utworzyć niestandardowy typ produktu, używając odrobiny kodowanie.

Korzystanie z niestandardowego typu produktu oznacza dodanie różnych, niepowtarzalnych ustawień do typu produktu. Na przykład, jeśli chcesz mieć określony zmienny typ produktu i dodać do niego różne ustawienia widoczności lub cen, możesz to zrobić za pomocą niestandardowego typu produktu. Co więcej, możesz również zdefiniować określony typ produktu dla pojedynczego rodzaju produktu, który jest unikalny i zmienić ustawienia typu produktu tylko wtedy, gdy chcesz.

Niezależnie od Twoich potrzeb posiadanie niestandardowego typu produktu zapewnia większą elastyczność podczas dostosowywania i definiowania produktów, które sprzedajesz w swojej witrynie.

Jak stworzyć niestandardowy typ produktu WooCommerce?

Proces tworzenia typu produktu WooCommerce jest dość prosty, ale wymaga pewnego poziomu kodowania. Zalecamy naszym klientom dowiedzieć się nieco więcej o tworzeniu niestandardowych wtyczek WordPress i dodawaniu do nich kodów, jeśli chcesz kontynuować ten artykuł.

Gdy zrozumiesz podstawy tworzenia wtyczek WordPress w katalogu swojej witryny, otwórz katalog instalacyjny WP , otwórz wp-content/plugins i utwórz folder „ QuadLayers_custom-product-type ”. W naszym demo użyjemy naszego katalogu localhost.

Następnie utwórz plik o nazwie „ Quadlayers_custom-product-type.php ”. To jest twój główny plik, który działa jako brama dla pozostałych funkcji twojej wtyczki.

Otwórz ten plik i wklej do niego następujące wiersze kodu:

 <?php

/**
* Nazwa wtyczki: Quadlayers Niestandardowy typ produktu
* Opis: Kod do przewodnika Quadlayers na temat tworzenia niestandardowego typu produktu WooCommerce
*/

if (! zdefiniowany('ABSPATH' ) ) {
powrót;
} 

Ten zestaw kodu definiuje wtyczkę, dodając jej nazwę i opis. Na razie to wystarczy, ponieważ musimy dodać więcej kodów do tego pliku, aby działał. Teraz musisz aktywować nowo utworzoną wtyczkę. Zachowamy aktywną wtyczkę na potrzeby samouczka i dodamy więcej kodów w miarę postępów.

Śmiało otwórz pulpit administratora WP i kliknij Wtyczki . Tutaj powinieneś zobaczyć nową wtyczkę o nazwie Quadlayers Custom Product Type. Śmiało, aktywuj go i przejdź do następnego kroku samouczka.

Zarejestruj niestandardowy typ produktu WooCommerce

Następnie utworzymy funkcję, aby zdefiniować nasz niestandardowy typ produktu i zarejestrować go jako typ produktu WooCommerce. W tym celu dodaj ten kod do głównego pliku wtyczki:

 add_action('init', 'register_demo_product_type');
funkcja register_demo_product_type() {
klasa WC_Product_Demo rozszerza WC_Product {

funkcja publiczna __construct( $produkt ) {
$this->product_type = 'demo';
rodzic::__construct($produkt);
}
}
}

Spowoduje to zarejestrowanie niestandardowego typu produktu o nazwie demo. Jeśli chcesz zmienić nazwę typu produktu, po prostu zmień tekst w $this->product_type = 'demo';

Dodaj opcję niestandardowego produktu WooCommerce.

Następnie musimy dodać niestandardowy typ produktu do listy rozwijanej Typ produktu. Dzięki temu typ produktu można wybrać podczas tworzenia lub edytowania produktu na pulpicie administratora WP. Dodaj ten kod do głównego pliku wtyczki, a na liście typów produktów powinna pojawić się nowa opcja.

 add_filter('product_type_selector', 'add_demo_product_type');
funkcja add_demo_product_type( $typy ){
$types[ 'demo' ] = __( 'Demonstracyjny produkt', 'dm_product' );
zwróć typy $; 
}

Ten kod doda niestandardowy typ produktu do listy rozwijanej Dane produktu przy użyciu wiersza $types['demo'] = __('Custom Product Type') . Możesz zmienić tekst z Niestandardowy typ produktu na dowolny, taki jak Produkt demonstracyjny, Zamówienie niestandardowe, Karta podarunkowa itp.

Teraz otwórz pulpit administratora WP i utwórz nowy produkt. W menu rozwijanym Typ produktu powinna być widoczna nowa opcja o nazwie „ Produkt demonstracyjny ”.

Dodanie niestandardowej karty typu produktu

Poniższa funkcja utworzy nową kartę ustawień dla niestandardowego typu produktu. W ten sposób możesz dodać do typu produktu określone szczegóły, które nie są udostępniane innym typom produktów.

Wklej tę funkcję, aby zbudować kartę Niestandardowe szczegóły produktu:

 add_filter('woocommerce_product_data_tabs', 'demo_product_tab');
funkcja demo_product_tab( $tabulacje) {

$tabs['demo'] = tablica(
'label' => __( 'Demonstracyjny produkt', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
zwróć $tabulacje;
}
}

Pamiętaj, aby użyć swojego identyfikatora typu produktu zamiast „demo” w $tabs['demo'] = array jeśli zdefiniowałeś powyżej swój własny typ_produktu.

Trzy parametry w tablicy, których użyliśmy, to:

etykieta: Określa nazwę Twojej niestandardowej karty produktu.
target: Ustawia identyfikator, którego użyjemy do dodania ustawień do karty.
class: pozwala sprawdzić, kiedy wyświetlać niestandardową kartę produktu.

Tutaj, w parametrze class, użyliśmy show_if_Demo_product, co oznacza, że ​​ta karta będzie wyświetlana tylko wtedy, gdy wybrany zostanie niestandardowy typ produktu.

Dodaj pola zakładki typu produktu niestandardowego

Następnie dodajmy kilka ustawień i pól do naszej karty, abyś mógł ustawić ceny i różne opcje dla niestandardowego typu produktu. W tym celu dodaj ten kod do głównego pliku wtyczki:

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content');

funkcja QL_custom_product_options_product_tab_content() {
// Nie zapomnij zmienić identyfikatora w div z celem karty produktu
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php

woocommerce_wp_checkbox( tablica (
'id' => '_enable_custom_product',
'label' => __( 'Włącz niestandardowy typ produktu'),
));

woocommerce_wp_text_input(
szyk(
'id' => 'demo_product_info',
'label' => __( 'Szczegóły niestandardowego produktu', 'dm_product' ),
'symbol zastępczy' => '',
'desc_tip' => 'prawda',
'description' => __( 'Wprowadź szczegóły produktu demonstracyjnego.', 'dm_product' ),
'typ' => 'tekst'
)
);


?></div>
</div><?php
}

Spowoduje to dodanie opcji pola wyboru, aby włączyć niestandardowy typ produktu i niestandardowe pole tekstowe dla produktu. Oczywiście możesz dodać więcej ustawień za pomocą innych funkcji WooCommerce, takich jak woocommerce_wp_select() dla rozwijanej listy, woocommerce_wp_textarea_input() dla obszaru tekstowego i wiele więcej.

Jednak w przypadku naszej wersji demonstracyjnej będziemy wyświetlać tylko proste informacje tekstowe dotyczące niestandardowych produktów, które administratorzy mogą dostosowywać z poziomu zaplecza.

Możesz dowiedzieć się więcej o tych funkcjach i jak z nich korzystać tutaj.

Zapisywanie niestandardowych pól zakładki typu produktu WooCommerce

Teraz, gdy stworzyliśmy nasze ustawienia typu produktu, musimy zapisać je w naszej bazie danych. Odbywa się to za pomocą haka woocommerce_process_product_meta. W tym celu użyjemy następujących wierszy kodu:

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings');

funkcja save_demo_product_settings( $post_id ){

$demo_informacje_o_produktach = $_POST['demo_informacje_o_produktach'];

if( !pusty( $demo_informacje o produkcie ) ) {
update_post_meta($post_id, 'demo_product_info', esc_attr($demo_product_info));
}
}

Po dodaniu tego kodu do głównego pliku wtyczki będziesz mieć możliwość zapisania niestandardowych ustawień typu produktu podczas aktualizacji lub publikowania produktu.

Jednak te kody są przeznaczone tylko dla zaplecza i będą teraz wyświetlane na froncie Twojego produktu, dopóki nie zdefiniujemy szablonu do użycia przez WooCommerce. W tym celu użyjemy następnego kroku naszego samouczka, aby wyświetlić zawartość dla naszego niestandardowego typu produktu.

Dodaj zawartość dla niestandardowego typu produktu

Właśnie utworzyłeś niestandardowy typ produktu dla swojej witryny, ale musisz także określić w WooCommerce, jakiego rodzaju treści ma zawierać typ produktu. W tym celu użyjemy haka woocommerce_single_product_summary, aby dodać informacje o produkcie, które dodaliśmy do karty Szczegóły produktu niestandardowego.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

funkcja demo_product_front () {
produkt globalny;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Upewnij się, że identyfikator typu produktu jest zgodny z kodem if ('demo' == $product->get_type() , jak wspomnieliśmy powyżej. Po zapisaniu tego kodu zobaczysz szczegóły niestandardowego produktu z przodu.

Kompletny fragment kodu

Dla Twojej wygody połączyliśmy różne kody w jeden zestaw, więc możesz po prostu wkleić go do głównego pliku wtyczki i edytować w razie potrzeby.

 <?php
/**
* Nazwa wtyczki: QuadLayers Niestandardowy typ produktu
* Opis: Wtyczka do dodawania niestandardowego typu produktu do WooCommerce
* Autor: QuadLayers
* Identyfikator URI autora: https://www.quadlayers.com
* Wersja: 1.0
*/


zdefiniowany('ABSPATH' ) lub wyjdź;

add_action('init', 'register_demo_product_type');
funkcja register_demo_product_type() {
klasa WC_Product_Demo rozszerza WC_Product {

funkcja publiczna __construct( $produkt ) {
$this->product_type = 'demo';
rodzic::__construct($produkt);
}
}
}


add_filter('product_type_selector', 'add_demo_product_type');
funkcja add_demo_product_type( $typy ){
$types[ 'demo' ] = __( 'Demonstracyjny produkt', 'dm_product' );
zwróć typy $; 
}


add_filter('woocommerce_product_data_tabs', 'demo_product_tab');
funkcja demo_product_tab( $tabulacje) {

$tabs['demo'] = tablica(
'label' => __( 'Demonstracyjny produkt', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
zwróć $tabulacje;
}


add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content');
funkcja demo_product_tab_product_tab_content() {
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php


woocommerce_wp_checkbox( tablica (
'id' => '_enable_custom_product',
'label' => __( 'Włącz niestandardowy typ produktu'),
));


woocommerce_wp_text_input(
szyk(
'id' => 'demo_product_info',
'label' => __( 'Demonstracyjne szczegóły produktu', 'dm_product' ),
'placeholder' => 'Wstaw tutaj tekst, który ma być pokazany na froncie',
'desc_tip' => 'prawda',
'description' => __( 'Wprowadź informacje o produkcie demonstracyjnym', 'dm_product' ),
'typ' => 'tekst'
)
);
?></div>
</div><?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings');

funkcja save_demo_product_settings( $post_id ){

$enable_custom_product = isset($_POST['_enable_custom_product'])? 'tak nie';
update_post_meta( $post_id, '_enable_custom_product', $enable_custom_product );
$demo_informacje_o_produktach = $_POST['demo_informacje_o_produktach'];

if( !pusty( $demo_informacje o produkcie ) ) {
update_post_meta($post_id, 'demo_product_info', esc_attr($demo_product_info));
}
}


add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

funkcja demo_product_front () {
produkt globalny;
if ( 'demo' == $product->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Oczywiście wszystkie kroki, które pokazaliśmy w tym samouczku, są dość proste i możesz i powinieneś spróbować dodać więcej pól, ustawień i treści do niestandardowego typu produktu. Ponadto, jak widać, ten samouczek jest nieco programistyczny. Tak więc, jeśli jesteś nowy w WordPressie lub kodowaniu, zawsze możesz poprosić o naszą pomoc w sekcji komentarzy. Poza tym możesz też zrobić coś zupełnie inaczej i użyć pliku functions.php motywu, aby dodać wszystkie te kody do swojej witryny.

Spowoduje to pominięcie etapu tworzenia wtyczki WordPress, ale pamiętaj, że zmiany znikną, jeśli zmienisz lub zaktualizujesz motyw (chyba że użyjesz motywu potomnego). Zdecydowanie zalecamy użycie wtyczki do tej metody, ale jeśli wolisz aby użyć pliku functions.php, możesz to zrobić.

Zawsze pamiętaj o zrobieniu pełnej kopii zapasowej swojej witryny WordPress przed wprowadzeniem zmian w pliku functions.php. W ten sposób, jeśli coś pójdzie nie tak, zawsze możesz wrócić do działającej wersji.

Po prostu kliknij Wygląd > Edytor plików motywu i kliknij Funkcje motywu lub functions.php na prawym pasku bocznym Pliki motywu.

Następnie możesz po prostu wkleić powyższe kody do edytora i kliknąć Aktualizuj plik , aby zakończyć.

Wniosek

I to kończy wszystkie kroki wymagane do programowego stworzenia niestandardowego typu produktu WooCommerce . Podsumujmy szybko wszystkie kroki potrzebne do stworzenia niestandardowego typu produktu:

• Utwórz i aktywuj wtyczkę dla swojego niestandardowego typu produktu WooCommerce.
• Zarejestruj swój nowy typ produktu.
• Dodaj zakładkę dla niestandardowego typu produktu na stronie pojedynczych produktów.
• Dodaj pola i ustawienia do karty produktu.
• Zapisz pola i ustawienia na karcie produktu.
• Wyświetl zawartość karty produktu na interfejsie użytkownika.

Na koniec, dla Twojej wygody, połączyliśmy wszystkie różne fragmenty kodu, aby zapewnić Ci pełny kod. Możesz więc po prostu skopiować cały kod głównego pliku i wprowadzić niezbędne zmiany.

Mamy nadzieję, że ten artykuł okaże się pomocny. Jeśli chcesz dowiedzieć się więcej o konfigurowaniu różnych ustawień WooCommerce i opcji produktów, zapoznaj się z naszymi innymi artykułami:

• Jak skonfigurować hurtowe rabaty WooCommerce
• Jak programowo utworzyć użytkownika WordPress
• Programowe tworzenie niestandardowych pól WordPress