Cum să creați un tip de produs WooCommerce personalizat în mod programatic

Când construiți un magazin WooCommerce complex, poate fi necesar să vă creați propriile soluții la anumite probleme. Una dintre aceste probleme este lipsa unor tipuri specifice de produse WooCommerce. Acesta este motivul pentru care noi, cei de la QuadLayers, v-am adus ghidul nostru despre Cum să creați un tip de produs WooCommerce personalizat pentru site-ul dvs. web.

Vom analiza cum vă puteți defini tipurile de produse, cum puteți activa opțiuni și prețuri specifice pentru acestea și multe altele. Dar mai întâi, să ne uităm la tipurile de produse WooCommerce și la ce pot face tipurile de produse personalizate.

De ce să adăugați un tip de produs personalizat în WooCommerce?

În mod implicit, WooCommerce are patru tipuri de produse unice. Acestea sunt:

• Produs simplu
• Produs variabil
• Extern/Afiliat
• Produs descărcabil

Desigur, cu pluginuri externe WooCommerce, puteți adăuga mai multe tipuri de produse, cum ar fi produse cu abonament, produse rezervabile, abonamente și multe altele.

Dar dacă doriți să creați un alt tip de produs decât aceste tipuri specifice? Dacă aveți cerințe speciale pe care tipurile implicite de produse WooCommerce nu le pot îndeplini sau dacă doriți să creați un tip de produs personalizat, cum ar fi produse de membru sau de licitație, fără a utiliza un plugin terță parte, atunci puteți crea un tip de produs personalizat folosind un pic de codificare.

Utilizarea unui tip de produs personalizat înseamnă adăugarea de setări diferite, unice tipului de produs. De exemplu, dacă doriți un anumit tip de produs variabil și adăugați diferite setări de vizibilitate sau de preț pentru acesta, atunci puteți face acest lucru folosind un tip de produs personalizat. Mai mult, puteți defini un anumit tip de produs pentru un singur tip de produs care este unic și puteți modifica setările tipului de produs numai dacă doriți.

Indiferent de nevoile dvs., a avea tipul dvs. de produs personalizat vă oferă mai multă flexibilitate atunci când personalizați și definiți produsele pe care le vindeți pe site-ul dvs.

Cum se creează un tip de produs WooCommerce personalizat?

Procesul de creare a unui tip de produs WooCommerce este destul de simplu, dar necesită un anumit nivel de codificare. Recomandăm clienților noștri să învețe ceva mai multe despre crearea de pluginuri WordPress personalizate și adăugarea de coduri la ele dacă doriți să continuați cu acest articol.

După ce înțelegeți elementele de bază ale creării pluginurilor dvs. WordPress în directorul site-ului dvs. web, continuați și deschideți directorul de instalare WP , deschideți wp-content/plugins și creați folderul „ QuadLayers_custom-product-type ”. Pentru demonstrația noastră, vom folosi directorul localhost.

După aceea, creați un fișier numit „ Quadlayers_custom-product-type.php ”. Acesta este fișierul dvs. principal, care funcționează ca o ușă pentru restul funcțiilor pluginului dvs.

Deschideți acest fișier și inserați următoarele linii de cod în fișier:

 <?php

/**
* Nume plugin: tip de produs personalizat Quadlayers
* Descriere: Cod pentru ghidul Quadlayers privind crearea unui tip de produs WooCommerce personalizat
*/

dacă ( ! definit( 'ABSPATH' ) ) {
întoarcere;
} 

Acest set de coduri definește pluginul dvs. adăugând un nume și o descriere a pluginului. Pentru moment, acest lucru este suficient, deoarece trebuie să adăugăm mai multe coduri la acest fișier pentru ca acesta să funcționeze. Acum, trebuie să vă activați pluginul nou creat. Vom păstra pluginul activat pentru tutorial și vom adăuga mai multe coduri pe măsură ce mergem.

