Woo Category Grid
How to Configure and Style Woo Category Grid #
Woo Commerce Category Grid Elementor offers you plenty of customizing options so you can display woo category beautifully in the Grid. It helps to make your eCommerce website interactive by including a variety of ready-designed layouts. Let’s follow the step by step guidelines below to configure and style Woo Category Grid:
Before you begin, make sure that you have installed and activated Sastra Addons Pro plugin on your website. Without the Sastra Addons Pro activated, you cannot use this elements.
How to Activate Woo Category Grid #
To use this Sastra Addons element, find the ‘Woo Category Grid‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Woo Category Grid’ into the ‘Drag widget here‘ or the ‘+’ section.
After you have successfully done with step 1, this is how the element is going to look like.
How to Configure the Content Settings #
After you have completed adding the Woo Category Grid in your Elementor Editor, now all you need to do is to configure the ‘Content’ tab. From here, you will get five sections to design your Post Category Grid: ‘Query’, ‘Layout’, ‘Elements’, ‘Media Overlay’ & ‘Image Effects’.
Query #
From Query section, you can use toggle for display or hide empty and child categories. If you do not want certain post categories to appear, you can simply ‘Exclude Categories’ those contents as well.
Layout #
From this section, you can use the drop-down to select one of these as your layout: FitRows – Equal Height, List Style & Masonry – Unlimited Height Selection. Than you can change image size, columns, animation, animation duration and amination delay.
Besides, you can use slider bar for change horizontal gutter and vertical gutter with supported all devices.
Elements #
From this section, you can use the drop-down to select one of these as your element: Title, Description, Count & Separator Selection. Also you can use drop-down for change location, display type, title HTML tag, extra text display position and extra icon position.
Moreover, you can change horizontal alignment and word count. Than you can use toggle for display or hide on this devices. To include additional elements, just click on the ‘+ ADD ITEM’ button located at the bottom
Media Overlay #
From this section, you can use the slider bar for change overlay width and height with support all devices. You can use toggle for enable or disable link to single page and animation transparency. Than you can use drop-down for select animation, animation timing and animation size. You can change animation duration and animation delay.
Additionally, you have the option to select GIFs according to your preference and adjust the GIF width.
Image Effects #
From this section, you can set image effect. Than you can change animation duration, animation delay, animation timing and animation size as well.
Click to see Live Demo #
How to Style Woo Category Grid #
To customize Woo Category Grid, click on the ‘Style’ tab, and you will find many different options here.
Grid Item #
From here, you can change grid item style, background color, border color, even background color, even border color, border radius and padding. Moreover, you can styling to border and box shadow as well.
Grid Media #
From here, you can styling to border and border radius as well.
Others #
From the ‘Media Overlay’ settings, you can you can set background color, styling to border and more. On the other hand, customize your ‘Title’, ‘Description’, ‘Count’, ‘Separator 1’ and ‘Separator 2’ from these settings as per your preference.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Woo Category Grid as per your preference.
This is how you can simply showcase your products categories with a stunning Grid on your e-commerce website by using Woo Category Grid.
If you face any difficulties, feel free to contact our support team for further assistance.
