Using Sale Ribbons

FooGallery Documentation

Using Sale Ribbons

One of the features included in FooGallery PRO Commerce is Sale Ribbons, which can be used to highlight promotional products or simply to draw attention to specific items.

There are two ways to add Sale Ribbons to your thumbnails. The first is by enabling it within your WooCommerce product gallery, and the second is by doing it manually. Below we cover what you need to do in either instance.

Sale Ribbons on a Dynamic WooCommerce Gallery

It is simple to display ribbons on a WooCommerce product gallery. As products are pulled from WooCommerce, the gallery can identify which items are on promotion, as a sale price would have been added to the items in the WooCommerce product editor, as per below.

woocommerce product on sale

All you now need to do is select the sale ribbon that you would like to display on these items. You can do this in the gallery editor under the WooCommerce tab. Here you will find a drop down list of all the available ribbons. Click on the option you would like to use and update the gallery.

sale ribbons in foogallery pro commerce

The ribbon will now automatically display on any sale items in the gallery.

A few points to note:

  • Ribbons are standard across the gallery – so if you select the green ribbon, all sale items will use the same ribbon.
  • You can override a ribbon for individual items – we explain how to do so below.
  • You can disable ribbons by selecting None.
  • You can change the text on the ribbon in the Sale Ribbon Text field.

Overriding the Ribbon on Individual Items

If you’re using the product datasource for your gallery, then you can override the ribbons for individual products. This means that you can add a ribbon to a product that doesn’t already have one – for example, a new product. Or you can change the ribbon from the sale ribbon selected for the gallery to a different ribbon.

The override is applied to individual products, so the settings need to be changed on the product (not n the gallery). To do this, navigate to your WooCommerce products and select the item to which you want to add / change a ribbon.

Once selected, you’ll be able to edit the individual product. To make changes to the ribbon, go to the FooGallery tab under the product. Here you can choose a new / different ribbon from the drop down Override Ribbon menu. You can also change the text for this ribbon. Once finished, update the product and refresh the gallery to show the changes.

override ribbon settings for WooCommerce product

Adding Sale Ribbons Manually

If you want to add ribbons to your thumbnails manually, then you can do this when uploading or editing an image. Select an image in the media library, and scroll through the image settings on the right of the panel. Here you will find 2 settings: Ribbon Type and Ribbon Text.

add sales ribbons manually to images

The drop down menu for Ribbon Type gives you a selection of 6 ribbons with different colors, shapes and positions. You can choose which ribbon you’d like to use, and then fill in the text that you want to show on the ribbon.

Below is an example of 2 different ribbons as they appear on the thumbnails.

Sale ribbons on thumbnails

Note that when adding ribbons manually, you can add different ribbon types to the same gallery. When using ribbons with a dynamic gallery, however, all would use the same ribbon type.

For more PRO Commerce demos, take a look here.