Deci, mergeți mai departe și deschideți tabloul de bord WP Admin și faceți clic pe Plugins . Aici, ar trebui să vedeți un nou plugin numit Quadlayers Custom Product Type. Continuați și activați -l și treceți la pasul următor al tutorialului.

Înregistrați tipul de produs personalizat WooCommerce

Apoi, vom crea o funcție pentru a defini tipul nostru de produs personalizat și o vom înregistra ca tip de produs WooCommerce. Pentru aceasta, adăugați acest cod în fișierul principal al pluginului dvs.:

 add_action('init', 'register_demo_product_type');
funcția register_demo_product_type() {
clasa WC_Product_Demo extinde WC_Product {

funcția publică __construct( $produs ) {
$this->product_type = 'demo';
parent::__construct($produs);
}
}
}

Aceasta va înregistra un tip de produs personalizat numit demo. Dacă doriți să schimbați numele tipului de produs, schimbați pur și simplu textul în $this->product_type = 'demo';

Adăugați opțiunea de produs personalizat WooCommerce.

După aceasta, trebuie să adăugăm tipul de produs personalizat la lista drop-down Tip produs. Acest lucru face ca tipul de produs să fie selectabil atunci când creați sau editați un produs în tabloul de bord WP Admin. Adăugați acest cod în fișierul principal al pluginului dvs. și ar trebui să vedeți o nouă opțiune în lista de tip de produs.

 add_filter( 'product_type_selector', 'add_demo_product_type');
funcția add_demo_product_type($tipuri){
$types[ 'demo' ] = __( 'Produs demonstrativ', 'produs_dm' );
returnează $tipuri; 
}

Acest cod va adăuga tipul dvs. de produs personalizat la lista derulantă Date despre produs utilizând linia $types['demo'] = __('Custom Product Type') . Puteți schimba textul din Tipul de produs personalizat în orice, cum ar fi Produs demonstrativ, Comandă personalizată, Card cadou etc.

Acum, deschideți tabloul de bord WP Admin și creați un produs nou. Sub meniul drop-down Tip produs , ar trebui să vedeți o nouă opțiune numită „ Produs demonstrativ ”.

Adăugarea unei file tip produs personalizat

Următoarea funcție va crea o nouă filă de setări pentru tipul dvs. de produs personalizat. În acest fel, puteți adăuga detalii specifice tipului dvs. de produs care nu sunt partajate cu alte tipuri de produse.

Lipiți această funcție pentru a crea o filă Detalii personalizate despre produs:

 add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab');
