Cum să adaugi un tab personalizat în WooCommerce fără plugin

12 iulie, 2024

Cum să adaugi un tab personalizat în WooCommerce fără plugin

WooCommerce oferă o modalitate flexibilă de a adăuga taburi personalizate pe paginile produselor folosind filtre și acțiuni din WordPress. Vom explora pașii necesari pentru a adăuga un tab „Specificații tehnice” care poate fi gestionat din zona de administrare a WordPress-ului.

Pasul 1: Adăugarea tabului în frontend

Pentru a adăuga un tab numit spre exemplu „Specificații tehnice” pe pagina produsului:

// Adaugă un tab personalizat numit spre exemplu "Specificații tehnice" în pagina produsului în frontend
add_filter('woocommerce_product_tabs', 'woo_new_product_tab');
function woo_new_product_tab($tabs) {
    global $post;
    $technical_specifications = get_post_meta($post->ID, '_technical_specifications', true);
    
    // Adaugă un nou tab doar dacă există conținut
    if ($technical_specifications) {
        $tabs['technical_specifications'] = array(
            'title'    => __('Specificații tehnice', 'woocommerce'),
            'priority' => 20, // Prioritate setată pentru a fi după "Descriere produs"
            'callback' => 'woo_new_product_tab_content'
        );
    }
    
    return $tabs;
}

// Conținutul pentru tab-ul "Specificații tehnice"
function woo_new_product_tab_content() {
    global $post;
    $technical_specifications = get_post_meta($post->ID, '_technical_specifications', true);
    if ($technical_specifications) {
        echo '<h2>' . __('Specificații tehnice', 'woocommerce') . '</h2>';
        echo wpautop($technical_specifications);
    }
}

Pasul 2: Adăugarea unei secțiuni în backend pentru introducerea specificațiilor tehnice

Acest pas implică adăugarea unui meta box în paginile de editare a produsului pentru a permite utilizatorilor să introducă și să salveze specificațiile tehnice.

// Adaugă o secțiune proprie în backend pentru "Specificații tehnice"
add_action('add_meta_boxes', 'woo_add_custom_meta_box');
function woo_add_custom_meta_box() {
    add_meta_box(
        'woo_custom_meta_box', // ID-ul meta box-ului
        __('Specificații tehnice', 'woocommerce'), // Titlul meta box-ului
        'woo_custom_meta_box_callback', // Callback pentru a afișa conținutul meta box-ului
        'product', // Tipul de post unde va apărea meta box-ul
        'normal', // Contextul unde va apărea meta box-ul
        'high' // Prioritatea meta box-ului
    );
}

// Funcția de callback pentru afișarea conținutului meta box-ului
function woo_custom_meta_box_callback($post) {
    $technical_specifications = get_post_meta($post->ID, '_technical_specifications', true);
    wp_editor($technical_specifications, '_technical_specifications', array('textarea_name' => '_technical_specifications'));
}

// Salvează valoarea câmpului personalizat din meta box
add_action('save_post', 'woo_save_custom_meta_box');
function woo_save_custom_meta_box($post_id) {
    if (isset($_POST['_technical_specifications'])) {
        update_post_meta($post_id, '_technical_specifications', wp_kses_post($_POST['_technical_specifications']));
    }
}

Cum să utilizezi codul:

Copiază fiecare segment de cod în funcția functions.php a temei tale active din WordPress.

După salvarea modificărilor, vei vedea un nou tab „Specificații tehnice” pe paginile produsului în frontend și un meta box „Specificații tehnice” în zona de administrare WordPress pentru produse.

Prin urmare, acest cod oferă o modalitate simplă și eficientă de a adăuga și gestiona specificații tehnice pentru produsele tale în WooCommerce, fără a fi nevoie de un plugin suplimentar.

logo

Date contact


0728 076 396
office@adrianwebdesign.ro
Soluționarea alternativă a litigiilor
Soluționarea online a litigiilor