So fügen Sie dem WooCommerce-Produkt eine benutzerdefinierte Meta-Box hinzu

Veröffentlicht: 2021-07-23

Fügen Sie dem WooCommerce-Produkt eine benutzerdefinierte Meta-Box hinzu Möchten Sie eine benutzerdefinierte Metabox hinzufügen, um zusätzliche Informationen auf der einzelnen Produktseite hinzuzufügen? Bleiben Sie dann am Ende, da dieser Beitrag darauf abzielt, einen benutzerdefinierten Codeausschnitt bereitzustellen, den wir speziell zur Lösung dieses Problems erstellt haben. Das bedeutet natürlich, dass Sie etwas Programmiererfahrung haben müssen, um diese Lösung zu implementieren.

WooCommerce wurde für alle Arten von E-Commerce-Websites entwickelt. Es erfüllt jedoch nur die Grundbedürfnisse eines Online-Shops. Das bedeutet, dass Sie bei spezifischen Produkten möglicherweise zusätzliche Produktinformationen hinzufügen müssen, um Ihren Kunden zu helfen, eine fundierte Entscheidung zu treffen.

Eine Möglichkeit, dies zu tun, besteht darin, auf der Seite „Produkt bearbeiten“ eine benutzerdefinierte Metabox zu erstellen. Nachdem die Informationen gespeichert wurden, werden sie auf der einzelnen Produktseite angezeigt.

Wenn Sie jedoch eine schnelle Suche durchführen, werden Sie viele Plugins finden, um dieses Problem zu lösen. Wenn Sie jedoch viele Plugins haben, werden diese Ihre Website am Ende aufblähen. Dadurch wird die Ladegeschwindigkeit Ihrer Seite negativ beeinflusst. Aus diesem Grund haben wir uns entschlossen, dieses Tutorial für Sie zu erstellen.

Fügen Sie dem WooCommerce-Produkt eine benutzerdefinierte Meta-Box hinzu

In dem heutigen kurzen Tutorial zeigen wir Ihnen, wie Sie eine benutzerdefinierte Metabox in Ihrem WooCommerce-Shop hinzufügen. Die Verwendung von benutzerdefinierten Code-Snippets ist die empfohlene Methode, um Änderungen in WordPress vorzunehmen.

Bevor Sie fortfahren, sollten Sie ein untergeordnetes Design installieren oder erstellen. Dadurch wird sichergestellt, dass Ihre Änderungen bei einem Update nicht verloren gehen.

Lassen Sie uns, ohne viel Zeit zu verschwenden, gleich loslegen.

Schritte zum Hinzufügen einer benutzerdefinierten Metabox in einem WooCommerce-Produkt

Hier sind die einfachen Schritte, die Sie befolgen müssen:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Suchen Sie nach dem Öffnen der Design-Editor-Seite nach der Design-Funktionsdatei, um die Funktion zum Hinzufügen einer benutzerdefinierten Metabox im WooCommerce-Produkt hinzuzufügen.
Fügen Sie der PHP -Datei den folgenden Code hinzu:

## ---- 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 );
    }
}

Dies ist das Ergebnis im Backend:
Dies ist das Ergebnis im Frontend:

Fazit

Im heutigen Tutorial haben Sie gesehen, wie einfach es ist, eine benutzerdefinierte Metabox in WooCommerce hinzuzufügen. Auf diese Weise können Sie Ihre Website an Ihre spezifischen Produkte anpassen und Ihren Kunden mehr Informationen bieten.

Wenn Sie mit dem Umgang mit Code nicht vertraut sind, empfehlen wir die Verwendung eines Plugins wie Meta Box. Wir hoffen, dass dieser Beitrag eine Lösung für Sie bereitgestellt hat.

So fügen Sie dem WooCommerce-Produkt eine benutzerdefinierte Meta-Box hinzu

Fügen Sie dem WooCommerce-Produkt eine benutzerdefinierte Meta-Box hinzu

Schritte zum Hinzufügen einer benutzerdefinierten Metabox in einem WooCommerce-Produkt

Fazit

Ähnliche Artikel