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 does it work?
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.
How do I set this up?
Step 1 - Create your product in both Booqable and WooCommerce.
- 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.
Step 2 - Copy the embed code from Booqable.
In Booqable, head over to the product's settings tab, and copy the WordPress shortcode from the "Button" tab:
Step 3 - Add the shortcode to your WooCommerce product
The product short description is a suitable spot to paste the shortcode.
Tip: If you already added your inventory to either Booqable or WooCommerce, you can export your products to get started quickly.