Table Of Contents

florence grid widget

How To Use Florence Grid Widget by Ultimate Store Kit

Florence Grid widget is an excellent WordPress grid plugin brought to you by the brand new Ultimate Store Kit plugin. This widget helps you display your products in a well-arranged manner, and helps you grow your business bigger.

In this tutorial, we will show you how to use this widget.

Let’s get started.

Inserting Widget

inserting Florence grid widget

First, go to the widget menu, then search Florence Grid. After that, drag-drop the widget on the page.

Content Tab Customizations

Layout Modifications

Florence Grid Doc 2 - BdThemes

After inserting the widget, we will modify the Layout section. To do that, go to the Layout section under the Content tab. You will see some options here. Now, change the Columns Gap of the items, after that, change the Image Size, then enable the Pagination switcher.

Florence Grid Doc 3 - BdThemes

After that, enable the Columns Filter switcher. You will see a result counter on the page. You can filter columns by number here.

Available Query Controls

Florence Grid Doc 4 - BdThemes

Now, go to the Query section where you can show available products. Here, select Product from the drop-down list in the Source option, then, set the Product Limit by 3, after that, select On Sale from the drop-down menu in the Show Product option.

Additional Layout Settings Customization

Florence Grid Doc 5 - BdThemes

Now, go to the Additional section. Here, for the CONTENT mode, you can see some switchers i.e.: Title, Category, Rating, Price, and drop-down menus. Now, enable the switchers and select options from the drop-down menu.

Florence Grid Doc 6 - BdThemes

Next, for the BADGE mode, there are also some switchers i.e.: Sale, Percentage, Stock Status, Trending, New, and a field i.e.: Newness Days. Now, enable the switchers and set the Newness Days as 30.

Florence Grid Doc 7 - BdThemes

Next, for the ACTION BTN, There are three switchers i.e.: Add to Cart, Wishlist, and Quick View. Now enable them to proceed to the checkout process.

Style Tab Customizations

Items Section Styling

Florence Grid Doc 8 - BdThemes

Now, we will customize the Items section with the Style tab. To do that, go to Style > Items. Here, for the NORMAL mode, select a Border, then change the border Color, then set Border Radius, and see what happens on the page.

Florence Grid Doc 9 - BdThemes

Next, for the HOVER mode, change the Border Color, and set a Box Shadow.

Image Modifications

Florence Grid Doc 10 - BdThemes

Now, we will modify the Image section. To do that, go to Style > Image. Here, for the NORMAL mode, change the Background Type and Color, then change the Border Color, and see the effect on the page.

Content Customizations

Florence Grid Doc 11 - BdThemes

Next, we will customize the Content section. To do that, go to Style > Content. Here, for the NORMAL mode, change the Background Type, then change the Border Type. After that, set Border Radius, and add some Padding to 25. After doing these, see the effect on the page.

Title Appearance Change

Florence Grid Doc 12 - BdThemes

After that, we will customize the Title section. Go to Style > Title. Now, select the Normal Color, then select the Hover Color, and then change the Typography. Now see what happens.

Category Tag Customizations

Florence Grid Doc 13 - BdThemes

Now, go to Style > Category. For the NORMAL mode, change the Background Color, then change the Border Color.

Pricing Modifications

Florence Grid Doc 14 - BdThemes

We will now customize the Price section. To do that, go to Style > Price. Here, change the Regular Color and Sale Color, remember to select separate colors for each and see the result on the page.

Rating Badge Customizations

Florence Grid Doc 15 - BdThemes

Go to Style > Rating. Here, change the normal Color and Active Color, you need to select separate colors for them. Then, see the result.

Product Badge Customizations

Florence Grid Doc 16 - BdThemes

Now, we will customize the Badge section. To do that, go to Style > Badge. Here, you will see 5 modes i.e.: SALE, DISCOUNT, STOCK, TRENDING, and NEW, and some options for them. The options are the same for all modes. For the SALE mode, you can change the options shown here, the same goes for the other modes.

Action Button Appearance Change

Florence Grid Doc 17 - BdThemes

Lastly, time to customize the Action Button. To do that, go to Style > Action Button. In this section, there are three modes i.e.: WISHLIST, QUICKVIEW, and CART. The options are almost the same, just there is a slight change in option in the QUICKVIEW mode. In the WISHLIST mode, change the options as shown, and see what happens on the page.

Video Assist

To know more about this widget, watch this tutorial video attached here. Credit goes to BdThemes. You can also see the demo page to learn more.

Thank you.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.