Cum să adaugi un tab personalizat în WooCommerce fără plugin
12 iulie, 2024
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.