WooCommerce is a powerful and free plugin to add a storefront to your WordPress website. With a vast number of available themes and advanced categorization, it's a great tool to showcase your products.
If you already have a WooCommerce store set up (or if you're just starting out), here's a great workaround to add Booqable buttons to a WooCommerce product.
How it works
WooCommerce is used for the structure and look-and-feel of the storefront, while Booqable handles the product's pricing and availability.
Product details like images and descriptions are added in WooCommerce, but we're replacing WooCommerce's default "Add to cart" button with a Booqable button, which shows availability and pricing:
Now, your products are added to Booqable's shopping cart, customer and order details are collected in Booqable's checkout, and you can manage the order in Booqable.
1. Create a product in both platforms
First, make sure you have both WooCommerce and the Booqable plugin installed on your WordPress website. Then you can proceed with the following.
In WooCommerce, don't fill in the product's price. Leaving the field blank hides the default "Add to cart" button.
There's also no need to track inventory in WooCommerce; Booqable handles both pricing and availability.
2. Copy the embed code from Booqable
In Booqable, head over to the product's Online store tab, scroll down and copy the WordPress shortcode from the "Add to cart button" tab:
3. Add the shortcode to your WooCommerce product
The product short description is a suitable spot to paste the shortcode.
💡Note: If you already added your inventory to either Booqable or WooCommerce, you can export your products to get started quickly.
You're all set!
You have now successfully learned how to use Booqable on your website alongside WooCommerce.