Come aggiungere una meta box personalizzata al prodotto WooCommerce

Pubblicato: 2021-07-23

Aggiungi Meta Box personalizzato al prodotto WooCommerce Vuoi aggiungere una meta box personalizzata per aggiungere informazioni extra sulla singola pagina del prodotto? Quindi attieniti alla fine, poiché questo post mira a fornire uno snippet di codice personalizzato che abbiamo creato appositamente per risolvere questo problema. Ovviamente, questo significa che devi avere una certa esperienza di programmazione per poter implementare questa soluzione.

WooCommerce è stato creato per tutti i tipi di siti di eCommerce. Tuttavia, soddisfa solo le esigenze di base di un negozio online. Ciò significa che se i tuoi prodotti sono specifici, potresti dover aggiungere ulteriori informazioni sul prodotto per aiutare i tuoi clienti a prendere una decisione informata.

Un modo per farlo è creare una meta box personalizzata nella pagina Modifica prodotto . Quindi, dopo che le informazioni sono state salvate, verranno visualizzate nella pagina del singolo prodotto.

Tuttavia, se fai una rapida ricerca, troverai molti plugin per risolvere questo problema. Tuttavia, se hai molti plugin, finiranno per gonfiare il tuo sito. Di conseguenza, la velocità di caricamento del tuo sito sarà influenzata negativamente. Questo è il motivo per cui abbiamo deciso di creare questo tutorial per te.

Aggiungi Meta Box personalizzato nel prodotto WooCommerce

Nel breve tutorial di oggi, ti mostreremo come aggiungere una meta box personalizzata nel tuo negozio WooCommerce. L'utilizzo di frammenti di codice personalizzati è il modo consigliato per apportare modifiche in WordPress.

Prima di procedere, dovresti installare o creare un tema figlio. Ciò garantirà che le modifiche non vadano perse durante un aggiornamento.

Senza perdere molto tempo, entriamo subito nel merito.

Passaggi per aggiungere una meta box personalizzata nel prodotto WooCommerce

Ecco i semplici passaggi che devi seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor temi, cerca il file delle funzioni del tema per aggiungere la funzione per aggiungere meta box personalizzati nel prodotto WooCommerce.
Aggiungi il seguente codice al file 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 );
    }
}

Questo è il risultato nel back-end:
Questo è il risultato nel front end:

Conclusione

Nel tutorial di oggi, hai visto come è facile aggiungere una meta box personalizzata in WooCommerce. Questo ti aiuterà a personalizzare il tuo sito web per i tuoi prodotti specifici e ad offrire maggiori informazioni ai tuoi clienti.

Se non hai familiarità con la gestione del codice, ti consigliamo di utilizzare un plug-in come Meta Box. Ci auguriamo che questo post abbia fornito una soluzione per te.

Come aggiungere una meta box personalizzata al prodotto WooCommerce

Aggiungi Meta Box personalizzato nel prodotto WooCommerce

Passaggi per aggiungere una meta box personalizzata nel prodotto WooCommerce

Conclusione

Articoli simili