Come creare un tipo di prodotto WooCommerce personalizzato a livello di programmazione

Pubblicato: 2023-01-03

Quando crei un negozio WooCommerce complesso, potresti dover creare le tue soluzioni a problemi particolari. Uno di questi problemi è la mancanza di specifici tipi di prodotti WooCommerce. Questo è il motivo per cui noi di QuadLayers ti abbiamo portato la nostra guida su Come creare un tipo di prodotto WooCommerce personalizzato per il tuo sito web.

Vedremo come puoi definire i tuoi tipi di prodotto, abilitare opzioni e prezzi specifici per loro e molto altro. Ma prima, diamo un'occhiata ai tipi di prodotto WooCommerce e a cosa possono fare i tipi di prodotto personalizzati.

Perché aggiungere un tipo di prodotto personalizzato in WooCommerce?

Per impostazione predefinita, WooCommerce ha quattro tipi di prodotti unici. Questi sono:

  • Prodotto semplice
  • Prodotto variabile
  • Esterno/affiliato
  • Prodotto scaricabile

Ovviamente, con i plug-in WooCommerce esterni, puoi aggiungere più tipi di prodotti come prodotti in abbonamento, prodotti prenotabili, abbonamenti e altro.

Ma cosa succede se si desidera creare un tipo di prodotto diverso da questi tipi specifici? Se hai requisiti particolari che i tipi di prodotto WooCommerce predefiniti non possono soddisfare, o se desideri creare un tipo di prodotto personalizzato come abbonamento o prodotti all'asta senza utilizzare un plug-in di terze parti, puoi creare un tipo di prodotto personalizzato utilizzando un po' di codifica.

Utilizzare un tipo di prodotto personalizzato significa aggiungere impostazioni diverse e uniche al tipo di prodotto. Ad esempio, se desideri un tipo di prodotto variabile specifico e aggiungi diverse impostazioni di visibilità o prezzo, puoi farlo utilizzando un tipo di prodotto personalizzato. Inoltre, puoi anche definire un tipo di prodotto specifico per un singolo tipo di prodotto unico e modificare le impostazioni del tipo di prodotto solo se lo desideri.

Indipendentemente dalle tue esigenze, avere il tuo tipo di prodotto personalizzato ti offre maggiore flessibilità durante la personalizzazione e la definizione dei prodotti che vendi sul tuo sito web.

Come creare un tipo di prodotto WooCommerce personalizzato?

Il processo di creazione di un tipo di prodotto WooCommerce è abbastanza semplice ma richiede un certo livello di codifica. Consigliamo ai nostri clienti di saperne di più sulla creazione di plug-in WordPress personalizzati e sull'aggiunta di codici se si desidera continuare con questo articolo.

Una volta comprese le basi della creazione dei plug-in di WordPress nella directory del tuo sito Web, vai avanti e apri la directory di installazione di WP , apri wp-content/plugins e crea la cartella " QuadLayers_custom-product-type ". Per la nostra demo, useremo la nostra directory localhost.

Crea cartelle per il tipo di prodotto WooCommerce personalizzato

Successivamente, crea un file denominato ' Quadlayers_custom-product-type.php .' Questo è il tuo file principale che funziona come una porta per il resto delle funzionalità del tuo plugin.

Apri questo file e incolla le seguenti righe di codice nel file:

 <?php

/**
* Nome del plug-in: Tipo di prodotto personalizzato Quadlayers
* Descrizione: codice per la guida di Quadlayer sulla creazione di un tipo di prodotto WooCommerce personalizzato
*/

if ( ! definito( 'ABSPATH' ) ) {
Restituzione;
}

aggiungendo codice al file principale del plugin

Questo set di codice definisce il plug-in aggiungendo un nome e una descrizione del plug-in. Per ora, questo è sufficiente, poiché abbiamo bisogno di aggiungere più codici a questo file affinché funzioni. Ora devi attivare il plug-in appena creato. Manterremo il plug-in attivato per il tutorial e aggiungeremo altri codici man mano che procediamo.

