Using Elementor Widgets

Making a successful online store needs two things: a great look and the right tools. If you use Elementor to build your website, FluentCart gives you a set of built-in tools (widgets) that fit perfectly with your designs.

With these tools, you can simply drag and drop things like product lists, checkout forms, and buy now buttons anywhere on your site. You get full control over the design without needing to write any code.

Turn on the Elementor Widgets

FluentCart starts with only the basics to keep your site fast. To use the Elementor tools, you need to turn them on first.

1. Go to Settings: In your WordPress dashboard, go to FluentCart > Settings.
2. Open Features & Addons: Click the Features & addon tab on the left.
3. Find Plugin Addons: Scroll to the bottom of the page to find the Plugin Addons section.
4. Turn it On: Find the Elementor Blocks card and click Install & Activate.

Now, you will see a new "FluentCart" section in your Elementor editor.

How to Find Your Widgets in the Editor

When you are editing a page with Elementor:

1. Open the Elements panel (click the grid icon in the top left).
2. Type "FluentCart" in the search bar, or scroll down until you find the FluentCart section.

You will see all the widgets listed below. Here is a fast look at all the FluentCart tools you can use in Elementor:

• Products
• Product Carousel
• Mini Cart
• Buy Now Button
• Add to Cart Button
• Product Categories List
• Checkout

1. Products Widget

This is the main tool for building your shop pages. It displays your inventory in a professional grid or list layout.

• Content Tab: Here you control the data and layout.
  • General Settings: Choose between Grid or List view, set how many products show per page, and pick a pagination style (like Infinite Scroll, Load More button, or standard Numbers).
  • Filter Settings: You can enable a sidebar filter to let customers sort products by category or price.
  • Shop Layout: Adjust grid columns and the order products appear in.
  • Product Card Layout: You can customize your product from here.
• Style Tab: Here you change the look. You can customize the typography, change the color of product titles and prices, and adjust the spacing between grid items.
• Advanced Tab: Standard Elementor settings to adjust margins, padding, and mobile responsiveness.

2. Product Carousel

Use this to grab attention on your homepage. It creates a sliding row of products that is perfect for "Best Sellers" or "New Arrivals."

• Content Tab: Control how the slider behaves.
  • Products: Select your products from here.
  • Carousel Settings: Set how many slides appear at once, enable Autoplay so it moves automatically, set the speed, and toggle Infinite Loop. Also, you can choose to show arrows or dots so users can swipe through products manually.
  • Card Layout: From here customize the product card layout.
• Style Tab: You can change the size and color of the arrows and pagination dots to match your website's theme.
• Advanced Tab: Use this to add entrance animations or hide the slider on mobile devices if needed.

3. Mini Cart

A compact icon usually placed in your website's header. It lets customers check their cart total without leaving the page.

• Style Tab: Customize the look under Cart Icon Style.
  • States: Style both Normal and Hover states independently.
  • Typography & Colors: Full control over Typography, Text Color, and Icon Color.
  • Container Styling: Set a Background Type (Classic or Gradient), define a Border Type, adjust Border Radius for rounded corners, and add a Box Shadow.
• Advanced Tab: Adjust the positioning (Margins/Padding) to align it perfectly with your other header elements.

4. Buy Now Button

A powerful shortcut for landing pages. This button skips the cart page and takes the customer straight to payment.

• Content Tab: Set up the link and behavior.
  • Select Product Variation: Search for and select the specific Product Variation (e.g., "Teal Green") you want to link to this button.
  • Button Text: Enter the custom text you want displayed on the button (e.g., "Buy Now").
  • Enable Modal Checkout: Toggle this to Yes to open the checkout form in a popup window on the same page. If No, the button will redirect the user to the standard checkout page.
• Style Tab: Style the button to look clickable. Change the background color, text color, typography, border radius, and add hover effects.
• Advanced Tab: Add margin or padding to position the button perfectly in your layout.

5. Add to Cart Button

Similar to the Buy Now button, but it adds the item to the cart so the customer can keep shopping.

6. Product Categories List

Helps users navigate your store by showing a list of your different departments.

• Content Tab: Configure the display settings.
  • Display Style: Choose between a standard List or a space-saving Dropdown.
  • Show Product Count: Toggle this to display the number of products available in each category.
  • Show Hierarchy: Toggle this to display child categories nested underneath their parent categories.
  • Show Empty Categories: Toggle this to display categories even if they currently contain no products.
• Style Tab: Adjust the list spacing, link colors, and typography for the category names.
• Advanced Tab: Standard positioning options.

7. Checkout Widget

This widget lets you place the checkout form on any page, giving you full design control over your sales funnel.

• Content Tab: Structure the form.
  • General Settings:
    • Layout: Choose between a One Column layout (great for focused landing pages) or a Two Column layout (standard for desktops).
    • Use Default FluentCart Styles: Toggle this to Yes for a quick, clean look matching the plugin, or No to unlock full customization options in the Style tab.
  • Form Fields: Customize the settings for input fields within the checkout form.
  • Order Summary: Manage the display settings for the product summary and totals section.
  • Layout Options: Fine-tune the spacing and structure of the checkout container.
• Style Tab: (Available if "Use Default FluentCart Styles" is set to No) This gives you granular control over the form fields, labels, buttons, and order summary box colors.
• Advanced Tab: Adjust the width, spacing, and mobile responsiveness of the checkout section.