FooBox and WooCommerce
FooBox is a responsive lightbox, which makes it a good fit for selling your products online. Because it’s responsive, it adjusts automatically depending on the screen size. So it won’t matter whether your products are being viewed on a mobile, tablet or computer.
As FooBox is a lightbox, it opens on top of your current page. This means customers who want a closer look at your products won’t have to navigate away from the product page.
How to use FooBox with WooCommerce
Step 1: Install the Plugins
The first thing you’ll need to do is install FooBox and WooCommerce. If you already have them installed, skip ahead to the next step. If not, go to your plugins page and click on Add New. Search for FooBox, Install and Activate. Do the same for WooCommerce.
If you’re looking for more features for FooBox, you can upgrade to the PRO version. Simply go to FooBox in your Dashboard and click on your Account. You can follow the steps there to upgrade.
Step 2: Set Up
Next, you need to make sure all the right settings are selected for FooBox Pro. Particularly, you need to ensure that the ‘WooCommerce Products’ and ‘All Images’ boxes are ticked.
Note: the “WooCommerce Products” checkbox setting is a FooBox Pro feature and will not display as an option in FooBox Free.
You’ll also need to set up WooCommerce. This is a quick process, where you can stipulate your currency, set up your cart and payment options and more. You’ll adjust the settings to suit your needs, for example, whether you’re selling digital or actual products. But running the WooCommerce Setup Wizard keeps this simple.
Step 3: Add your Products
You’re all set up now, so all that’s left to do is add your products. To do this, you can click on the New icon at the top of your screen (when logged in) and select Product. Or select Add New in the dropdown menu under Products in your dashboard.
Here you’ll be able to specify information about your product, such as whether it’s downloadable, if it’s in stock, and so on. You can also add your product description. Here’s a quick example, using hotel accommodation as our subject.
Following this, you can add your images. For the Product Image, select the main image you want to appear in your shop or on your product page. If you want to add more than one image, click on the link to Add Product Gallery Images.
When adding images, it’s important that you enable them to open in FooBox. To do this, once you’ve uploaded an image, scroll down the menu on the left hand side. You’ll see an option to ‘Link to:’. Set this to ‘Media File’ (a URL should appear in the field below this setting). You should only need to adjust this setting once.
Once you have added your images and published your product, it should look similar to the hotel example below. You’ll see that you can add a number of product images. Then once you click on the main image, it opens in FooBox and you can scroll through the rest of the product gallery.
You’re now ready to sell your products online. You can use FooBox and WooCommerce to sell digital products, like photographs. Or you can sell physical items. You can run a sale, show when items are out of stock, and encourage reviews. The possibilities are many and varied.