funcția demo_product_tab ($tabs) {

$tabs['demo'] = matrice(
'label' => __( 'Produs demonstrativ', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
returnează $tabs;
}
}

Nu uitați să utilizați ID-ul tipului_de_produs în loc de „demo” în $tabs['demo'] = array dacă v-ați definit propriul tip de produs mai sus.

Cei trei parametri din matrice pe care i-am folosit sunt:

etichetă: aceasta definește numele filei de produs personalizat.
țintă: se stabilește un identificator pe care îl vom folosi pentru a adăuga setări la filă.
clasa: aceasta vă permite să verificați când să afișați fila de produs personalizat.

Aici, în parametrul de clasă, am folosit show_if_Demo_product, ceea ce înseamnă că această filă va fi afișată numai atunci când este selectat tipul de produs personalizat.

Adăugați câmpuri personalizate pentru fila Tip produs

Apoi, să adăugăm câteva setări și câmpuri la fila noastră, astfel încât să puteți seta prețuri și diferite opțiuni pentru tipul dvs. de produs personalizat. Pentru aceasta, adăugați acest cod în fișierul principal al pluginului dvs.:

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content');

funcția QL_custom_product_options_product_tab_content() {
// Nu uitați să schimbați id-ul din div cu ținta dvs. din fila produsului
?><div class='panel woocommerce_options_panel'><?php
?><div class='grup_opțiuni'><?php

woocommerce_wp_checkbox( array(
'id' => '_enable_custom_product',
'label' => __( 'Activați tipul de produs personalizat'),
) );

woocommerce_wp_text_input(
matrice(
'id' => 'demo_product_info',
'label' => __( 'Detalii produs personalizat', 'dm_product' ),
'placeholder' => ''',
'desc_tip' => 'adevărat',
'description' => __( 'Introduceți detaliile produsului demonstrat.', 'dm_product' ),
'type' => 'text'
)
);


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

Aceasta va adăuga o opțiune de casetă de selectare pentru a activa tipul de produs personalizat și un câmp de text personalizat pentru produs. Desigur, puteți adăuga mai multe setări folosind alte funcții WooCommerce, cum ar fi woocommerce_wp_select() pentru o listă derulantă, woocommerce_wp_textarea_input() pentru o zonă de text și multe altele.

Dar pentru demonstrația noastră, vom afișa doar informații simple de tip text cu privire la produsele personalizate pe care administratorii le pot personaliza din backend.

Puteți afla mai multe despre aceste funcții și despre cum să le utilizați aici.

Salvarea câmpurilor personalizate pentru fila tip produs WooCommerce

Acum că ne-am creat setările pentru tipul de produs, trebuie să le salvăm în baza noastră de date. Acest lucru se face folosind hook-ul woocommerce_process_product_meta. Pentru aceasta, vom folosi aceste linii de cod:

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings');

funcția save_demo_product_settings( $post_id ){

$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}

După ce adăugați acest cod în fișierul principal al pluginului dvs., veți putea salva setările personalizate pentru tipul de produs atunci când actualizați sau publicați un produs.

Cu toate acestea, aceste coduri sunt doar pentru backend și vor apărea acum pe partea frontală a produsului dvs. până când vom defini un șablon pentru WooCommerce de utilizat. Pentru aceasta, vom folosi următorul pas al tutorialului nostru pentru a afișa conținutul pentru tipul nostru de produs personalizat.

Adăugați conținut pentru tipul de produs personalizat

Tocmai ați creat tipul de produs personalizat pentru site-ul dvs., dar trebuie să specificați și pentru WooCommerce ce tip de conținut doriți să aibă tipul de produs. Pentru aceasta, vom folosi cârligul woocommerce_single_product_summary pentru a adăuga informațiile despre produs pe care le-am adăugat la fila Detalii personalizate despre produs.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front');

funcția demo_product_front () {
global $produs;
if ( 'demo' == $produs->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Asigurați-vă că ID-ul tipului dvs. de produs se potrivește cu codul if ('demo' == $product->get_type() , așa cum am menționat mai sus. După ce salvați acest cod, veți vedea detaliile produsului dvs. personalizat pe față.

Completați fragmentul de cod

Pentru confortul dvs., am combinat diferitele coduri într-un singur set, astfel încât să îl puteți lipi pur și simplu în fișierul principal al pluginului și să îl editați după cum este necesar.

 <?php
/**
* Nume plugin: tip de produs QuadLayers personalizat
* Descriere: plugin pentru a adăuga tip de produs personalizat la WooCommerce
* Autor: QuadLayers
* URI autor: https://www.quadlayers.com
* Versiunea: 1.0
*/


definit('ABSPATH') sau ieșire;

add_action('init', 'register_demo_product_type');
funcția register_demo_product_type() {
clasa WC_Product_Demo extinde WC_Product {

funcția publică __construct( $produs ) {
$this->product_type = 'demo';
parent::__construct($produs);
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type');
funcția add_demo_product_type($tipuri){
$types[ 'demo' ] = __( 'Produs demonstrativ', 'produs_dm' );
returnează $tipuri; 
}


add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab');
funcția demo_product_tab ($tabs) {

$tabs['demo'] = matrice(
'label' => __( 'Produs demonstrativ', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
returnează $tabs;
}


add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content');
funcția demo_product_tab_product_tab_content() {
?><div class='panel woocommerce_options_panel'><?php
?><div class='grup_opțiuni'><?php


woocommerce_wp_checkbox( array(
'id' => '_enable_custom_product',
'label' => __( 'Activați tipul de produs personalizat'),
) );


woocommerce_wp_text_input(
matrice(
'id' => 'demo_product_info',
'label' => __( 'Detalii produs demonstrativ', 'dm_product' ),
'placeholder' => 'Inserați aici textul care urmează să fie afișat pe front end',
'desc_tip' => 'adevărat',
'description' => __( 'Introduceți informații despre produs demonstrat.', 'dm_product' ),
'type' => 'text'
)
);
?></div>
</div></?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings');

funcția save_demo_product_settings( $post_id ){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? 'da nu';
update_post_meta( $post_id, '_enable_custom_product', $enable_custom_product );
$demo_product_info = $_POST['demo_product_info'];

if( !empty( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}


add_action( 'woocommerce_single_product_summary', 'demo_product_front');

funcția demo_product_front () {
global $produs;
if ( 'demo' == $produs->get_type() ) { 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

Desigur, toți pașii pe care i-am arătat în acest tutorial sunt destul de simpli și puteți și ar trebui să încercați să adăugați mai multe câmpuri, setări și conținut la tipul dvs. de produs personalizat. De asemenea, după cum puteți vedea, acest tutorial este puțin greu de programare. Așadar, dacă sunteți nou la WordPress sau la codare, puteți oricând să ne cereți ajutorul în secțiunea de comentarii. În plus, poți să faci lucrurile diferit și să folosești fișierul functions.php al temei pentru a adăuga toate aceste coduri pe site-ul tău.

Acest lucru ar omite pasul de creare a unui plugin WordPress, dar rețineți că modificările dvs. vor dispărea dacă vă schimbați sau actualizați tema (cu excepția cazului în care utilizați o temă secundară.) Vă recomandăm cu căldură să utilizați un plugin pentru această metodă, dar dacă preferați pentru a utiliza fișierul functions.php, puteți face acest lucru.

Nu uitați întotdeauna să faceți o copie de rezervă completă a site-ului dvs. WordPress înainte de a face modificări fișierului functions.php. În acest fel, în cazul în care ceva nu merge bine, puteți reveni oricând la versiunea de lucru.

Doar faceți clic pe Aspect > Editor de fișiere temă și faceți clic pe Funcții temă sau functions.php din bara laterală din dreapta Fișierelor teme.

Apoi, puteți doar să lipiți codurile de mai sus în editor și să faceți clic pe Actualizare fișier pentru a finaliza.

Concluzie

Și asta termină toți pașii necesari pentru a crea un tip de produs WooCommerce personalizat în mod programatic . Să rezumam rapid toți pașii necesari pentru a crea tipul dvs. de produs personalizat:

• Creați și activați pluginul pentru tipul dvs. de produs personalizat WooCommerce.
• Înregistrați noul tip de produs.
• Adăugați o filă pentru tipul dvs. de produs personalizat pentru pagina de produse individuale.
• Adăugați câmpuri și setări la fila produsului.
• Salvați câmpurile și setările din fila produsului.
• Afișați conținutul filei de produs pe partea frontală.

În cele din urmă, pentru confortul dvs., am combinat toate bucățile diferite de cod pentru a vă oferi codul complet. Deci, puteți doar să copiați întregul cod din fișierul dvs. principal și să faceți modificările necesare.

Sperăm să găsiți acest articol de ajutor. Dacă doriți să aflați mai multe despre configurarea diferitelor setări și opțiuni de produse WooCommerce, de ce să nu consultați câteva dintre celelalte articole ale noastre:

• Cum să configurați reduceri în vrac pentru WooCommerce
• Cum să creați un utilizator WordPress în mod programatic
• Crearea unui câmp personalizat WordPress în mod programatic