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.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

Cyber Monday Sales Are Giving up to ~75% Price Off!! on our products | Coupon: CM2022

The Cyber Monday 2022 deal is already here. Grab all BdThemes products at the maximum discounted price, only limited within the event days. Prices went as low as 75% so if you are not buying, you are losing a lot. Just the right time to get the best discounts on the best vacations. 

Wait!! Don't miss ~75% Black Friday Discounts

You have been saving for months to get the best bang for your buck in this Black Friday 2022. This is why we made sure to lower the price to get us a cup of coffee but for you, it will be all the game changer plugins. Have another look at the deal page before you go.

Need any assistance? Call Us:+880 1700 55 95 95
Copyright © 2022 BdThemes. All Rights Reserved.