How to customize the display of FraudLabs Pro SMS Verification in WordPress

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,

Syntax id Description
flp_sms_box FraudLabs Pro SMS Verification Section
flp_sms_success_status FraudLabs Pro SMS Verification Success Section
flp_get_otp button to get OTP
flp_resend_otp button to resend OTP
flp_submit_otp button to submit OTP

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 to customize the CSS in this tutorial. The Theme Customizer is the default tool available in WordPress, however, you may also use a 3rd party CSS plugin for the customization.

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

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.

Was this article helpful?

Related Articles