Vejledning til at tilføje en brugerdefineret felt til WooCommerce produktsider

WooCommerce giver mulighed for brugerdefinerede felter, der kan tilføjes produktsider. Dette gør det nemmere for butikker at tilføje ekstra information til produkter, som f.eks. størrelser, farver og materialer. I denne vejledning gennemgår vi, hvordan du bruger filtre, hooks, handlinger og shortcodes til at tilføje en brugerdefineret felt til WooCommerce produktsider.

Tilføjelse af brugerdefinerede felter med filtre

WordPress og WooCommerce indeholder flere filtre, som du kan bruge til at tilføje brugerdefinerede felter til produktsider. Først skal du tilføje en funktion til WordPress-filteret ‘woocommerce_product_tabs’. Filteret tager et array af produktfane-kort som parameter, som du kan tilføje til. I nedenstående eksempel tilføjes et felt med navnet ‘Produktinformation’ til produktfane-kortet.

function my_custom_product_tab( $tabs ) {
    // Tilføj brugerdefineret felt
    $tabs['product_info'] = array(
        'title'    => __( 'Produktinformation', 'woocommerce' ),
        'priority' => 50,
        'callback' => 'my_custom_product_tab_content'
    );
    return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'my_custom_product_tab' );

Når du har tilføjet feltet, skal du tilføje indholdet til feltet. Det gør du ved at tilføje en funktion med filteret ‘woocommerce_product_tab_content’. Filteret tager tre parametre: produktfane-kortet, produktet og produktfane-indholdet. I eksemplet nedenfor genereres HTML-indholdet, der vises i feltet ‘Produktinformation’.

function my_custom_product_tab_content( $key, $product, $tab ) {
    if ( $key == 'product_info' ) {
        ?>
        <h2>Produktinformation</h2>
        <p>Her er nogle yderligere oplysninger om produktet.</p>
        <?php
    }
}
add_filter( 'woocommerce_product_tab_content', 'my_custom_product_tab_content', 10, 3 );

Når du har tilføjet filteret, skal du opdatere siden for at se feltet på produktsiden.

Tilføjelse af brugerdefinerede felter med hooks

Hooks er en anden måde at tilføje brugerdefinerede felter til produktsider. WooCommerce indeholder forskellige hooks, der gør det muligt at tilføje ekstra felter til produktsider. F.eks. kan du bruge hooken ‘woocommerce_product_options_general_product_data’ til at tilføje et felt til ekstra produktdata.

function my_custom_product_field() {
    // Tilføj brugerdefineret felt
    woocommerce_wp_text_input( array(
        'id'          => '_custom_product_field',
        'label'       => __( 'Produktinformation', 'woocommerce' ),
        'placeholder' => 'Indtast produktinformation',
        'desc_tip'    => 'true',
        'description' => __( 'Her er nogle yderligere oplysninger om produktet.', 'woocommerce' )
    ) );
}
add_action( 'woocommerce_product_options_general_product_data', 'my_custom_product_field' );

Når du har tilføjet hooken, skal du opdatere siden for at se feltet på produktsiden.

Tilføjelse af brugerdefinerede felter med handlinger

WordPress og WooCommerce indeholder også handlinger, som du kan bruge til at tilføje brugerdefinerede felter til produktsider. F.eks. kan du bruge handlingen ‘woocommerce_product_options_pricing’ til at tilføje et felt til produktpriser.

function my_custom_product_field() {
    // Tilføj brugerdefineret felt
    woocommerce_wp_text_input( array(
        'id'          => '_custom_product_field',
        'label'       => __( 'Produktinformation', 'woocommerce' ),
        'placeholder' => 'Indtast produktinformation',
        'desc_tip'    => 'true',
        'description' => __( 'Her er nogle yderligere oplysninger om produktet.', 'woocommerce' )
    ) );
}
add_action( 'woocommerce_product_options_pricing', 'my_custom_product_field' );

Når du har tilføjet handlingen, skal du opdatere siden for at se feltet på produktsiden.

Tilføjelse af brugerdefinerede felter med shortcodes

Du kan også bruge shortcodes til at tilføje brugerdefinerede felter til produktsider. F.eks. kan du bruge shortcoden ‘woocommerce_product_field’ til at tilføje et felt til produktbeskrivelsen.

[woocommerce_product_field label="Produktinformation" placeholder="Indtast produktinformation" description="Her er nogle yderligere oplysninger om produktet."]

Når du har tilføjet shortcoden, skal du opdatere siden for at se feltet på produktsiden.

Konklusion

I denne vejledning har vi gennemgået, hvordan du bruger filtre, hooks, handlinger og shortcodes til at tilføje brugerdefinerede felter til WooCommerce produktsider. Ved at bruge disse værktøjer kan du tilføje ekstra information og funktioner til dit websted, som gør det lettere for kunderne at finde det produkt, de leder efter.