This is How to Add Address Fields in the Seller Registration Page of Dokan Plugin
As a WordPress developer, you may have encountered the Dokan plugin, a powerful e-commerce solution that allows users to set up their own online stores within a WordPress website. One of the key features of Dokan is the ability for sellers to register and manage their stores through a dedicated seller dashboard.
In the default Dokan setup, the seller registration process includes a "welcome wizard" that allows sellers to input their address information. However, some developers may prefer to have the address fields directly in the registration form itself. This article will guide you through the process of adding address fields to the Dokan seller registration page.
Understanding the Dokan Plugin Structure
Before we dive into the technical implementation, let's first understand the structure of the Dokan plugin. Dokan is built on top of WooCommerce, and it utilizes various template files and hooks to integrate with the WooCommerce ecosystem.
The seller registration form is located in the dokan/templates/global/seller-registration-form.php
file. This is the template file that you'll need to override in order to add the address fields.
The address fields themselves are defined in the dokan/templates/settings/address-form.php
file. This template file contains the HTML and form fields for the seller's address information.
Overriding the Seller Registration Form Template
To add the address fields to the seller registration form, you'll need to override the dokan/templates/global/seller-registration-form.php
template file in your WordPress theme or a custom plugin.
- Create a new directory in your theme or plugin called
dokan
(if it doesn't already exist).
- Inside the
dokan
directory, create a new directory called templates
.
- Inside the
templates
directory, create a new file called global
and inside that, create a new file called seller-registration-form.php
.
- Open the
seller-registration-form.php
file and add the following code:
<?php
/**
* Dokan Seller Registration form
*
* @since 2.4
*
* @package dokan
*/
?>
<form method="post" class="dokan-seller-registration-form dokan-form-container">
<?php do_action( 'dokan_seller_registration_form_start' ); ?>
<?php
/**
* dokan_seller_registration_form_field hook
*
* @since 2.4
*/
do_action( 'dokan_seller_registration_form_field' );
?>
<!-- Add address fields here -->
<?php
/**
* dokan_seller_registration_address_fields hook
*
* @since 3.3.1
*/
do_action( 'dokan_seller_registration_address_fields' );
?>
<?php
/**
* dokan_seller_registration_form_end hook
*
* @since 2.4
*/
do_action( 'dokan_seller_registration_form_end' );
?>
</form>
This code overrides the default Dokan seller registration form and includes a new action hook called dokan_seller_registration_address_fields
. This is where we'll add the address fields.
Adding the Address Fields
Now that we've overridden the seller registration form template, let's add the address fields. We'll be using the dokan/templates/settings/address-form.php
template file as a reference.
- Open the
dokan/templates/settings/address-form.php
file and copy the entire contents of the file.
- Paste the copied code into the
dokan_seller_registration_address_fields
action hook in the seller-registration-form.php
file you created earlier.
Your seller-registration-form.php
file should now look like this:
<?php
/**
* Dokan Seller Registration form
*
* @since 2.4
*
* @package dokan
*/
?>
<form method="post" class="dokan-seller-registration-form dokan-form-container">
<?php do_action( 'dokan_seller_registration_form_start' ); ?>
<?php
/**
* dokan_seller_registration_form_field hook
*
* @since 2.4
*/
do_action( 'dokan_seller_registration_form_field' );
?>
<!-- Add address fields here -->
<?php
/**
* dokan_seller_registration_address_fields hook
*
* @since 3.3.1
*/
do_action( 'dokan_seller_registration_address_fields' );
?>
<!-- Address fields start -->
<div class="dokan-form-group">
<label for="dokan_address[street_1]" class="dokan-w3 dokan-control-label"><?php _e( 'Street 1', 'dokan' ); ?></label>
<div class="dokan-w5 dokan-text-left">
<input type="text" class="dokan-form-control" name="dokan_address[street_1]" id="dokan_address[street_1]" value="<?php echo esc_attr( $address['street_1'] ); ?>" placeholder="<?php esc_attr_e( 'Street address', 'dokan' ); ?>">
</div>
</div>
<div class="dokan-form-group">
<label for="dokan_address[street_2]" class="dokan-w3 dokan-control-label"><?php _e( 'Street 2', 'dokan' ); ?></label>
<div class="dokan-w5 dokan-text-left">
<input type="text" class="dokan-form-control" name="dokan_address[street_2]" id="dokan_address[street_2]" value="<?php echo esc_attr( $address['street_2'] ); ?>" placeholder="<?php esc_attr_e( 'Apartment, suite, unit, etc. (optional)', 'dokan' ); ?>">
</div>
</div>
<div class="dokan-form-group">
<label for="dokan_address[city]" class="dokan-w3 dokan-control-label"><?php _e( 'City', 'dokan' ); ?></label>
<div class="dokan-w5 dokan-text-left">
<input type="text" class="dokan-form-control" name="dokan_address[city]" id="dokan_address[city]" value="<?php echo esc_attr( $address['city'] ); ?>" placeholder="<?php esc_attr_e( 'City', 'dokan' ); ?>">
</div>
</div>
<div class="dokan-form-group">
<label for="dokan_address[zip]" class="dokan-w3 dokan-control-label"><?php _e( 'Zip', 'dokan' ); ?></label>
<div class="dokan-w5 dokan-text-left">
<input type="text" class="dokan-form-control" name="dokan_address[zip]" id="dokan_address[zip]" value="<?php echo esc_attr( $address['zip'] ); ?>" placeholder="<?php esc_attr_e( 'Zip / Postal code', 'dokan' ); ?>">
</div>
</div>
<div class="dokan-form-group">
<label for="dokan_address[country]" class="dokan-w3 dokan-control-label"><?php _e( 'Country', 'dokan' ); ?></label>
<div class="dokan-w5 dokan-text-left">
<?php
$countries = array( '' => __( '- Select a country -', 'dokan' ) ) + WC()->countries->get_allowed_countries();
woocommerce_form_field( 'dokan_address[country]', array(
'type' => 'country',
'class' => array( 'dokan-form-control' ),
'label' => __( 'Country', 'dokan' ),
'priority' => 10,
), $address['country'] );
?>
</div>
</div>
<div class="dokan-form-group">
<label for="dokan_address[state]" class="dokan-w3 dokan-control-label"><?php _e( 'State', 'dokan' ); ?></label>
<div class="dokan-w5 dokan-text-left">
<?php
$states = WC()->countries->get_states( $address['country'] );
if ( is_array( $states ) && ! empty( $states ) ) {
woocommerce_form_field( 'dokan_address[state]', array(
'type' => 'state',
'class' => array( 'dokan-form-control' ),
'label' => __( 'State', 'dokan' ),
'priority' => 40,
), $address['state'] );
} else {
?>
<input type="text" class="dokan-form-control" name="dokan_address[state]" id="dokan_address[state]" value="<?php echo esc_attr( $address['state'] ); ?>" placeholder="<?php esc_attr_e( 'State', 'dokan' ); ?>">
<?php
}
?>
</div>
</div>
<!-- Address fields end -->
<?php
/**
* dokan_seller_registration_form_end hook
*
* @since 2.4
*/
do_action( 'dokan_seller_registration_form_end' );
?>
</form>
This code adds the address fields to the seller registration form, including fields for street 1, street 2, city, zip, country, and state.
Saving the Address Data
Now that we've added the address fields to the seller registration form, we need to save the data when a new seller registers. We'll be using the woocommerce_created_customer
hook to save the address information.
- Create a new file in your theme or plugin called
dokan-address-fields.php
.
- Add the following code to the file:
<?php
/**
* Plugin Name: Dokan Address Fields
* Plugin URI: https://flowpoint.ai
* Description: Add address fields to the Dokan seller registration form.
* Version: 1.0.0
* Author: Flowpoint.ai
* Author URI: https://flowpoint.ai
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
add_action( 'woocommerce_created_customer', 'dokan_save_address_fields', 10, 3 );
function dokan_save_address_fields( $customer_id, $new_customer_data, $password_generated ) {
if ( isset( $_POST['dokan_address'] ) ) {
$address = $_POST['dokan_address'];
update_user_meta( $customer_id, 'dokan_profile_settings', array(
'address' => array(
'street_1' => sanitize_text_field( $address['street_1'] ),
'street_2' => sanitize_text_field( $address['street_2'] ),
'city' => sanitize_text_field( $address['city'] ),
'zip' => sanitize_text_field( $address['zip'] ),
'country' => sanitize_text_field( $address['country'] ),
'state' => sanitize_text_field( $address['state'] ),
),
) );
}
}
This code listens for the woocommerce_created_customer
hook, which is triggered when a new customer is created. When this hook is fired, the code retrieves the address data from the $_POST
array and saves it as part of the user's Dokan profile settings.
Conclusion
By following the steps outlined in this article, you can successfully add address fields to the Dokan seller registration page. This allows sellers to input their address information directly during the registration process, providing a more streamlined user experience.
Remember to keep in mind that this solution is specific to the Dokan plugin and may need to be adapted if you're using a different e-commerce plugin or platform. Additionally, you should always thoroughly test your changes to ensure they're functioning as expected.
If you're looking for a comprehensive solution to analyze and optimize your website's conversion rates, consider checking out Flowpoint.ai. Flowpoint uses AI to identify technical, UX, and content-related issues that may be impacting your conversion rates, and it provides actionable recommendations to help you improve your website's performance.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.