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.
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.
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.
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.
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 date-picker code 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.
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.
2. Displaying only products from specific tags (useful to display different categories).
[booqable_list tags="tag,tag 2"]
3. Setting the number of products displayed per page.
4. Limiting the number of products loaded altogether.
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"]
You're all set!
You have now successfully learnt how to install Booqable on a WordPress website.