{"id":7048,"date":"2020-03-26T00:00:00","date_gmt":"2020-03-25T16:00:00","guid":{"rendered":"https:\/\/www.fraudlabspro.com\/resources2\/tutorials\/how-to-customize-the-display-of-fraudlabs-pro-sms-verification-in-wordpress\/"},"modified":"2026-04-02T18:33:03","modified_gmt":"2026-04-02T10:33:03","password":"","slug":"how-to-customize-the-display-of-fraudlabs-pro-sms-verification-in-wordpress","status":"publish","type":"docs","link":"https:\/\/www.fraudlabspro.com\/resources\/tutorials\/how-to-customize-the-display-of-fraudlabs-pro-sms-verification-in-wordpress\/","title":{"rendered":"How to customize the display of FraudLabs Pro SMS Verification in WordPress"},"content":{"rendered":"

FraudLabs Pro SMS Verification comes with a simple and intuitive SMS verification box for WordPress display. However, if you would like to customize it to better suit your themes, you could easily do so by making some changes by overriding the CSS codes. Below is the syntax that will allow you to customize the design,<\/p>\n\n\n\n\n\n\n\n\n
Syntax id<\/strong><\/td>\nDescription<\/strong><\/td>\n<\/tr>\n
flp_sms_box<\/td>\nFraudLabs Pro SMS Verification Section<\/td>\n<\/tr>\n
flp_sms_success_status<\/td>\nFraudLabs Pro SMS Verification Success Section<\/td>\n<\/tr>\n
flp_get_otp<\/td>\nbutton to get OTP<\/td>\n<\/tr>\n
flp_resend_otp<\/td>\nbutton to resend OTP<\/td>\n<\/tr>\n
flp_submit_otp<\/td>\nbutton to submit OTP<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

This tutorial will demonstrate how to customize the design of SMS verification box in the WordPress without the need to modify the theme files. Please note that we are using the Theme Customizer by WordPress<\/strong> to customize the CSS in this tutorial. The Theme Customizer<\/strong> is the default tool available in WordPress, however, you may also use a 3rd party CSS plugin for the customization.<\/p>\n

    \n
  1. Login to your WordPress Admin page.<\/li>\n
  2. Click on Appearance > Customize<\/strong>.
    \n\"Customize<\/a><\/li>\n
  3. In the WordPress theme customizer interface, click on the Addition CSS\u00c2\u00a0<\/strong>menu.\"Addition<\/a><\/li>\n
  4. Add valid CSS rule in the section provided and it will be applied and shown in the live preview pane.<\/li>\n
  5. In the live preview pane, place an order in WooCommerce and proceed to checkout page.<\/li>\n
  6. Now, the custom CSS rule will be applied and be shown in the right pane.
    \n    \"Add<\/a><\/li>\n
  7. Click on the Publish button to save the customization.<\/li>\n<\/ol>\n

    Please be reminded that any custom CSS that you have added into the Theme Customizer is only available for the current theme. You are required to copy and paste the custom CSS to a new theme by using the same steps provided above.<\/p>\n

     <\/p>\n