Elements
Text Block
The Text Block element is used to add and format a simple block of text on your page. This can include paragraphs, headings, lists, or any other textual content you want to display.
Once added, click on the Text Block to open the editing window.
Enter the text you want to display in the editor. This could be a paragraph, list, or any formatted text you need.
You can use basic formatting tools to make text bold, italic, or add lists and links.
Customize Text Style:
Use the toolbar at the top to change text formatting, such as:
Bold or Italic text.
Add bullet points or numbered lists.
Insert hyperlinks if needed.
You can also change the alignment (left, center, right) if desired.
Styling Options (optional):
In the settings, look for Design Options (usually at the bottom).
Here, you can add padding, borders, or background colors around your text block to make it stand out.
Save and Update:
After entering and styling your text, click Save Changes.
Once you’re done editing the page, click Update to save and apply your changes to the page.
Single Image
The Single Image element is used to add an individual image to your page. It’s ideal for displaying a standalone photo, logo, icon, or graphic.
Choose an Image:
Click on Image in the settings box to open the Media Library.
Upload a new image or select an existing one from your library.
Click Set Image to add it to your page.
Adjust Image Settings:
Image Size: Choose a size (e.g., thumbnail, medium, large, or full) based on how you want the image to display. You can also enter custom dimensions if needed.
Image Alignment: Select alignment (left, center, or right).
Image Style: Choose from different styles, like rounded corners, circles, or shadows, to enhance the image appearance.
Optional Image Link:
If you want the image to be clickable, you can add a link:
Link to Large Image: Opens the full-size image in a lightbox when clicked.
Custom URL: Add a specific URL if you want users to go to a different page when they click the image.
Select Open link in new tab if you want the link to open in a new browser tab.
Save and Update:
Click Save Changes after setting up the image.
Once you’re done editing the page, click Update to save and apply your changes to the page.
Image Gallery
The Image Gallery element lets you add multiple images in a grid or carousel layout, perfect for showcasing a collection of photos or products on your page.
Images and Image Size: The gallery allows adding images and specifying their sizes, which gives you control over the quality and dimensions of each image.
Rounding: This option lets you apply rounded edges to the images, which can help achieve a softer or more modern look.
Layout:
View: You can select the display mode as a grid or carousel.
Space Between Images: Set the spacing between images, which affects the visual separation in the layout.
Columns: Configure the number of columns in the grid layout to control how many images appear in a row.
Alignment: Options for horizontal and vertical alignment of images ensure they are centered or aligned as desired.
Click Action: This setting lets you define what happens when an image is clicked, such as opening in a lightbox or linking to another page.
Lazy Loading: Enabling lazy loading improves performance by only loading images as they come into view, which can help speed up initial page load.
CSS and Theme Animation: These settings allow animations for the images, enhancing user engagement with subtle or thematic animations when the images load or appear on the screen.
Button
The Button element lets you add a clickable button to your page. You can use this to link to another page, an external website, or any URL you want. Here’s how to use it:
Text and Link:
Button Text: Enter the text you want to display on the button (e.g., "Learn More," "Shop Now," etc.).
Link URL: Add the link where you want the button to redirect users when clicked.
Select a Style:
Theme Styles: Choose from the available button styles that match your theme. Each style has a different color, shape, or hover effect.
Button Size:
Choose the size of your button (small, medium, large) based on your design preference.
Alignment:
You can align the button to the left, center, or right within the row or column it’s placed in.
Save: Once you’ve customized your button, click Save to add it to your page.
Information Box
The Information Box element lets you display important information in an organized, visually appealing way. It’s great for highlighting key details, announcements, or features on your page. Here’s how to use it:
Image
Field: Upload an image or choose one from your media library.
Purpose: The image adds a visual element to the information box, making it more engaging and illustrative. For example, if you’re highlighting a product or service, you could add a relevant product image here.
Positioning Options: You can position the image on the left, right, top, or bottom of the text, depending on your preferred layout.
Styling Options: Adjust the image size, border, and spacing to match the style of the rest of the information box.
Title:
Enter the Main Title: This is the headline of your information box, meant to quickly grab attention (e.g., "Exclusive Offer" or "Our Services").
Customize: Set the font size, style, and color to make it noticeable and consistent with your branding.
Subtitle:
Enter the Subtitle: The subtitle goes under the title and gives a short description or additional detail (e.g., "Save 20% today" or "What we offer").
Customize Style: Adjust font size and color to distinguish it from the title. It’s typically smaller and in a lighter style.
Content
Field: Enter the main description content here.
Purpose: This section provides a paragraph of information that elaborates on the title and subtitle. It’s a great place to give more context, highlight features, or offer additional details.
Tips: Keep the description concise and clear, as this box is meant for essential information.
Button
Field: Set the button text (e.g., "Learn More," "Shop Now," "Contact Us").
Button Link: Provide a URL for the button link, which takes users to the next relevant page (such as a contact form, product page, or more details).
Styling Options: Customize the button's color, style, and alignment. Choose from different styles (such as flat, rounded, or 3D) to match your brand’s look and feel.
Tips: Use action-oriented words for the button text, encouraging users to take the next step.
Design Options
Background Color: Set a background color for the entire Information Box to make it stand out from the rest of the page.
Padding & Margin: Adjust the padding to control spacing inside the box, and margins for spacing outside the box.
Borders: Customize borders around the Information Box, including border style, width, and color.
Alignment and Positioning:
Position the box where it best fits on the page. You can align it to the left, center, or right.
Information Box Carousel
The Information Box Carousel allows you to display multiple information boxes in a sliding carousel format. Each slide in the carousel can include a title, subtitle, description, image, and a button. This element is ideal for showcasing multiple services, products, or key features in an engaging and interactive format.
Slides per View:
This option controls how many information boxes are visible on the screen at one time. You can set different values for desktop, tablet, and mobile views (indicated by the icons next to the input field).
Adjusting this value helps ensure the carousel layout is responsive and optimized for each device.
Slider Spacing:
This option sets the amount of space (in pixels) between each slide. You can enter a custom value here.
A higher number will create more spacing between slides, making each information box more visually distinct.
You can also set different values for desktop, tablet, and mobile views by selecting the respective device icons.
Scroll per page
When this option is enabled, the carousel will scroll one "page" of items at a time. For example, if you have three slides visible at once (based on your Slides per view setting), clicking the navigation arrows will move the carousel three slides at a time, taking you to the next "page" of three items.
If this option is turned off, the carousel will scroll one item at a time regardless of the number of slides visible. So, with three slides in view, clicking the navigation arrows will move the carousel by one slide at a time, showing the next item without jumping to a whole new page.
Slider Loop: When enabled, the carousel will loop back to the beginning after reaching the last slide, creating a continuous scrolling effect.
Auto Height: Automatically adjusts the height of the carousel based on the tallest slide in view, ensuring content fits without leaving extra space.
Slider Autoplay: Enables automatic scrolling through the slides. You can also set the autoplay speed for the transition time between slides.
Init Carousel on Scroll: Starts the carousel only when it comes into view as the user scrolls down the page, which can improve performance on long pages.
Disabled Overflow: Hides any content that extends beyond the carousel's edges. Useful for keeping the design clean and contained within the carousel area.
Hide Prev/Next Buttons: Hides the previous and next navigation arrows, making the carousel look simpler. Ideal if you want users to swipe or use pagination only.
Carousel Arrow Position: Defines the position of the navigation arrows (left, right, or center) relative to the carousel.
Arrow Offset Horizontal: Adjusts the horizontal spacing of the arrows from their default position, allowing fine-tuning for a custom look.
Arrow Offset Vertical: Adjusts the vertical positioning of the arrows to better fit your design preferences.
Hide Pagination Control: Hides the pagination indicators (dots or numbers) usually displayed below the carousel, for a cleaner look.
Dynamic Pagination Control: Only shows pagination indicators for the slides that are currently visible, rather than for all slides, making it less cluttered.
Hide Scrollbar: Removes the scrollbar from the carousel if it's visible, which can improve the aesthetic of the carousel.
Synchronization: Allows this carousel to be synced with another carousel, so they scroll in unison. Useful for creating linked carousels, like thumbnails and main images.
Design Options
Background Color: Set a background color for the entire Information Box to make it stand out from the rest of the page.
Padding & Margin: Adjust the padding to control spacing inside the box, and margins for spacing outside the box.
Borders: Customize borders around the Information Box, including border style, width, and color.
The Instagram element is designed to showcase Instagram posts directly on your website
Source Type:
API: Fetches posts directly from Instagram using an API connection.
Images: Allows manual image selection from your site.
Scrape (Deprecated): Scrapes Instagram images (not recommended due to Instagram restrictions).
AJAX (Deprecated): Uses AJAX for data fetching (not recommended due to being outdated).
Rounded Corners for Images:
Rounded Corners: Toggle to add rounded edges to the displayed images.
Hide Likes and Comments: Option to hide like and comment counts from each post.
Rounding: Controls the intensity of the rounded effect (e.g., inherit, slight, full).
Content:
Title: Allows adding a title above the Instagram feed.
Number of Photos: Selects the number of photos to display.
Photo Size: Sets the size of each displayed image for the feed.
Instagram Text:
A text editor to add a description or caption for the Instagram feed element, supporting formatting and media insertion.
Content Width and Color Scheme:
Content Width: Adjusts the width of the Instagram element.
Color Scheme: Choose a theme (Inherit, Light, Dark) for background and text styling.
Text Color and Background Color: Customize specific colors for text and background.
Link:
Username: Enter the Instagram username for linking purposes.
Open Link In: Choose if the link should open in the current window or a new one.
Link Text: Customize the anchor text displayed as the link.
Layout:
Layout: Choose between Grid or Carousel to display posts.
Photos Per Row: Sets how many photos display in each row (for grid view).
Add Spaces Between Photos: Toggle to add spacing between images in the layout.
Promo Banner
Promo banner is to highlight important announcements, promotions, or special offers on a website or app. It grabs users' attention quickly, driving engagement with limited-time deals, new product launches, seasonal discounts, or other significant updates, ultimately enhancing user experience and boosting conversions.
General
Source: Choose either an image or video as the background for the banner.
Image: Select an image from your library to display as the banner's background.
Image Size: Adjust the size of the selected background image.
Fixed Height: Toggle to maintain a fixed height for the banner.
Rounding: Set the banner’s corner rounding effect (e.g., rounded or square).
Banner Link: Choose a URL to direct users when they click on the banner.
Style
Banner Style: Select a style layout for the banner display, such as color mask or border options.
Hover Effect: Choose an effect (e.g., zoom) to display when the user hovers over the banner.
Color Scheme: Select from Inherit, Light, or Dark to match your site's color theme.
Extra Options
CSS Animation: Choose an animation effect to add movement to the banner, enhancing user engagement.
Title and Subtitle
Title: Input the main title text for the promo banner.
Font: Choose the font family for the title.
Title Tag: Select the HTML tag for the title (e.g., h1, h2, h3).
Predefined Title Size: Choose a standard title size.
Custom Font Size: Set a custom font size for different devices (e.g., Desktop).
Font Weight: Adjust the weight (boldness) of the title text.
Custom Line Height: Define the line height for the title text to control spacing.
Subtitle: Enter the subtitle text.
Subtitle Font and Weight: Customize the font and weight for the subtitle.
Content
Banner Content: Enter the text content for the banner, using formatting options like bold, italic, and lists.
Countdown
Date: Set the end date for the countdown.
Hide Countdown on Finish: Toggle to hide the countdown when it reaches zero.
Style: Choose the visual style for the countdown timer. The options may include Standard and other visual variations depending on the theme.
Color Scheme: Select a color scheme for the countdown timer. Options include:
Inherit: Uses the inherited color scheme from the general banner or theme.
Light: Applies a light color scheme, suitable for darker backgrounds.
Dark: Applies a dark color scheme, suitable for lighter backgrounds.
Button
Button Text: Specify the text on the button.
Button Position: Choose whether the button is static or appears on hover.
Button Style: Select from different styles, such as Flat, Bordered, Link Button, 3D Button.
Button Shape: Choose the button shape (e.g., Rectangle, Round, Rounded).
Button Size: Define the button size.
Predefined Button Color: Set a color for the button.
Idle Background Color: Choose a background color when the button is idle.
Idle Text Color Scheme: Set the text color when the button is idle.
Background Color on Hover: Choose a background color when the button is hovered over.
Text Color Scheme on Hover: Set the text color when hovered.
Hide Button on Tablet/Mobile: Toggle to hide the button on smaller devices.
Type: Choose between using an icon or image within the button.
Icon Library: Select an icon library (e.g., Font Awesome).
Icon: Choose the specific icon to use.
Layouts
Content Horizontal Alignment: Align the content horizontally within the banner.
Content Vertical Alignment: Align the content vertically.
Text Alignment: Set the alignment of the text within the banner.
Content Width: Define the width of the content (e.g., 100%).
Increase Spaces: Toggle to add more spacing between content elements.
Banners Carousel
The Banners Carousel is a type of rotating banner display used to showcase multiple images, messages, or promotions within a single section of a webpage. It cycles through content, often automatically, and allows users to browse through different "slides" using navigation controls.
Slider
Slider: This dropdown allows you to choose the specific slider to use in the element. Depending on your setup, this might display available sliders created in your theme or plugin.
Synchronization: This feature allows you to synchronize multiple sliders. You have three options:
Disabled: No synchronization will occur with other sliders.
As Parent: This slider will act as the parent, controlling another slider.
As Child: This slider will act as the child, being controlled by a parent slider.
Social buttons
Enable users to easily share content, follow, or engage with a brand on social media platforms, increasing visibility, driving traffic, and enhancing brand reach.
General
Label: Toggle this on to display a label beside the social buttons.
Buttons Type: Choose between "Share" and "Follow" button types. "Share" allows users to share your content, while "Follow" directs users to follow your social media accounts.
CSS Animation: Add animations to the social buttons for a more dynamic effect.
Style
Align: Select the alignment of the buttons (left, center, or right) to fit your design.
Button Style: Choose the visual style of the button, including color variations that align with your brand or theme.
Button Form: Set the button shape to either rounded or squared, depending on your preference.
Button Size: Adjust the size of the social buttons to be small, medium, or large.
Color: Customize the button color to match your website’s color scheme.
Design Options and Advanced
Design Options: Customize margins, paddings, and other spacing options to control the button's placement on the page.
Advanced: Add custom CSS classes for more specific styling if you have advanced CSS skills.
Testimonials
To use the testimonial feature, first set up the testimonial slider, and then add individual user testimonials within it.
The Testimonials Settings allows you to customize testimonial displays on your website.
General
Element Title: Enter a title for the testimonial section if needed.
Layout: Choose between displaying testimonials in a Carousel (scrolling) or Grid (static layout).
Space Between Testimonials: Set the spacing (in pixels) between individual testimonial items.
Color Scheme: Choose a color scheme: Inherit, Light, or Dark to match your site's theme.
Style: Select a style for the testimonial display:
Standard: Basic layout for testimonials.
Boxed: Testimonials are in a box format.
Information Top: Key information is displayed at the top.
Text Size: Adjust the font size of the testimonial text.
Align: Choose alignment for the testimonial text (left, center, or right).
Display Stars Rating: Toggle on/off to show or hide star ratings for testimonials.
Carousel
Please refer to the Information box carousel for more details.
Image:
User Avatar: Allows uploading an avatar image for the testimonial.
Image Size: Lets users set the size of the image.
Content:
Name and Title: Fields for entering the name and title of the person giving the testimonial.
Text: A rich text editor for adding the testimonial content, with options like bold, italics, lists, blockquote, and media insertion.
Accordion
The Accordion element is used to display content in a collapsible, organized, and space-saving manner. It allows sections of content to be expanded and collapsed, showing only the title or header by default and revealing more information when clicked. This can be used to display the collapsible FAQs.
ECOMMERCE WIDGETS
AJAX Products Tabs
The AJAX Products Tabs feature allows you to create tabbed sections for products on your site, enhancing user experience by enabling easy navigation between different product categories or attributes without reloading the page.
General Tab (Heading):
Design: Choose from different tab layout designs to structure the look of the product tabs.
Tabs Primary Color: Set the main color for the tabs, which will affect the appearance and make it more visually aligned with your site’s theme.
Title Color: Customize the color of the tab titles to match your branding or design preferences.
Tab Title Settings:
Style: Options such as “Underline” allow you to control how the tabs' titles are styled. This affects the visual emphasis of the selected tab title.
Icon Position: Define where the icon appears in relation to the tab text. You can choose positions like left, right, or above the title, making the tabs visually distinct and informative.
Vertical and Horizontal Spacing: These settings let you adjust the space around each tab, ensuring they are visually balanced and responsive across devices.
After configuring the Product Tabs, click on the "+" icon to add products, as shown in the image below.
The "Products Tab" settings provide options for customizing how products are displayed and filtered within a tabbed layout on the frontend.
General
Title:
This allows you to define a title for the tab. This title will typically be displayed as the name of the tab on the frontend.
Icon Setting:
Icon Type: You can choose an icon type, such as an image or a simple icon, to visually represent the tab.
Icon for the Tab: Upload an icon for the tab (if "with image" is selected in the icon type).
Icon Size: Customize the size of the icon, which will adjust the dimensions to fit your design requirements.
Product Source:
Data Source: You can select the product data source, such as all products or specific collections or categories. This lets you target specific product groups for the tab.
Categories or Tags: This field allows you to narrow down the selection by filtering products by category or tags.
Sorting and Query Options:
Order By: Choose the attribute by which products should be sorted (e.g., price, popularity, or date).
Offset: Skip a specified number of products from the beginning of the list. This is useful for advanced layouts where you may want to exclude some items.
Sorting: Choose between ascending or descending order. The “Inherit” option allows it to follow a default sorting setting, likely defined elsewhere in the theme settings.
Query Type (OR / AND): If you are using multiple filters, you can decide whether to use OR (show products that match any filter) or AND (show products that match all filters).
Exclude: This allows you to exclude specific products by name or ID.
Hide Out of Stock Products: If enabled, out-of-stock products will not be displayed within the tab.
Grid, List, or Carousel:
Grid: Displays products in a traditional grid layout.
List: Displays products in a list format, one item per row.
Carousel: Allows products to be displayed in a carousel, which lets users scroll horizontally through products.
Columns:
Set the number of columns for the grid or carousel. Different values can be specified for different device types (e.g., desktop, tablet, mobile) for responsive design.
Masonry Grid:
Inherit / Enable / Disable: When enabled, products will appear in a masonry grid layout, which arranges items of varying sizes in an aesthetically pleasing way, filling gaps in the grid layout.
Product Grid with Different Sizes:
This option allows for products to be displayed in varying sizes within the grid, adding visual interest.
Space Between Products:
Controls the amount of space (padding or margin) between individual products. The “Inherit from Theme Settings” option allows the layout to follow the theme’s default spacing.
Items per Page:
Set the number of products displayed per page in the tab. This affects the total number of items a user can see at once.
Pagination Type:
Choose a pagination style (such as numbered pagination, infinite scroll, or a “Load More” button) to let users navigate through additional products.
Design Settings
These settings customize the visual presentation of the products within the tab.
Product Hover Options:
Hover Effects: Different hover styles can be selected, such as revealing options (e.g., "Select Options" or "Quick View") or adding animations when the user hovers over a product image.
Image Size:
Allows you to specify the dimensions of the product images within the tab.
Stock Progress Bar:
If enabled, a progress bar shows how much stock remains, which can be a useful visual cue for limited-stock items.
Sale Countdown:
If enabled, displays a countdown for sale items, indicating how much time is left before the sale ends. This is useful for time-sensitive promotions.
Product Color Scheme:
Allows you to set a color scheme specifically for products displayed in the tab.
Additional Style Options:
Bordered Grid: Adds a border around each product in the grid.
Products Background: Allows you to add a background color or style to each product.
Products Shadow: Enables shadow effects, adding depth to product images.
ProductInherit / Enable / Disable: You can enable or disable a product gallery view within the tab, allowing users to see multiple images per product.
Quantity Input on Product: Controls the display of a quantity input field, so users can select the number of units they want directly from the tab interface.
Data Settings
This section is focused on controlling what products are displayed within the tab and how they’re sorted.
Product Source:
Data Source: You can select the product data source, such as all products or specific collections or categories. This lets you target specific product groups for the tab.
Categories or Tags: This field allows you to narrow down the selection by filtering products by category or tags.
Sorting and Query Options:
Order By: Choose the attribute by which products should be sorted (e.g., price, popularity, or date).
Offset: Skip a specified number of products from the beginning of the list. This is useful for advanced layouts where you may want to exclude some items.
Sorting: Choose between ascending or descending order. The “Inherit” option allows it to follow a default sorting setting, likely defined elsewhere in the theme settings.
Query Type (OR / AND): If you are using multiple filters, you can decide whether to use OR (show products that match any filter) or AND (show products that match all filters).
Exclude: This allows you to exclude specific products by name or ID.
Hide Out of Stock Products: If enabled, out-of-stock products will not be displayed within the tab.
Product Categories
Product categories help organize products into distinct sections, making the shopping experience more intuitive. Customers can quickly locate groups of similar items, like "Earrings," "Necklaces," or "Rings," instead of searching through individual products.
General
Data Source: Choose the source of the categories, like a custom query.
Type: Set the display type for categories, such as Grid.
Number: Define the number of categories to display.
Order By: Select the criteria for ordering categories, like by name or count.
Sort Order: Choose ascending or descending order.
Categories: Specify specific categories if needed.
Hide Empty: Toggle to hide categories with no products.
Product Count: Show or hide the count of products in each category.
Style Tab
Categories Design: Pick the visual design or template style for category items.
Bordered Grid: Toggle to add borders around category grid items.
Categories Background: Toggle to enable background color for category items.
Rounding: Adjust the corner rounding of the category display items.
Product Count: Enable or disable showing the product count in the category display.
Title Typography: Set typography styles for category titles.
Layout: Choose the layout style (e.g., Grid).
Columns: Set the number of columns for display.
Grid Items with Different Sizes: Option to vary item sizes within the grid.
Products (grid or carousel)
General
Title:
This allows you to define a title for the tab. This title will typically be displayed as the name of the tab on the frontend.
Product Source:
Data Source: You can select the product data source, such as all products or specific collections or categories. This lets you target specific product groups for the tab.
Categories or Tags: This field allows you to narrow down the selection by filtering products by category or tags.
Layout:
Grid: Displays products in a traditional grid layout.
List: Displays products in a list format, one item per row.
Carousel: Allows products to be displayed in a carousel, which lets users scroll horizontally through products.
Columns:
Set the number of columns for the grid or carousel. Different values can be specified for different device types (e.g., desktop, tablet, mobile) for responsive design.
Masonry Grid:
Inherit / Enable / Disable: When enabled, products will appear in a masonry grid layout, which arranges items of varying sizes in an aesthetically pleasing way, filling gaps in the grid layout.
Product Grid with Different Sizes:
This option allows for products to be displayed in varying sizes within the grid, adding visual interest.
Space Between Products:
Controls the amount of space (padding or margin) between individual products. The “Inherit from Theme Settings” option allows the layout to follow the theme’s default spacing.
Items per Page:
Set the number of products displayed per page in the tab. This affects the total number of items a user can see at once.
Pagination Type:
Choose a pagination style (such as numbered pagination, infinite scroll, or a “Load More” button) to let users navigate through additional products.
Design
These settings customize the visual presentation of the products within the tab.
Product Hover Options:
Hover Effects: Different hover styles can be selected, such as revealing options (e.g., "Select Options" or "Quick View") or adding animations when the user hovers over a product image.
Image Size:
Allows you to specify the dimensions of the product images within the tab.
Stock Progress Bar:
If enabled, a progress bar shows how much stock remains, which can be a useful visual cue for limited-stock items.
Sale Countdown:
If enabled, displays a countdown for sale items, indicating how much time is left before the sale ends. This is useful for time-sensitive promotions.
Product Color Scheme:
Allows you to set a color scheme specifically for products displayed in the tab.
Additional Style Options:
Bordered Grid: Adds a border around each product in the grid.
Products Background: Allows you to add a background color or style to each product.
Products Shadow: Enables shadow effects, adding depth to product images.
ProductInherit / Enable / Disable: You can enable or disable a product gallery view within the tab, allowing users to see multiple images per product.
Quantity Input on Product: Controls the display of a quantity input field, so users can select the number of units they want directly from the tab interface.
Data Settings
This section is focused on controlling what products are displayed within the tab and how they’re sorted.
Product Source:
Data Source: You can select the product data source, such as all products or specific collections or categories. This lets you target specific product groups for the tab.
Categories or Tags: This field allows you to narrow down the selection by filtering products by category or tags.
Sorting and Query Options:
Order By: Choose the attribute by which products should be sorted (e.g., price, popularity, or date).
Offset: Skip a specified number of products from the beginning of the list. This is useful for advanced layouts where you may want to exclude some items.
Sorting: Choose between ascending or descending order. The “Inherit” option allows it to follow a default sorting setting, likely defined elsewhere in the theme settings.
Query Type (OR / AND): If you are using multiple filters, you can decide whether to use OR (show products that match any filter) or AND (show products that match all filters).
Exclude: This allows you to exclude specific products by name or ID.
Hide Out of Stock Products: If enabled, out-of-stock products will not be displayed within the tab.
WC Products Widget
The "WC products widget" provides configuration options for displaying products in a widget format on your site.
Title Section:
Widget title: Allows you to set a title for the widget, which will appear at the top of the product list.
Data Settings:
Number of products to show: You can specify the number of products displayed within the widget using a slider or by entering a value.
Show: This option lets you filter products displayed in the widget by selecting criteria such as “All Products,” “Featured,” or “On Sale.”
Order by: Defines how products are sorted, based on criteria like "Date," "Price," "Popularity," etc.
Order: Sets the sorting direction for the products, either ascending (ASC) or descending (DESC).
Categories:
Categories: Lets you specify product categories to limit which products are shown in the widget.
Image size: Allows you to set a custom size for product images displayed within the widget.
Extra Options:
Hide free products: An option to exclude products with a price of $0 from the display.