Cómo agregar Meta Box personalizado al producto WooCommerce

Publicado: 2021-07-23

Agregue Meta Box personalizado al producto WooCommerce ¿Desea agregar un cuadro meta personalizado para agregar información adicional en la página de un solo producto? Luego, apéguese al final, ya que esta publicación tiene como objetivo proporcionar un fragmento de código personalizado que creamos específicamente para resolver este problema. Por supuesto, esto significa que necesita tener algo de experiencia en codificación para poder implementar esta solución.

WooCommerce ha sido creado para todo tipo de sitios web de comercio electrónico. Sin embargo, solo satisface las necesidades básicas de una tienda online. Esto significa que si sus productos son específicos, es posible que deba agregar información adicional del producto para ayudar a sus clientes a tomar una decisión informada.

Una forma de hacerlo es crear un cuadro meta personalizado en la página Editar producto . Luego, después de guardar la información, se mostrará en la página del producto único.

Sin embargo, si haces una búsqueda rápida, encontrarás muchos complementos para solucionar este problema. Sin embargo, si tiene muchos complementos, terminarán inflando su sitio. Como resultado, la velocidad de carga de su sitio se verá afectada negativamente. Es por eso que decidimos crear este tutorial para ti.

Agregue Meta Box personalizado en el producto WooCommerce

En el breve tutorial de hoy, le mostraremos cómo agregar un metabox personalizado en su tienda WooCommerce. El uso de fragmentos de código personalizados es la forma recomendada de realizar cambios en WordPress.

Antes de continuar, debe instalar o crear un tema secundario. Esto asegurará que sus cambios no se pierdan durante una actualización.

Sin perder mucho tiempo, entremos de inmediato.

Pasos para agregar Meta Box personalizado en el producto WooCommerce

Estos son los sencillos pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú del panel, haga clic en Menú de apariencia > Menú del editor de temas . Cuando se abra la página del Editor de temas, busque el archivo de funciones del tema para agregar la función para agregar meta box personalizado en el producto WooCommerce.
Agregue el siguiente código al archivo php :

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

Este es el resultado en el back-end:
Este es el resultado en la parte delantera:

Conclusión

En el tutorial de hoy, ha visto lo fácil que es agregar un metabox personalizado en WooCommerce. Esto lo ayudará a personalizar su sitio web para sus productos específicos y ofrecer más información a sus clientes.

Si no está familiarizado con el manejo de código, le recomendamos que utilice un complemento como Meta Box. Esperamos que esta publicación le haya brindado una solución.

Cómo agregar Meta Box personalizado al producto WooCommerce

Agregue Meta Box personalizado en el producto WooCommerce

Pasos para agregar Meta Box personalizado en el producto WooCommerce

Conclusión

Artículos similares