Quindi vai avanti e apri la dashboard di amministrazione di WP e fai clic su Plugin . Qui dovresti vedere un nuovo plugin chiamato Quadlayers Custom Product Type. Vai avanti e attivalo e passa al passaggio successivo del tutorial.

attivare il plug-in del tipo di prodotto woocommerce personalizzato

Registra il tipo di prodotto WooCommerce personalizzato

Successivamente, creeremo una funzione per definire il nostro tipo di prodotto personalizzato e registrarlo come tipo di prodotto WooCommerce. Per questo, aggiungi questo codice al file principale del tuo plugin:

 add_action( 'init', 'register_demo_product_type' );
function register_demo_product_type() {
class WC_Prodotto_Demo extends WC_Prodotto {

funzione pubblica __construct( $prodotto ) {
$this->product_type = 'demo';
parent::__construct( $prodotto );
}
}
}

Questo registrerà un tipo di prodotto personalizzato denominato demo. Se vuoi cambiare il nome del tipo di prodotto, cambia semplicemente il testo in $this->product_type = 'demo';

Aggiungi l'opzione Prodotto WooCommerce personalizzato.

Successivamente, è necessario aggiungere il tipo di prodotto personalizzato all'elenco a discesa Tipo di prodotto. Questo rende il tuo tipo di prodotto selezionabile quando crei o modifichi un prodotto nella dashboard di amministrazione di WP. Aggiungi questo codice al file principale del tuo plug-in e dovresti vedere una nuova opzione nell'elenco dei tipi di prodotto.

 add_filter( 'product_type_selector', 'add_demo_product_type' );
funzione add_demo_product_type( $tipi ){
$types[ 'demo' ] = __( 'Demo prodotto', 'dm_product' );
return $tipi; 
}

Questo codice aggiungerà il tuo tipo di prodotto personalizzato all'elenco a discesa Dati prodotto utilizzando la riga $types['demo'] = __('Custom Product Type') . Puoi modificare il testo da Tipo di prodotto personalizzato a qualsiasi cosa come Prodotto demo, Ordine personalizzato, Buono regalo, ecc.

Ora apri la dashboard di amministrazione di WP e crea un nuovo prodotto. Nel menu a discesa Tipo di prodotto , dovrebbe essere visualizzata una nuova opzione denominata " Prodotto dimostrativo" .

selezionare il tipo di prodotto personalizzato durante la creazione di un nuovo prodotto

Aggiunta di una scheda Tipo di prodotto personalizzato

La seguente funzione creerà una nuova scheda delle impostazioni per il tuo tipo di prodotto personalizzato. In questo modo, puoi aggiungere dettagli specifici al tuo tipo di prodotto che non sono condivisi con altri tipi di prodotto.

Incolla questa funzione per creare una scheda Dettagli prodotto personalizzati:

 add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
