Over the past few days, I’ve been working on a major improvement to the booking experience, especially for those who manage a large number of bicycles. Version 1.4.1 introduces a completely new shortcode designed to improve the way bikes are displayed and make the process clearer and more intuitive.
New shortcode: two-column layout
The new shortcode is now available:
[simpbire_bike_rental_split]
This layout organizes the interface into two side-by-side columns: on the left are the controls (rental type, dates, and customer information), and on the right is the grid of available bikes.
How do bicycle cards work?
The card behavior changes automatically depending on whether the user has selected dates or not.
No dates selected – catalog mode The bikes are displayed like a catalog you can browse: when you click on a card, the bike’s details page opens, where you can also start a reservation. (For this to work, “Details URL” must be entered in the bike’s settings).
With dates selected – booking mode The grid updates to show only the bikes available for the chosen period. The cards no longer link to the bike’s details page: clicking on a card directly selects the bike and completes the reservation.
In short: until the user selects dates, they can browse the catalog freely; as soon as they enter dates, the grid is filtered and becomes a quick booking tool.
Ideal for large fleets
This new layout is especially useful for those who manage a large number of bicycles and want to show all the options at once. This new feature represents an important step toward a more flexible and professional booking system. If you have a lot of bikes or want to improve the user experience on your website, I recommend giving it a try.
If you prefer a more compact left column in the split layout, you can easily adjust its width using custom CSS. For example, you can reduce the maximum width of the sidebar like this:
.simpbire-split-layout .simpbire-split-layout__grid {
display: grid;
grid-template-columns: minmax(280px, 325px) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
/* MOBILE */
@media (max-width: 768px) {
.simpbire-split-layout .simpbire-split-layout__grid {
grid-template-columns: 1fr;
}
}This ensures the layout remains fully responsive, stacking the columns correctly on smaller screens.
Internal optimizations and improvements
In this update, we have also made several “under-the-hood” improvements to make the plugin more stable, faster, and, most importantly, easier to maintain over time.
Without changing the user experience, we have optimized the internal structure of the code, making the administration interface more reliable and paving the way for future features. In addition, the translations have been updated.
Demo
You can test the new layout right here.
How to use it
Simply add the shortcode [simpbire_bike_rental_split] to a page. If you try out this new feature, please let me know what you think. Any feedback you can provide is valuable for us to keep improving the plugin.