Kuidas kuvada ACF custom välja tootelehel ja lisada tarneaeg kategooria põhjal – koodinäited child theme functions.php jaoks ilma core faile muutmata.

Sisukord

Eelmises sama teema artiklis vaatasime hookide kaarti – mis hook kus asub. Nüüd läheme praktiliseks. Kaks reaalset kasutusjuhtu, mis tulevad ette peaaegu igas suuremas WooCommerce projektis: ACF custom välja kuvamine tootelehel ja tarneaja dünaamiline kuvamine kategooria põhjal.

Mõlemad lahendused käivad child theme’i functions.php faili. Core faile ei puuduta, uuendused ei riku midagi.

Kasutusjuht 1 – ACF custom väli tootelehel

Advanced Custom Fields (ACF) on üks populaarsemaid WordPress pluginaid kohandatud väljade lisamiseks. WooCommerce toodetele saab lisada igasuguseid lisainfovälju – materjal, mõõdud, hooldusõpetus, tehniline spetsifikatsioon – ja need hookide abil tootelehel kuvada.

Seadistus ACF-is

Loo ACF-is uus väljarühm:

Location: Post Type → is equal to → Product
Lisa väli, näiteks:
Field Label: “Materjal”
Field Name: toote_materjal
Field Type: Text

Välja kuvamine tootelehel hookiga

/**
 * Kuva ACF custom väli WooCommerce tootelehel
 * Hook: woocommerce_single_product_summary, prioriteet 25
 * (pärast excerptit [20], enne add_to_cart nuppu [30])
 */
add_action( 'woocommerce_single_product_summary', 'hnd_kuva_acf_materjal', 25 );

function hnd_kuva_acf_materjal() {
    global $product;

    // Kontrolli kas ACF on aktiivne
    if ( ! function_exists( 'get_field' ) ) {
        return;
    }

    $materjal = get_field( 'toote_materjal', $product->get_id() );

    // Kuva ainult kui väli on täidetud
    if ( empty( $materjal ) ) {
        return;
    }

    echo '<div class="hnd-toote-materjal">';
    echo '<span class="hnd-materjal-label">Materjal: </span>';
    echo '<span class="hnd-materjal-vaartus">' . esc_html( $materjal ) . '</span>';
    echo '</div>';
}

Mitu ACF välja korraga

Kui tootele on lisatud mitu välja (materjal, kaal, mõõdud), on mõistlik kuvada need ühe funktsiooniga struktureeritult:

add_action( 'woocommerce_single_product_summary', 'hnd_kuva_acf_spetsifikatsioonid', 25 );

function hnd_kuva_acf_spetsifikatsioonid() {
    global $product;

    if ( ! function_exists( 'get_field' ) ) {
        return;
    }

    $product_id = $product->get_id();

    // Defineeri väljad – field_name => kuvamisnimi
    $väljad = array(
        'toote_materjal'   => 'Materjal',
        'toote_moodud'     => 'Mõõdud',
        'toote_kaal'       => 'Kaal',
        'toote_päritolu'   => 'Päritolu',
    );

    $output = '';

    foreach ( $väljad as $field_name => $label ) {
        $value = get_field( $field_name, $product_id );
        if ( ! empty( $value ) ) {
            $output .= '<tr>';
            $output .= '<th>' . esc_html( $label ) . '</th>';
            $output .= '<td>' . esc_html( $value ) . '</td>';
            $output .= '</tr>';
        }
    }

    if ( empty( $output ) ) {
        return;
    }

    echo '<table class="hnd-spetsifikatsioonid">';
    echo '<tbody>' . $output . '</tbody>';
    echo '</table>';
}

CSS tabelile (child theme style.css):

.hnd-spetsifikatsioonid {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}

.hnd-spetsifikatsioonid th {
    text-align: left;
    width: 40%;
    padding: 6px 0;
    color: #666;
    font-weight: 500;
}

.hnd-spetsifikatsioonid td {
    padding: 6px 0;
}

.hnd-spetsifikatsioonid tr + tr th,
.hnd-spetsifikatsioonid tr + tr td {
    border-top: 1px solid #f0f0f0;
}

Kasutusjuht 2 – Tarneaja dünaamiline kuvamine kategooria põhjal

See on klassikaline WooCommerce väljakutse. Erinevatel toodetel on erinevad tarneajad – laotoodud jõuavad 2 tööpäevaga, eritellimused 14 päevaga, digitooted on koheselt kättesaadavad. Selle info kuvamine tootelehel automaatselt kategooria põhjal on hookiga elegant lahendatav.

/**
 * Kuva tarneaeg tootelehel kategooria põhjal
 * Hook: woocommerce_single_product_summary, prioriteet 15
 * (hinna [10] ja excerpti [20] vahele)
 */
add_action( 'woocommerce_single_product_summary', 'hnd_kuva_tarneaeg', 15 );

