Docs
← Back to site

Getting Started

3 min readUpdated April 29, 2026

Welcome to Smart Phone Field. This guide will walk you through everything you need to get the plugin installed, activated, and running on your WooCommerce store in just a few minutes.

Requirements#

Before installing, make sure your site meets the following requirements:

  • WordPress 6.0 or higher
  • WooCommerce 8.3 or higher
  • PHP 7.4 or higher
  • The classic WooCommerce shortcode checkout (not the Gutenberg block checkout)

Step 1: Download the Plugin#

After completing your purchase you will receive an email with your download link and license key. Download the plugin zip file to your computer. Do not unzip it — WordPress handles that automatically during installation.

If you cannot find your download email, check your spam folder or log in to your account at smartphonefield.com to download it from your order history.

Step 2: Install the Plugin#

  1. Log in to your WordPress admin dashboard
  2. Go to Plugins > Add New Plugin
  3. Click Upload Plugin at the top of the page
  4. Click Choose File and select the zip file you downloaded
  5. Click Install Now
  6. Once installation is complete, click Activate Plugin

Smart Phone Field is now installed and active on your site.

Step 3: Enter Your License Key#

After activation you will see a Smart Phone Field menu item in your WordPress admin sidebar under WooCommerce.

  1. Go to WooCommerce > Smart Phone Field > License
  2. Paste your license key into the license key field
  3. Click Activate License

Your license key was included in your purchase confirmation email. If you cannot find it, log in to your account at smartphonefield.com and retrieve it from your order history.

Step 4: Configure Your Settings#

Once your license is active, go to WooCommerce > Smart Phone Field > Settings to configure the plugin.

Preferred Countries

You can pin up to 4 countries to the top of the country dropdown. These appear above all other countries when a customer opens the field. Set these to the countries where most of your customers are based.

Accent Color

Choose a color that matches your theme. This color is used for the selected country highlight, the field focus border, and the dropdown scrollbar. Click the color swatch to open the color picker and choose your brand color.

Once you have made your selections, click Save Settings.

Step 5: Check Your Checkout#

Visit your WooCommerce checkout page and confirm the phone field is showing correctly. You should see:

  • A country flag and dial code on the left side of the field
  • Your preferred countries at the top of the dropdown
  • Your chosen accent color applied to the selected state

If you do not see the smart phone field on your checkout, see the troubleshooting tips below.

Troubleshooting#

The smart phone field is not showing on my checkout

Make sure you are using the classic WooCommerce shortcode checkout. Smart Phone Field does not currently support the WooCommerce block checkout (Gutenberg). If you are using a page builder such as Bricks, Elementor, or Breakdance with the [woocommerce_checkout] shortcode, the field should appear automatically.

The field is showing but my accent color is not applied

Clear your browser cache and reload the page. If the issue persists, check that your theme does not have conflicting CSS overriding the field styles.

My license key is not activating

Make sure you have copied the full key with no extra spaces. Each license key can be used on unlimited sites.