function demo_product_tab( $tab) {

$tabs['demo'] = matrice(
'etichetta' => __( 'Prodotto demo', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
return $schede;
}
}

Ricorda di utilizzare il tuo ID product_type invece di 'demo' in $tabs['demo'] = array se hai definito il tuo product_type sopra.

I tre parametri nell'array che abbiamo utilizzato sono:

etichetta: definisce il nome della scheda del prodotto personalizzato.
target: imposta un identificatore che useremo per aggiungere impostazioni alla scheda.
class: consente di controllare quando mostrare la scheda del prodotto personalizzato.

Qui, nel parametro class, abbiamo utilizzato show_if_Demo_product, il che significa che questa scheda verrà mostrata solo quando viene selezionato il tipo di prodotto personalizzato.

scheda specifica per il tipo di prodotto personalizzato

Aggiungi campi scheda Tipo di prodotto personalizzati

Successivamente, aggiungiamo alcune impostazioni e campi alla nostra scheda in modo da poter impostare prezzi e varie opzioni per il tuo tipo di prodotto personalizzato. Per questo, aggiungi questo codice al file principale del tuo plugin:

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content' );

funzione QL_custom_product_options_product_tab_content() {
// Non dimenticare di cambiare l'id nel div con il target della tua scheda prodotto
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php

woocommerce_wp_checkbox( matrice(
'id' => '_enable_custom_product',
'etichetta' => __( 'Abilita tipo di prodotto personalizzato'),
));

woocommerce_wp_text_input(
Vettore(
'id' => 'demo_product_info',
'label' => __( 'Dettagli prodotto personalizzato', 'dm_product' ),
'segnaposto' => '',
'desc_tip' => 'vero',
'description' => __( 'Inserisci i dettagli del prodotto demo.', 'dm_product' ),
'tipo' => 'testo'
)
);


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

Ciò aggiungerà un'opzione casella di controllo per abilitare il tipo di prodotto personalizzato e un campo di testo personalizzato per il prodotto. Naturalmente, puoi aggiungere ulteriori impostazioni utilizzando altre funzioni di WooCommerce, come woocommerce_wp_select() per un elenco a discesa, woocommerce_wp_textarea_input() per un'area di testo e molto altro.

Ma per la nostra demo, mostreremo solo semplici informazioni di testo relative al prodotto personalizzato che gli amministratori possono personalizzare dal back-end.

opzioni specifiche per il tipo di tocco del prodotto personalizzato

Puoi saperne di più su queste funzioni e su come usarle qui.

Salvataggio dei campi della scheda del tipo di prodotto WooCommerce personalizzato

Ora che abbiamo creato le nostre impostazioni del tipo di prodotto, dobbiamo salvarle nel nostro database. Questo viene fatto usando l'hook woocommerce_process_product_meta. Per questo, useremo queste righe di codice:

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

funzione 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 ) );
}
}

Dopo aver aggiunto questo codice al file principale del plug-in, sarai in grado di salvare le impostazioni del tipo di prodotto personalizzato quando aggiorni o pubblichi un prodotto.

impostazioni del prodotto salvate per il tipo di scheda del prodotto personalizzato

Tuttavia, questi codici sono solo per il back-end e ora verranno visualizzati sul front-end del tuo prodotto fino a quando non definiremo un modello da utilizzare per WooCommerce. Per questo, utilizzeremo il passaggio successivo del nostro tutorial per visualizzare il contenuto per il nostro tipo di prodotto personalizzato.

Aggiungi contenuto per il tipo di prodotto personalizzato

Hai appena creato il tipo di prodotto personalizzato per il tuo sito Web, ma devi anche specificare a WooCommerce quale tipo di contenuto desideri che il tipo di prodotto abbia. Per questo, utilizzeremo l'hook woocommerce_single_product_summary per aggiungere le informazioni sul prodotto che abbiamo aggiunto alla scheda Dettagli prodotto personalizzato.

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

funzione demo_product_front () {
globale $prodotto;
if ( 'demo' == $prodotto->get_type() ) { 
echo( get_post_meta( $prodotto->get_id(), 'demo_product_info' )[0] );
}
}

Assicurati che l'ID del tipo di prodotto corrisponda al codice if ('demo' == $product->get_type() , come accennato in precedenza. Una volta salvato questo codice, vedrai i dettagli del tuo prodotto personalizzato sul davanti.

Frammento di codice completo

Per tua comodità, abbiamo combinato i diversi codici in un unico set, quindi puoi semplicemente incollarlo nel file principale del tuo plug-in e modificarlo se necessario.

 <?php
/**
* Nome plugin: QuadLayers Tipo di prodotto personalizzato
* Descrizione: Plugin per aggiungere un tipo di prodotto personalizzato a WooCommerce
* Autore: QuadLayers
* URI dell'autore: https://www.quadlayers.com
* Versione: 1.0
*/


definito( 'ABSPATH' ) o esci;

