Cómo agregar nuevos campos en el formulario de producto de Dokan

Publicado: 2022-04-03

Dokan ha hecho posible que personas sin conocimientos técnicos diseñen su propio mercado como Amazon en menos de 30 minutos. Este complemento se ha vuelto muy popular debido a su funcionalidad, así como a sus muchas opciones de personalización.

Como usuario de Dokan, debe estar bastante familiarizado con nuestro proceso de transacción transparente, las actualizaciones periódicas que se alinean con las tendencias, el equipo de soporte activo las 24 horas del día, los 7 días de la semana y la rica colección de documentación. A pesar de todas estas facilidades, estamos publicando una serie de blogs para dar más beneficios a nuestros usuarios.

En esta continuidad, hoy te mostraremos paso a paso cómo puedes agregar un nuevo campo personalizado de acuerdo a tus necesidades en el formulario del producto Dokan.

Por qué es posible que deba agregar nuevos campos en el formulario de producto de Dokan

Cómo agregar nuevos campos en el formulario de producto de Dokan

La solución de múltiples proveedores de Dokan permite a sus usuarios crear diferentes tipos de mercados con características avanzadas y únicas. Además, obtendrá muchas opciones de personalización para alinear su sitio con las necesidades de su negocio. Una de ellas es agregar un nuevo campo en el formulario de carga de productos de Dokan.

Como no obtendrá esa función de forma predeterminada dentro de Dokan, debe escribir un poco de código para agregar un nuevo campo personalizado. Aquí le mostraremos todo el proceso para que pueda implementarlo fácilmente dentro de su mercado.

¡Puede consultar toda la documentación de Dokan Multi Vendor aquí!

5 pasos para agregar nuevos campos en el formulario de producto de Dokan

A continuación se muestran los 5 pasos que necesita para crear nuevos campos en el formulario del producto Dokan y mostrar el valor desde la interfaz.

Paso 1: crea un tema secundario

En primer lugar, crea un tema hijo. Además, necesitará este tema secundario para realizar ajustes en el archivo, ya que esta mejora está relacionada con el tema.

Crear una carpeta para el tema hijo

Puede seguir esta guía para crear un tema hijo con facilidad. Alternativamente, hay muchos complementos disponibles dentro del repositorio de WordPress para crear un tema secundario. Puedes usarlos también.

Paso 2: implemente el código dentro del tema de su hijo

A continuación, abra su child-theme functions.php y pegue el siguiente código:

 /* * Adding extra field on New product popup/without popup form */ add_action( 'dokan_new_product_after_product_tags','new_product_field',10 ); function new_product_field(){ ?> <div class="dokan-form-group"> <input type="text" class="dokan-form-control" name="new_field" placeholder="<?php esc_attr_e( 'Product Code', 'dokan-lite' ); ?>"> </div> <?php } /* * Saving product field data for edit and update */ add_action( 'dokan_new_product_added','save_add_product_meta', 10, 2 ); add_action( 'dokan_product_updated', 'save_add_product_meta', 10, 2 ); function save_add_product_meta($product_id, $postdata){ if ( ! dokan_is_user_seller( get_current_user_id() ) ) { return; } if ( ! empty( $postdata['new_field'] ) ) { update_post_meta( $product_id, 'new_field', $postdata['new_field'] ); } } /* * Showing field data on product edit page */ add_action('dokan_product_edit_after_product_tags','show_on_edit_page',99,2); function show_on_edit_page($post, $post_id){ $new_field = get_post_meta( $post_id, 'new_field', true ); ?> <div class="dokan-form-group"> <input type="hidden" name="new_field" value="<?php echo esc_attr( $post_id ); ?>"/> <label for="new_field" class="form-label"><?php esc_html_e( 'Product Code', 'dokan-lite' ); ?></label> <?php dokan_post_input_box( $post_id, 'new_field', array( 'placeholder' => __( 'product code', 'dokan-lite' ), 'value' => $new_field ) ); ?> <div class="dokan-product-title-alert dokan-hide"> <?php esc_html_e( 'Please enter product code!', 'dokan-lite' ); ?> </div> </div> <?php } // showing on single product page add_action('woocommerce_single_product_summary','show_product_code',13); function show_product_code(){ global $product; if ( empty( $product ) ) { return; } $new_field = get_post_meta( $product->get_id(), 'new_field', true ); if ( ! empty( $new_field ) ) { ?> <span class="details"><?php echo esc_attr__( 'Product Code:', 'dokan-lite' ); ?> <strong><?php echo esc_attr( $new_field ); ?></strong></span> <?php } }

Este código está escrito en 4 pasos-

  • Se agregó un campo en el formulario de carga del producto (Con ventana emergente o sin ventana emergente)
  • Valor de campo guardado y actualizado al guardar el producto
  • Mostró el campo adicional en la página de edición del producto
  • Mostró los datos de campo adicionales en una sola página de producto

Paso 3: verifique el nuevo campo personalizado en el formulario de carga

Ahora, vaya al formulario de carga de productos. Aquí puede ver el nuevo campo después de ese campo de etiqueta:

añadir nuevo producto

Para agregar el campo después del campo de etiqueta, hemos usado la acción-

dokan_new_product_after_product_tags .

Agregará el campo después de la etiqueta. También puede agregar varios campos.

Paso 4: pruebe el campo Nuevo producto en su página de edición de productos

Ahora, complete el formulario del producto y cree su producto. Lo redirigirá a la página de edición del producto con el nuevo valor de campo personalizado:

Aquí, hemos usado estas acciones para guardar y actualizar el meta del producto:

dokan_nuevo_producto_agregado y dokan_nuevo_producto_actualizado

Para mostrar el campo en la página de edición del producto, usamos esta acción:

dokan_product_edit_after_product_tags

Paso 5: mostrar nuevos datos de campo en una sola página de producto

Ahora es posible que desee mostrar nuevos datos de campo en su página de producto único. La última parte del código te ayuda a hacer esto. Para servir a este propósito hemos utilizado la acción-

woocommerce_single_product_summary

Puede realizar algunos cambios en el código que hemos incluido anteriormente si necesita agregar más campos en la página de su producto Dokan.

Puedes ver este video,

También te puede interesar leer: ¡ Crea asombrosos formularios de registro personalizables para Dokan!

Conclusión

Dirigir un mercado exitoso puede ser una tarea desalentadora. Tienes que enfrentarte a muchos desafíos. Siempre estamos listos para ayudarlo con cualquier problema relacionado con el mercado desarrollado con Dokan.

Ahora, conoce el proceso de agregar un nuevo campo personalizado a su formulario de producto Dokan. Para obtener más ayuda, haga un comentario a continuación o comuníquese con nuestro servicio de soporte 24X7.

Suscríbete al blog de weDevs

Enviamos boletines semanales, sin spam seguro