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: Replace "your-website.com/cart" with the (relative or absolute) URL of the page where you placed the Embeddable shopping cart.

Note: Some website builders and themes don't let you add the href to the embed code. When no href is present, the button links to /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).

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?