add_action( 'init', 'register_demo_product_type' );
function register_demo_product_type() {
class WC_Prodotto_Demo extends WC_Prodotto {

funzione pubblica __construct( $prodotto ) {
$this->product_type = 'demo';
parent::__construct( $prodotto );
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
funzione add_demo_product_type( $tipi ){
$types[ 'demo' ] = __( 'Demo prodotto', 'dm_product' );
return $tipi; 
}


add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
function demo_product_tab( $tab) {

$tabs['demo'] = matrice(
'etichetta' => __( 'Prodotto demo', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
return $schede;
}


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


woocommerce_wp_checkbox( matrice(
'id' => '_enable_custom_product',
'etichetta' => __( 'Abilita tipo di prodotto personalizzato'),
));


woocommerce_wp_text_input(
Vettore(
'id' => 'demo_product_info',
'label' => __( 'Dettagli prodotto demo', 'dm_product' ),
'placeholder' => 'Inserisci qui il testo da mostrare sul front-end',
'desc_tip' => 'vero',
'description' => __( 'Inserisci informazioni sul prodotto Demo.', 'dm_product' ),
'tipo' => 'testo'
)
);
?></div>
</div><?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

funzione save_demo_product_settings( $post_id ){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? 'si No';
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' );

funzione demo_product_front () {
globale $prodotto;
if ( 'demo' == $prodotto->get_type() ) { 
echo( get_post_meta( $prodotto->get_id(), 'demo_product_info' )[0] );
}
}

Naturalmente, tutti i passaggi che abbiamo mostrato in questo tutorial sono piuttosto semplici e puoi e dovresti provare ad aggiungere più campi, impostazioni e contenuti al tuo tipo di prodotto personalizzato. Inoltre, come puoi vedere, questo tutorial è un po' pesante per la programmazione. Quindi, se sei nuovo su WordPress o sulla programmazione, puoi sempre chiedere il nostro aiuto nella sezione dei commenti. Inoltre, puoi anche fare le cose in modo diverso e utilizzare il file functions.php del tuo tema per aggiungere tutti questi codici al tuo sito web.

Ciò salterebbe il passaggio nella creazione di un plug-in di WordPress, ma tieni presente che le tue modifiche scomparirebbero se cambi o aggiorni il tuo tema (a meno che tu non utilizzi un tema figlio). Ti consigliamo vivamente di utilizzare un plug-in per questo metodo, ma se preferisci per usare il file functions.php, puoi farlo.

Ricorda sempre di eseguire un backup completo del tuo sito WordPress prima di apportare modifiche al file functions.php. In questo modo, nel caso qualcosa vada storto, puoi sempre tornare alla versione funzionante.

Basta fare clic su Aspetto > Editor di file del tema e fare clic su Funzioni del tema o functions.php nella barra laterale dei file del tema a destra.

apertura dell'editor di file del tema per utilizzare il file delle funzioni

Quindi, puoi semplicemente incollare i codici sopra nell'editor e fare clic su Aggiorna file per finire.

aggiunta di codici al file delle funzioni del tema

Conclusione

E questo termina tutti i passaggi necessari per creare un tipo di prodotto WooCommerce personalizzato a livello di codice . Riassumiamo rapidamente tutti i passaggi necessari per creare il tuo tipo di prodotto personalizzato:

  • Crea e attiva il plug-in per il tuo tipo di prodotto WooCommerce personalizzato.
  • Registra il tuo nuovo tipo di prodotto.
  • Aggiungi una scheda per il tuo tipo di prodotto personalizzato per la singola pagina dei prodotti.
  • Aggiungi campi e impostazioni alla scheda del tuo prodotto.
  • Salva i campi e le impostazioni nella scheda del prodotto.
  • Visualizza il contenuto della scheda del prodotto sul front-end.

Infine, per tua comodità, abbiamo combinato tutti i diversi pezzi di codice per fornirti il ​​codice completo. Quindi, puoi semplicemente copiare l'intero codice dal tuo file principale e apportare le modifiche necessarie.

Ci auguriamo che questo articolo ti sia stato utile. Se vuoi saperne di più sulla configurazione delle varie impostazioni di WooCommerce e sulle opzioni dei prodotti, perché non dai un'occhiata ad alcuni dei nostri altri articoli:

  • Come impostare gli sconti all'ingrosso di WooCommerce
  • Come creare un utente WordPress in modo programmatico
  • Creazione di campi personalizzati WordPress a livello di programmazione