If you are thinking of creating a powerful online rental store with Wordpress; Booqable is the key.

The following article will guide you through how easy it to allow customers to place online bookings, and connect Booqable to other website plugins like Woocommerce, on a Wordpress website.

How it works

You will have needed to already sign up for a Wordpress account, and added at least one product to your Booqable inventory, before completing the steps below.

1. Install the Booqable plugin

Login to your Wordpress account.
From your WordPress dashboard, click Plugins in the right sidebar.
Click Add New in the top bar.
Search for Booqable or Upload the downloaded plugin.
Click Install Now.
Click Activate Plugin.

💡Note: You can also download the plugin, for a manual installation.

2. Connect your Booqable company ID

You'll need to enter your company ID to connect the your Wordpress website to your Booqable account.

Go to Settings > Website integration > WordPress plugin.
Click the WordPress plugin.
Copy your Company ID.
Open up your Wordpress account again, and click Settings > Booqable.
Paste your company ID in the corresponding field.

3. Add product list to your website

After you have finished installing the WordPress plugin, you can now display your products in a catalogue display on your website.

To embed a list of your Booqable products in a catalogue form (like the image below), copy the following code.

[booqable_list]

2. In your Wordpress Editor mode, choose the page you want and hover your mouse over the screen until the + symbol appears.

3. Choose Code block from the options that appear, and paste the code to embed the product list.

4. Hit Save, and refresh your page. A catalogue like below should appear on your page.

4. Add a single product

You can embed a single product anywhere you like on your webpages in a variety of different display options.

1. Card

A single product card (displayed below) includes the availability, title, and price + rental duration on the card display. When clicked, the card pops up to further display more images, and the product description.

2. Detailed view

A single product detailed view includes the image, a description, pricing information, and an add-to-cart button without a pop-up required in the product card.

3. Button

A button will display the availability, pricing information, quantity information, and 'Add to cart' button. It includes no product images, title, or description.

This is useful if you would like to, or have do so already, create your own product pages or designs on your Wordpress website.

Once you have chosen which product display you want for your webpages, follow the steps below to embed them.

In your Booqable account, click Products.
Hover over the Visible button to view and copy the shortcode for a single product.
There are 3 different shortcodes you can choose from the panel depending on how you'd like to display this product; card, detail, or button (as explained above).
Once you have copied your chosen code, Go to your Wordpress site Editor.
On the webpage of your choice, hover your mouse over the page display until the + symbol appears. Click this symbol to bring up the options.
Click Shortcode, and enter the chosen shortcode into the box.
Hit Save, and refresh your page.

5. Add a date picker

Now that you have embedded products to your website, you will need to add the Booqable date-picker so your customers can select the dates and times for their order.

This will allow your products to have the availability and price displayed correctly.

Copy the code below.

[booqable_datepicker]

2. Go to your Wordpress site editor, and hover your mouse over the webpage display until the + symbol appears. Click this symbol to bring up the options.

3. Click Shortcode, and enter the date-picker code into the box.

4. Hit Save, and refresh your page.

6. Add extra components to your website

Booqable's embeddable components include the following elements that can help improve the customer booking experience on your Wordpress website.

A search box for your product list.

[booqable_search]

2. Display only products from specific tags (useful for displaying different product groups).

[booqable_list tags="tag,tag 2"]

3. Setting the number of products displayed per page.

[booqable_list per="3"]

4. Limiting the number of products loaded altogether.

[booqable_list limit="6"]

You can also use any or all of these options in a single line of code as well:

[booqable_list show-search="true" tags="tag,tag 2" per="3" limit="6"]

7. Troubleshooting

Booqable components are not loading, what can I do?

Certain caching plugins for WordPress might aggressively cache resources, scripts, or elements, disrupting the proper loading and functioning of Booqable embeddable components.

Troubleshooting Steps:

Clear Cache:
- Log in to your WordPress dashboard.
- Navigate to the settings of your caching plugin (e.g., WP Super Cache, W3 Total Cache, etc.).
- Locate the option to clear or purge the cache entirely.
- Once the cache is cleared, refresh the page containing Booqable embeddable components to check for proper functionality.
Disable Caching Plugin:
- If clearing the cache doesn’t resolve the issue, consider temporarily disabling the caching plugin.
- Access the WordPress dashboard and go to the plugins section.
- Find the caching plugin and deactivate it.
- Refresh the webpage with Booqable embeddable components to verify if they are now working correctly.
- Note: Disabling the caching plugin might affect website performance; therefore, re-enable it after confirming if it was causing the conflict.
Whitelisting:
- If the issue is not present with the caching plugin disabled, refer to the documentation of the plugin and whitelist javascript files from Booqable that the caching plugin might be blocking.