function hnd_kuva_tarneaeg() {
    global $product;

    $product_id = $product->get_id();

    // Defineeri tarneajad kategooriapõhiselt
    // võti = kategooria slug, väärtus = tarneinfo tekst
    $tarneajad = array(
        'laokaup'        => array(
            'tekst' => 'Tarneaeg 1-2 tööpäeva',
            'klass' => 'tarneaeg-kiire',
            'ikoon' => '🚚',
        ),
        'eritellimus'    => array(
            'tekst' => 'Eritellimus – tarneaeg 10-14 tööpäeva',
            'klass' => 'tarneaeg-pikk',
            'ikoon' => '🔧',
        ),
        'digitoode'      => array(
            'tekst' => 'Kohene allalaadimine pärast ostu',
            'klass' => 'tarneaeg-kohene',
            'ikoon' => '⚡',
        ),
        'eeltellimus'    => array(
            'tekst' => 'Eeltellimus – saadaval alates märtsist 2025',
            'klass' => 'tarneaeg-eeltellimus',
            'ikoon' => '📅',
        ),
    );

    // Kontrolli millises kategoorias toode on
    $tarneinfo = null;

    foreach ( $tarneajad as $kategooria_slug => $info ) {
        if ( has_term( $kategooria_slug, 'product_cat', $product_id ) ) {
            $tarneinfo = $info;
            break; // Esimene leitud kategooria võidab
        }
    }

    // Kui ühtegi kategooriat ei leitud, kasuta vaikimisi
    if ( null === $tarneinfo ) {
        $tarneinfo = array(
            'tekst' => 'Tarneaeg 2-5 tööpäeva',
            'klass' => 'tarneaeg-tavaline',
            'ikoon' => '📦',
        );
    }

    // Kuva tarneinfo
    printf(
        '<div class="hnd-tarneaeg %s"><span class="tarneinfo">%s %s</span></div>',
        esc_attr( $tarneinfo['klass'] ),
        esc_html( $tarneinfo['ikoon'] ),
        esc_html( $tarneinfo['tekst'] )
    );
}

CSS:

.hnd-tarneaeg {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    margin: 8px 0;
}

.tarneaeg-kiire {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.tarneaeg-pikk {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.tarneaeg-kohene {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.tarneaeg-eeltellimus {
    background: #faf5ff;
    color: #6b21a8;
    border: 1px solid #e9d5ff;
}

.tarneaeg-tavaline {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

Sama loogika pood lehel

Tarneinfo võib kuvada ka shop lehel, toote nime all:

add_action( 'woocommerce_after_shop_loop_item_title', 'hnd_kuva_tarneaeg_loop', 15 );

function hnd_kuva_tarneaeg_loop() {
    global $product;

    // Lihtsam versioon shop lehele – ainult kiire/ei kiire
    if ( has_term( 'laokaup', 'product_cat', $product->get_id() ) ) {
        echo '<span class="hnd-loop-tarneaeg">🚚 Laos olemas</span>';
    } elseif ( has_term( 'eritellimus', 'product_cat', $product->get_id() ) ) {
        echo '<span class="hnd-loop-tarneaeg hnd-eritellimus">🔧 Eritellimus</span>';
    }
}

ACF + tarneaeg kombineerituna

Paindlikum lähenemine: tarneaeg on ACF väli, mitte hardcoded kategooria põhjal. See laseb igale tootele individuaalset tarneaega määrata:

// ACF väli: field name = 'toote_tarneaeg', tüüp = Text või Select
add_action( 'woocommerce_single_product_summary', 'hnd_kuva_acf_tarneaeg', 15 );

function hnd_kuva_acf_tarneaeg() {
    global $product;

    if ( ! function_exists( 'get_field' ) ) {
        return;
    }

    $tarneaeg = get_field( 'toote_tarneaeg', $product->get_id() );

    if ( empty( $tarneaeg ) ) {
        return;
    }

    echo '<div class="hnd-tarneaeg tarneaeg-tavaline">';
    echo '<span class="tarneinfo">📦 ' . esc_html( $tarneaeg ) . '</span>';
    echo '</div>';
}

ACF Select väljaga saab admin paneelis valida valmis valikute seast (“1-2 tööpäeva”, “3-5 tööpäeva”, “Eritellimus”) – ei pea käsitsi teksti kirjutama ja kirjavigade risk on null.Selline lähenemine on meil kasutusel näiteks HeadRehvid.ee tootelehtedel ning kataloogi vaates – tarneaeg kuvatakse dünaamiliselt vastavalt laokoodile.

Kuhu kood käib – meeldetuletus

Kõik eelnevad näited lähevad child theme’i functions.php faili.

Alternatiivid:

Code Snippets plugin – admin paneelist hallatav, turvalisem kui otsene failimuutus
mu-plugins kaust – wp-content/mu-plugins/woocommerce-custom.php – laadib alati sõltumata teemast

Ära muuda WooCommerce core faile ega põhiteema functions.php – mõlemad kirjutatakse uuendusega üle. Samas kui on enda loodud alamteema (child theme), siis selle alla on täiesti ohutu panna lisafunktsioone (kui see just ei ole väliselt uuendatav).