Add Ribbons and Buttons to your WordPress Product Gallery

Sales Ribbons and buttons can improve the usability and appearance of your product gallery, making it easier for customers to select and buy the products they want. With FooGallery PRO Commerce, it is simple to add either or both to your gallery. Plus, you don’t need to integrate with WooCommerce to do so.

Sale Ribbons

By adding ribbons to your gallery thumbnails, you can highlight new products, draw attention to sales or promotional items, or add any special mentions to your products. You can even display an Out of Stock or a Backorder Ribbon.

We’ve added a few options to the gallery below.

Images courtesy of Pixabay

In the above gallery, you can see that Sale Ribbons are varied, as we’ve added them to individual items using the media attachment modal (you can also do this in the media library). If you are using WooCommerce, you can also set up the WooCommerce integration to add ribbons to items that are on sale, for example. You would do this in the gallery settings under the Ecommerce tab.

There are 7 different ribbon types to choose from, with the colors and shapes preset for these. You can then add the wording you would like to use for each ribbon. You can find out more about using Sale Ribbons here.


With FooGallery PRO Commerce, you can add buttons to your image galleries.

Images courtesy of Pixabay

In the above demo, we’ve used the Product Gallery layout, which comes with FooGallery PRO Commerce. This layout has been designed to showcase products, with the buttons fitting into the design seamlessly. However, you can add buttons to any of the layouts when using the PRO Commerce plan.

If you’re pulling product images into your gallery from WooCommerce, you can use the Ecommerce tab in your gallery to add buttons. However, you can also add buttons to individual images in your gallery, as we’ve done in the above demo. To do this, you can use the Advanced Attachment Modal – all you need to do is add the button text and URL under the Commerce tab in the modal, and the button will be automatically generated.

You can use different text and URLs for your buttons, allowing you to direct customers to the right place. For example, you can use a Buy Now button to take users to a shopping cart, or you can direct them to a product page with more information. Regardless, adding buttons to your gallery helps you to improve customer experience, and make it easier for customers to find what they’re looking for.

Sale Ribbons and Buttons are both available in the FooGallery PRO Commerce plan.

Want to see more demos? Click here.