Comment ajouter une méta-boîte personnalisée au produit WooCommerce

Publié: 2021-07-23

Souhaitez-vous ajouter une méta-boîte personnalisée pour ajouter des informations supplémentaires sur la page de produit unique ? Tenez-vous ensuite à la fin, car cet article vise à fournir un extrait de code personnalisé que nous avons créé spécifiquement pour résoudre ce problème. Bien sûr, cela signifie que vous devez avoir une certaine expérience de codage pour mettre en œuvre cette solution.

WooCommerce a été créé pour toutes sortes de sites Web de commerce électronique. Cependant, il ne répond qu'aux besoins de base d'une boutique en ligne. Cela signifie que si vos produits sont spécifiques, vous devrez peut-être ajouter des informations supplémentaires sur le produit pour aider vos clients à prendre une décision éclairée.

Une façon de procéder consiste à créer une méta-boîte personnalisée sur la page Modifier le produit . Ensuite, une fois les informations enregistrées, elles seront affichées sur la page du produit unique.

Cependant, si vous faites une recherche rapide, vous trouverez de nombreux plugins pour résoudre ce problème. Cependant, si vous avez de nombreux plugins, ils finiront par gonfler votre site. En conséquence, la vitesse de chargement de votre site sera affectée négativement. C'est pourquoi nous avons décidé de créer ce tutoriel pour vous.

Ajouter une méta-boîte personnalisée dans le produit WooCommerce

Dans le bref tutoriel d'aujourd'hui, nous allons vous montrer comment ajouter une méta-boîte personnalisée dans votre boutique WooCommerce. L'utilisation d'extraits de code personnalisés est la méthode recommandée pour apporter des modifications à WordPress.

Avant de continuer, vous devez installer ou créer un thème enfant. Cela garantira que vos modifications ne seront pas perdues lors d'une mise à jour.

Sans perdre beaucoup de temps, entrons directement dans le vif du sujet.

Étapes pour ajouter une méta-boîte personnalisée dans le produit WooCommerce

Voici les étapes simples que vous devez suivre :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Dashboard, cliquez sur Appearance Menu > Theme Editor Menu . Lorsque la page de l'éditeur de thème est ouverte, recherchez le fichier de fonctions de thème pour ajouter la fonction permettant d' ajouter une méta-boîte personnalisée dans le produit WooCommerce.
Ajoutez le code suivant au fichier php :

