How to make a WordPress form display horizontally?

I’m currently facing two issues while working on monsktel.com

1. CSS Issue: Form Fields Alignment

I’ve implemented the following CSS code to style a form, aiming to display all fields (dates, categories, and buttons) horizontally in a single line. However, the fields are still stacking vertically rather than aligning horizontally.

Code:

/form hero/
.cwbf-filters-wrapper {
background-color: white;
padding: 10px;
border-radius: 8px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.cwbf-filters-head {
  color: black;
}

.cwbf-filters-body {
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
}

.filter-row {
  display: flex;
  align-items: center;
  flex: 1;
  padding-left: 10px;
}

.filter-row label,
.filter-row input,
.filter-row select,
.filter-row .cwbf-filters-checkbox {
  flex: 1;
  margin-right: 10px;
}

.cwbf-fields-label {
  font-weight: bold;
  color: black;
}

input[type="text"], select, input[type="checkbox"] {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  color: black;
}

#cwbf_ajax_search_btn, #cwbf-clear {
  background-color: #e1ba03;
  color: black;
  padding: 12px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s 1  ease;
}

#cwbf_ajax_search_btn:hover, #cwbf-clear:hover {
  background-color: #d1a303;
}

.cwbf-filters-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}

.cwbf-filters-checkbox-text {
  color: black;
}

@media (max-width: 768px) {
  .cwbf-filters-wrapper {
    flex-direction: column;
  }

  .filter-row {
    flex-direction: column;
    width: 100%;
  }}

2. WooCommerce Product Search Plugin Issue

Another issue if this can also be solved is I am using the WooCommerce Product Search plugin, but it is not functioning as expected. Previously, it showed a compatibility issue with the WooCommerce feature ‘High-Performance Order Storage (HPOS)’.

To resolve the issue, I added the following code to the plugin’s root directory:

<?php
/**

After applying this fix, the compatibility error message disappeared, but the plugin still isn’t working. Here are some observations:

*/

add_action( ‘before_woocommerce_init’, function() {
if ( class_exists( \Automattic\WooCommerce\Utilities\FeaturesUtil::class ) ) {
\Automattic\WooCommerce\Utilities\FeaturesUtil::declare_compatibility( ‘custom_order_tables’, FILE, true );
}
} );

The plugin works correctly on a duplicate migration website but fails on the primary one.
No visible error messages or logs are generated now.

My Queries:

CSS Issue:
    Could you suggest corrections to ensure all form elements align horizontally in a single row? i removed categories also, you can see the CSS classes by inspecting the browser. 

WooCommerce Plugin Issue:
    Why might the WooCommerce Product Search plugin work on a duplicate site but not on the original? Could it be related to database or configuration differences?
    If this plugin is not reliable, could you recommend an alternative hotel booking plugin (free) that:
        Works seamlessly with WooCommerce.
        Offers horizontal form layouts or allows sufficient customization for form designs.

Additional Requirements for the Plugin:

The ability to filter/search for properties or hotels with features like date range, categories, etc. with the ability to book rooms, calendar availability, video and photo gallery etc
Preferably free or with an affordable premium option.

But First, try if you can solve the issue

Thank you for your assistance!

• This topic was modified 3 months, 4 weeks ago by Vishal Ramnani.

The page I need help with: [log in to see the link]