How to Modify Advanced Search Button Color in WP Rentals

In the latest WP Rentals theme, the way you change the Advanced Search button color depends on which search form type you use.

If you use the default theme search forms managed from Theme Options, you can set the button colors directly from the theme settings. If you use the Search Form Builder for Elementor, the button colors are managed inside the Elementor widget settings.

1. If you use the default theme search form

For the default Advanced Search forms managed from Theme Options, go to:

Theme Options → Search → Advanced Search Colors

From there, you can manage:

•  Advanced Search Background Color
• Advanced Search Background color Opacity –  Values between 0 -invisible and 1 – fully visible. Applies only when the search form position “Use Float Search Form?” – is YES.
• Search Button Background Color for the default button color
• Search Button Hover Background Color for the hover color

Important: These color settings apply to the search form when it is displayed in float mode over the hero media header.

2. If you use the Search Form Builder for Elementor

If your search form is created with the WpRentals Search Form Builder for Elementor, the button colors are not controlled from Theme Options → Advanced Search Colors.

Instead, edit the search form widget in Elementor and go to the button styling options, where you can manage:

• button typography
• background color
• text color
• hover background color
• hover text color
• padding, margin, and border radius

3. Use custom CSS for more control

If you want a more specific design than the built-in color options allow, you can add custom CSS in:

Theme Options → Design → Custom CSS

or in your child theme style.css file.

Example CSS for the default search button:

#submit_booking_front,
#advanced_submit_widget,
#advanced_submit_2_mobile,
#advanced_submit_2 {
    color: #ffffff;
    background-color: #4d5567;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    border-radius: 2px;
    padding: 13px 15px;
    margin-top: 0;
    margin-bottom: 0;
}

#submit_booking_front:hover,
#advanced_submit_widget:hover,
#advanced_submit_2_mobile:hover,
#advanced_submit_2:hover {
    background-color: #576074;
}

4. Important notes

• The icon color used in the search form follows the Main Color set in Theme Options → Design → Custom Colors Settings.
• If you do not see your CSS or color changes immediately, clear any theme cache, plugin cache, server cache, or CDN cache.
• If you use a child theme, your CSS changes will remain safe after theme updates.

5. Which search forms use these settings?

WpRentals includes several search form types:

• Hero Media Search shown over the hero media header
• Half Map Search Form used in half map layouts
• Search Shortcode added inside page content
• Search Widget added in widget areas
• Elementor Search Form Builder for custom page builder layouts

The Theme Options color settings apply to the default theme-managed search forms. For Elementor-built search forms, style the button directly from the Elementor widget settings.