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.
- Login to your WordPress Admin page.
- Click on Appearance > Customize.
- In the WordPress theme customizer interface, click on the Addition CSS menu.
- Add valid CSS rule in the section provided and it will be applied and shown in the live preview pane.
- In the live preview pane, place an order in WooCommerce and proceed to checkout page.
- Now, the custom CSS rule will be applied and be shown in the right pane.
- 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.