Les onglets WooCommerce

Les onglets WooCommerce sont affichés par défaut dans la page de présentation d’un produit.

Il est bien entendu possible d’utiliser des extensions du marché afin de les personnaliser, mais ce n’est pas l’objet de cet article, dans lequel je montre une manière de le concevoir de manière programmatique.

Au préalable : définition des post_meta

Dans cet exemple de biscuit, j’utilise trois champs personnalisés associés à un produit : matières grasses, glucides et calcium. Dans le jargon WordPress, ce sont donc des postmeta qui seront associés à des posts de type product. Et une metabox sera nécessaire afin de les gérer lors de l’édition d’un produit.

De nombreuses possibilités existent pour les créer, du plus simple en utilisant une extension comme Advanced Custom Fields, au plus geek en développant tout par soit même. Opter pour la dernière solution nécessite l’utilisation de méthodes telles que add_meta_box et add_post_meta. Cela fera l’objet d’un article dédié.

Dans cet article, j’utilise ma propre extension : WP Admin Builder.

Le code simplifié qui me permet de créer ces champs personnalisés :

Copier

// Metabox
$meta_box = Admin_Builder::instance()->create_meta_box(array(
        'name' => 'Analyse nutritionnelle',
        'id' => 'meta_box_analyse_nutritionnelle',
        'post_type' => 'product',
        'page_template' => '',
        'context' => 'normal',
        'hide_custom_fields' => true,
        'priority' => 'high',
        'desc' => 'Analyses compositionnelles et nutritionnelles des aliments',
    )
);

$meta_box->create_post_meta(
    array(
        'type' => Item_Type::TEXT,
        'id' => 'text_matieres_grasses',
        'name' => 'Matières grasses',
        'desc' => 'Matières grasses, dont acides gras saturés, pour 100g',
    )
);

$meta_box->create_post_meta(
    array(
        'type' => Item_Type::TEXT,
        'id' => 'text_glucides',
        'name' => 'Glucides',
        'desc' => 'Glucides, dont sucres, pour 100g',
    )
);

$meta_box->create_post_meta(
    array(
        'type' => Item_Type::TEXT,
        'id' => 'text_calcium',
        'name' => 'Calcium',
        'desc' => 'Calcium pour 100g',
    )
);

Voilà ce que cela donne au niveau du produit :

Modifier les onglets

Le hook qui permet de modifier les onglets WooCommerce est le filtre woocommerce_product_tabs.

Copier

Ce filtre prend un seul paramètre qui est un tableau contenant la liste des onglets. Un exemple de trace générée par défaut par WooCommerce :

Copier

Chaque onglet contient trois champs :

title : le titre affiché
priority : une priorité qui définit son positionnement dans la liste des onglets, par ordre croissant
callback : la fonction appelée pour gérer l’affichage du contenu de l’onglet

Dans l’exemple qui suit, je supprime les deux onglets Informations complémentaires et Avis et j’ajoute mon propre onglet Analyse nutritionnelle qui comprendra les trois champs créés précédemment :

Copier

Le code intégral

Le code complet comprend l’implémentation de la méthode render_analyse_nutritionnelle() définie dans le tableau des onglets. Le code est adapté afin d’être intégré à une classe dédiée :

Copier

/**
 * Used to customize WooCommerce tabs
 */
class Sukellos_Woocommerce_Tabs_Manager {

/**
     * Constructor
     */
    public function __construct() {

// Filters WooCommerce product tabs
        // See https://woocommerce.com/document/editing-product-data-tabs/
        add_filter( 'woocommerce_product_tabs', array( $this, 'filter_woocommerce_product_tabs' ), 10, 1 );
    }

/**
     * Used to customize product tabs
     *
     * @param $tabs all tabs content
     * @return mixed
     */
    public function filter_woocommerce_product_tabs( $tabs ) {

// Adds the new tabs
        if ( $this->has_analyse_nutritionnelle_tab_content() ) {

$tabs['analyse_nutritionnelle_tab'] = array(
                'title' 	=> 'Analyse nutritionnelle',
                'priority' 	=> 10,
                'callback' 	=> array( $this, 'render_analyse_nutritionnelle_tab' )
            );
        }

unset( $tabs['additional_information'] );
        unset( $tabs['reviews'] );

// Change priorities
        $tabs['description']['priority'] = 5;

return $tabs;
    }

/**
     * Get analyse_nutritionnelle_tab content to be rendered
     */
    private function get_analyse_nutritionnelle_tab_content() {

global $post, $product;

// One or other...
        // $product_id = $post->ID;
        $product_id = $product->get_id();

// Get infos
        $matieres_grasses = get_post_meta( $product_id, 'text_matieres_grasses', true );
        $glucides = get_post_meta( $product_id, 'text_glucides', true );
        $calcium = get_post_meta( $product_id, 'text_calcium', true );
        
        return array( $matieres_grasses, $glucides, $calcium );
    }

/**
     * Check if analyse_nutritionnelle_tab has content to be rendered
     */
    private function has_analyse_nutritionnelle_tab_content() {

// Get content
        list( $matieres_grasses, $glucides, $calcium ) = $this->get_analyse_nutritionnelle_tab_content();

if ( ( is_null( $matieres_grasses ) || ( $matieres_grasses === '' ) )
            && ( is_null( $glucides ) || ( $glucides === '' ) )
            && ( is_null( $calcium ) || ( $calcium === '' ) )
        ) {
            return false;
        }
        return true;
    }

/**
     * Rendering analyse_nutritionnelle_tab content
     */
    public function render_analyse_nutritionnelle_tab() {

// Get content
        list( $matieres_grasses, $glucides, $calcium ) = $this->get_analyse_nutritionnelle_tab_content();

// The new tab content
 $html_content = '';
 if ( !is_null( $matieres_grasses ) && ( $matieres_grasses !== '' ) ) {
 $html_content .= 'Matières grasses : '.$matieres_grasses.' kJ pour 100g';
 }
 if ( !is_null( $glucides ) && ( $glucides !== '' ) ) {
 $html_content .= 'Glucides : '.$glucides.' g pour 100g';
 }
 if ( !is_null( $calcium ) && ( $calcium !== '' ) ) {
 $html_content .= 'Calcium : '.$calcium.' mg pour 100g';
 }

echo $html_content;
    }

}
new Sukellos_Woocommerce_Tabs_Manager();

L’ajout de l’onglet est conditionné par la méthode has_analyse_nutritionnelle_tab_content() afin d’éviter l’affichage d’un onglet vide.

La récupération des données est confinée dans une méthode get_analyse_nutritionnelle_tab_content(). Cela permet d’éviter de la duplication de code puisqu’elles sont lues deux fois.

L’identifiant du produit peut être récupéré de plusieurs manières, grâce à l’utilisation du mot-clef global :

Soit global $post puis $product_id = $post->ID;
Soit global $product puis $product_id = $product->get_id();

L’utilisation de mon plugin WP Admin Builder permet d’utiliser simplement la fonction get_post_meta().

Le résultat :

Quelques liens pour approfondir

Besoin d’une assistance technique par un expert WordPress ?
Optez pour un crédit temps de quelques heures

Contactez-moi

Gérer les onglets WooCommerce

Les onglets WooCommerce

Au préalable : définition des post_meta

Modifier les onglets

Le code intégral

Quelques liens pour approfondir

Laisser un commentaire Annuler la réponse