Woo Grid/Slider/Carousel
How to Configure and Style Woo Grid/Slider/Carousel #
WooCommerce Grid/Slider/Carousel Elementor offers you plenty of customizing options so you can add products to your WooCommerce store and display them beautifully in the Grid/Slider/Carousel. It helps to make your WordPress website interactive by including a variety of ready-designed layouts. Let’s follow the step by step guidelines below to configure and style Woo Grid/Slider/Carousel:
How to Activate Woo Grid/Slider/Carousel #
Note: Before you begin, make sure that you have the ‘WooCommerce‘ Plugin activated.
To use this Spexo Addons element, find the ‘Product Grid/Slider/Carousel‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Product Grid/Slider/Carousel’ 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 Product Grid/Slider/Carousel in your Elementor Editor, now all you need to do is to configure the ‘Content’ tab. From here, you will get eight sections to design your Product Grid/Slider/Carousel: ‘Query’, ‘Layout’, ‘Elements’, ‘Media Overlay’, ‘Image Effects’, ‘Lightbox Popup’, ‘Filter’ & ‘Pagination’.
Query #
From this section, you can choose the ‘Query products’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your query products: Dynamic, Manual & Current Query Selection. You can use the drop-down to select order.
After choosing your preferred ‘Query products’, you can filter your contents by ‘Categories’ & ‘Tags’. You have the flexibility to choose multiple options and add as many categories & tags as you wish. If you do not want certain products to appear, you can simply ‘Exclude Products’ those contents as well.
Moreover, you can set the number of ‘Products Per Page’, ‘Offset’ and ‘Not Found Text’. You toggle for enable exclude items without thumbnail & exclude out of stock as well.
Layout #
From this section, you can change your layout, image size and last element position. You can use toggle for display last element to bottom, pagination and filters, also change vertical and horizontal gutter, use the drop-down to select one of these as your animation: Default and Zoom.
Besides, you can use the drop-down to change columns number for supported all devices.
Elements #
From this section, you can use the drop-down to select element and change element location and display type. You can change horizontal align and vertical align. Than you can use toggle for hide or display element supported all devices. Moreover, you can styling to your animation and many more.
To add more elements, simply click on the ‘+ ADD ITEM’ button from the bottom.
Media Overlay #
From this section, you can change overlay width & height supported all devices. Use toggle for enable/disable for link product to single page and animation transparency.
Besides, you can change animation, animation duration, animation delay, animation timing and amination size as well.
Image Effects #
From this section, you can change effects. If you can select animation then you can change animation duration, animation delay, animation timing and animation size as well.
Lightbox Popup #
From this section, you can change autoplay speed. You can use toggle for enable/disable autoplay slides, show progress bar, show caption, show counter, show arrows, show zoom button, show full screen button and show download button as well.
Filters #
From this section, you can change filter taxonomy, alignment and select animation. You can use toggle for enable/disable show all filter, set linkable filters and hide empty filters. If all filter is enable then you can set all filter button text.
Pagination #
From this section, you can change pagination type, set load more text, finish text, select loading animation and alignment as well.
Click to see Live Demo #
How to Style Woo Grid/Slider/Carousel #
To customize Woo Grid/Slider/Carousel, 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, 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 and border radius. On the other hand, customize your ‘Title’, ‘Excerpt’, ‘Categories’, ‘Tags’, ‘Rating’, ‘Status’, ‘Price’, ‘Sale Dates’, ‘Add to Cart’, ‘Add to Wishlist’, ‘Add to Compare’, ‘Lightbox’ ‘Separator 1’, ‘Separator 2’ and ‘Password Protected’ from these settings.
Besides, you can also customize your ‘Filters’ and your ‘Pagination’ from these settings.
Final Outcome #
By following the basic steps and a bit more modifying, you can style your Woo Grid/Slider/Carousel as per your preference.
This is how you can simply showcase your WooCommerce Products with a stunning Grid/Slider/Carousel on your eCommerce website by using Woo Grid/Slider/Carousel.
If you need any help, feel free to contact our dedicated support team for further assistance.
Functional Always active
Preferences
Statistics
Marketing
Subscribe & Download
Enter Your Email Address to Know About the Latest Updates & Features.