## ---- 1. Backend ---- ##
// Adding a custom Meta container to admin products pages
add_action( 'add_meta_boxes', 'create_custom_meta_box' );
if ( ! function_exists( 'create_custom_meta_box' ) )
{
    function create_custom_meta_box()
    {
        add_meta_box(
            'custom_product_meta_box',
            __( 'Additional Product Information <em>(optional)</em>', 'cmb' ),
            'add_custom_content_meta_box',
            'product',
            'normal',
            'default'
        );
    }
}
//  Custom metabox content in admin product pages
if ( ! function_exists( 'add_custom_content_meta_box' ) ){
    function add_custom_content_meta_box( $post ){
        $prefix = '_bhww_'; // global $prefix;
        $ingredients = get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'ingredients_wysiwyg', true) : '';
        $benefits = get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) ? get_post_meta($post->ID, $prefix.'benefits_wysiwyg', true) : '';
        $args['textarea_rows'] = 6;
        echo '<p>'.__( 'Ingredients', 'cmb' ).'</p>';
        wp_editor( $ingredients, 'ingredients_wysiwyg', $args );
        echo '<p>'.__( 'Benefits', 'cmb' ).'</p>';
        wp_editor( $benefits, 'benefits_wysiwyg', $args );
        echo '<input type="hidden" name="custom_product_field_nonce" value="' . wp_create_nonce() . '">';
    }
}
//Save the data of the Meta field
add_action( 'save_post', 'save_custom_content_meta_box', 10, 1 );
if ( ! function_exists( 'save_custom_content_meta_box' ) )
{
    function save_custom_content_meta_box( $post_id ) {
        $prefix = '_bhww_'; // global $prefix;
        // We need to verify this with the proper authorization (security stuff).
        // Check if our nonce is set.
        if ( ! isset( $_POST[ 'custom_product_field_nonce' ] ) ) {
            return $post_id;
        }
        $nonce = $_REQUEST[ 'custom_product_field_nonce' ];
        //Verify that the nonce is valid.
        if ( ! wp_verify_nonce( $nonce ) ) {
            return $post_id;
        }
        // If this is an autosave, our form has not been submitted, so we don't want to do anything.
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return $post_id;
        }
        // Check the user's permissions.
        if ( 'product' == $_POST[ 'post_type' ] ){
            if ( ! current_user_can( 'edit_product', $post_id ) )
                return $post_id;
        } else {
            if ( ! current_user_can( 'edit_post', $post_id ) )
                return $post_id;
        }
        // Sanitize user input and update the meta field in the database.
        update_post_meta( $post_id, $prefix.'ingredients_wysiwyg', wp_kses_post($_POST[ 'ingredients_wysiwyg' ]) );
        update_post_meta( $post_id, $prefix.'benefits_wysiwyg', wp_kses_post($_POST[ 'benefits_wysiwyg' ]) );
    }
}
## ---- 2. Front-end ---- ##
// Create custom tabs in product single pages
add_filter( 'woocommerce_product_tabs', 'custom_product_tabs' );
function custom_product_tabs( $tabs ) {
    global $post;
    $product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
    $product_benefits    = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
    if ( ! empty( $product_ingredients ) )
        $tabs['ingredients_tab'] = array(
            'title'    => __( 'Ingredients', 'woocommerce' ),
            'priority' => 45,
            'callback' => 'ingredients_product_tab_content'
        );
    if ( ! empty( $product_benefits ) )
        $tabs['benefits_tab'] = array(
            'title'    => __( 'Benefits', 'woocommerce' ),
            'priority' => 50,
            'callback' => 'benefits_product_tab_content'
        );
    return $tabs;
}
// Add content to custom tab in product single pages (1)
function ingredients_product_tab_content() {
    global $post;
    $product_ingredients = get_post_meta( $post->ID, '_bhww_ingredients_wysiwyg', true );
    if ( ! empty( $product_ingredients ) ) {
        echo '<h2>' . __( 'Product Ingredients', 'woocommerce' ) . '</h2>';
        // Updated to apply the_content filter to WYSIWYG content
        echo apply_filters( 'the_content', $product_ingredients );
    }
}
// Add content to custom tab in product single pages (2)
function benefits_product_tab_content() {
    global $post;
    $product_benefits = get_post_meta( $post->ID, '_bhww_benefits_wysiwyg', true );
    if ( ! empty( $product_benefits ) ) {
        echo '<h2>' . __( 'Product Benefits', 'woocommerce' ) . '</h2>';
        // Updated to apply the_content filter to WYSIWYG content
        echo apply_filters( 'the_content', $product_benefits );
    }
}

Voici le résultat dans le back-end :
Voici le résultat dans le front-end :

Conclusion

Dans le didacticiel d'aujourd'hui, vous avez vu à quel point il est facile d'ajouter une méta-boîte personnalisée dans WooCommerce. Cela vous aidera à personnaliser votre site Web pour vos produits spécifiques et à offrir plus d'informations à vos clients.

Si vous n'êtes pas familier avec la gestion du code, nous vous recommandons d'utiliser un plugin comme Meta Box. Nous espérons que cet article vous a apporté une solution.

Comment ajouter une méta-boîte personnalisée au produit WooCommerce

Ajouter une méta-boîte personnalisée dans le produit WooCommerce

Étapes pour ajouter une méta-boîte personnalisée dans le produit WooCommerce

Conclusion

Articles similaires