Skip to main content
How to embed products on WordPress

Learn how to create your perfect product display by embedding Booqable's inventory on a WordPress website.

Igor avatar
Written by Igor
Updated over 3 months ago

After you've installed the WordPress plugin, you can show your products and a date picker anywhere on your website by pasting a simple shortcode.ย 

How it works

1. Embed a list of products

To embed a list of your Booqable products, paste this code anywhere:

[booqable_list]

2. Embed a single product card

A product card will open details (description) about the product in a pop up when clicked on.

1. In Booqable, go to Products.

2. Hover over the visible button to see and copy the embed code for a product.

There are 3 different embed codes depending on how you'd like the product to display/

3. Click Card, and copy the Wordpress code.

4. Alternatively, go into your specific product and click on the online store tab, where you can choose which embed code to copy.

3. Embed a product detail view

A detailed view will have the image with a description, pricing information, and an add to cart button without a pop up needed.

1. In Booqable, go to Products.

2. Hover over the visible button to see and copy the embed code for a product.

There are 3 different embed codes depending on how you'd like the product to display/

3. Click Detail, and copy Wordpress code.

4. Alternatively, go into your specific product and click on the online store tab, where you can choose which embed code to copy.

4. Embed a product button

Just a button will just have the availability, pricing information, quantity information and add to cart button from the detailed view and no product information.

This is best used when incorporating Booqable onto your website that has a commerce system with products already in it!
โ€‹

1. In Booqable, go to Products.

2. Hover over the visible button to see and copy the embed code for a product.

There are 3 different embed codes depending on how you'd like the product to display/

3. Click Card, and copy the Wordpress code.

4. Alternatively, go into your specific product and click on the online store tab, where you can choose which embed code to copy.


3. Embed a search field, collections, and more

You can add optional parameters to your website with the following codes.

  • add a search field that filters the product list.

[booqable_search]
  • only show products with specific tags (useful to display different collections),

[booqable_list tags="tag,tag 2"]
  • set the number of products displayed per page.

[booqable_list per="3"]
  • limit the number of products loaded altogether.

[booqable_list limit="6"]

You can 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 learned embed products on a WordPress website with Booqable.

Did this answer your question?