After you installed Booqable on your website, you can embed additional Booqable components to enhance your customer's experience.

Just like adding products on your website, simply paste a code snippet anywhere on a page to add the component.

Embeddable components:

Embeddable shopping cart

Embed a shopping cart on any page of your website. The full shopping cart consists of two elements:

  • a list of the products in the cart
  • a sidebar with an order summary and checkout actions

You can also embed these elements separately.

Full embeddable shopping cart

HTML snippet:

<div class="booqable-embeddable-cart"></div>

WordPress shortcode:

[booqable_embeddable_cart]

Product lines only

HTML snippet:

<div class="booqable-embeddable-cart-lines"></div>

WordPress shortcode:

[booqable_embeddable_cart_lines]

Sidebar only

HTML snippet:

<div class="booqable-embeddable-cart-sidebar"></div>

WordPress shortcode:

[booqable_embeddable_cart_sidebar]

Shopping cart button

Embed a button that navigates your customer to the shopping cart.

After you install Booqable on your website, a "floating" shopping cart appears in your website's lower-right corner by default. You can replace the floating cart with a button (in the header of your website, for example).

When you embed the shopping cart button on a page, the floating cart disappears automatically.

HTML snippet:

<div class="booqable-cart-button" data-href="https://your-website.com/cart"></div>

WordPress shortcode:

[booqable_cart_button href="https://your-website.com/cart"]

Important: Remember to replace "your-website.com/cart" with the (relative or absolute) URL of the page where you placed the Embeddable shopping cart.

Date picker

Let your customers select their desired rental period anywhere from your website, and show them real-time pricing and availability.

HTML snippet:

<div class="booqable-datepicker"></div>

WordPress shortcode:

[booqable_datepicker]

Note: The options available in the date picker depend on how you've set up your selectable rental period.

Category list

Embed a list of product categories to make it easier for customers to find what they are looking for.

HTML snippet:

<div class="booqable-categories"></div>

WordPress shortcode:

[booqable_categories]

Note: The category list only filters through product lists that are on the same page (meaning you cannot add just the category list to a page and show the results in another).

Sidebar

Embed a sidebar containing a date picker and a category list.

HTML snippet:

<div class="booqable-sidebar"></div>

WordPress shortcode:

[booqable_sidebar]

Search field

Add a search field that filters through product lists (filters on product names and tags).

HTML snippet:

<div class="booqable-product-search"></div>`

WordPress shortcode:

[booqable_search]

Note: The search field only filters through product lists that are on the same page (meaning you cannot add just the search field to a page and show the results in another).

Product sorting

A dropdown to let customers change the sort order of product lists.

HTML snippet:

<div class="booqable-sort"></div>

WordPress shortcode:

[booqable_sort]

Note: You can specify the default sorting method in the settings for sorting and filtering.

Booqable filter bar

A horizontal bar that combines a search field and a dropdown to sort products.

HTML snippet:

<div class="booqable-bar"></div>

WordPress shortcode:

[booqable_bar]

Did this answer your question?