Using Gutenberg Blocks

FluentCart provides a powerful set of dedicated blocks for the WordPress block editor (Gutenberg), allowing you to build and customize your e-commerce pages with ease. Instead of being limited to predefined layouts, you can use these blocks to create a fully custom shop page, display specific products, and add e-commerce functionalities anywhere on your site.

This guide will walk you through the different methods you can use to design your shop, product, and checkout pages.

Building with FluentCart Blocks

The easiest and most flexible way to build your store is with FluentCart's dedicated blocks. These act like building bricks, allowing you to add e-commerce features to any page or post in the WordPress editor.

Accessing FluentCart Blocks

1. From your WordPress dashboard, open any page or post.
2. Click the plus icon (+) to open the block inserter.
3. Scroll down to find the FluentCart and FluentCart Buttons categories, or simply search for the block you need.

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

• Products
• Product Title
• Product Carousel
• Product Search
• Product Card
• Product Image
• Product Info
• Price Range
• Customer Dashboard
• Mini Cart
• Buy Now Button
• Add to Cart Button
• Buy Scetion
• Product Categories List
• Checkout
• Excerpt

1. Products

This is the main tool for building your shop pages using the WordPress block editor. It displays your inventory in a professional grid layout.

• Paginator: Choose your pagination style, such as Scroll (for infinite loading) or Numbers (for standard pages). You can also use the slider to set how many products show up per page.
• Product Grid Options: Set the View Mode to Grid and pick a Price Format, such as "Starts From" for products with multiple prices. You can also adjust the Product Per Row to decide how many items sit side-by-side.
• Filter Option: You can toggle Enable Filter to let customers sort products easily. You can also turn on Default Filter to manage the starting order of your items.
• Additional CSS Class(es): Enter custom code here if you want to add unique styling to the product block.

2. Product Title

This block displays the name of your product, pulling data automatically to keep your page accurate. It is a standalone tool, allowing you to place and style the title independently in your custom designs. Here you control how your product name behaves in the editor.

• Settings: Toggle Make title a link if you want customers to be able to click the product name to visit its specific page. You can also enable Open in new tab so customers don't lose the page they are currently browsing.
• Typography & Alignment: Use the block toolbar or sidebar to change the text alignment, adjust the font size, and pick a color that matches your brand.
• Additional CSS Class(es): Enter custom code here if you want to add unique styling or specific font effects to the product title.

3. Product Search

The Product Search block helps customers quickly find specific items in your store. Instead of browsing through many products, users can simply type what they’re looking for and get instant results.

You can add this block from the editor by selecting the magnifying glass icon under the FluentCart section.

Block Settings: When you click on the search bar in your editor, the right-hand sidebar gives you several options to control how the search behaves:

• Searchbar Behavior: Choose whether search results open in a New Tab or the Current Tab.

• Category Filtering: Enable this option to allow customers to filter their search by product categories.

• Link With Shop App: Turn this on to connect the search bar with your Shop App settings for a more integrated experience.

• Advanced Settings: Standard block options for layout and design customization.

• Additional CSS Class(es): Add custom CSS classes if you want to modify the search bar’s style, such as colors, borders, or width.

  

4. Product Carousel

The Product Carousel block is a dynamic tool for highlighting your best-selling or newest items in an interactive, sliding row. It is perfect for homepages or landing pages where you want to showcase multiple products in a limited space without overwhelming your shoppers.

• Product Selection: Click the Select Product button to search for and pick the specific items you want to feature. You can easily manage your choices under the Selected products list.

• Layout: Use the Slides per view slider to decide exactly how many products sit side-by-side on the screen at one time (for example, setting it to 4).

• Behavior: This section gives you full control over the movement. You can toggle Autoplay for automatic sliding, enable an Infinite loop for continuous scrolling, and choose to Show arrows or Show Pagination (using styles like Fraction or Dots) to help customers navigate through your items.

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, like specialized borders or shadow effects, to the carousel container.

Tip: Use the Product Carousel block at the top of your homepage to highlight your best-selling items with high-quality imagery to grab attention immediately.

5. Customer Dashboard

This block is the "home base" for your customers. It acts as a personalized portal where they can manage every part of their relationship with your store, from viewing past orders to updating their own addresses.

Settings: Here you can place the dashboard on any page to give your users instant access to their account.

Layout: In the editor, you will see the dashboard organized with a clean sidebar menu that helps customers navigate between different sections like their Purchase History, Licenses, and Downloads.

Setup Tip: For this block to work correctly, you must ensure you have assigned the Customer Dashboard page under FluentCart Pro > Settings > Pages Setup.

Key Sections Your Customers Will See:

• Purchase History: A complete list of all past orders including unique identifiers like #INV-6, the date of purchase, and the current status (such as "Completed" or "Processing").

• Subscription Plans: A dedicated area where customers can view their active or canceled recurring plans and check upcoming renewal dates.

• Managing Licenses: Perfect for digital products, this section lets users see their license keys and how many sites they are currently using them on.

• Downloads: A central place for customers to find every digital file they have bought, such as e-books or software updates.

• Profile & Address Settings: This allows shoppers to keep their contact information and shipping addresses up-to-date without needing to contact your support team.

• Additional CSS Class(es): Use this section to add custom code if you want to change the colors or spacing of the dashboard to match your theme perfectly.

6. Product Card

If you want to highlight one specific item on a special page—like a "Deal of the Day"—the Product Card block is the perfect tool. It puts a single product into a beautiful, standalone card that includes the featured image, price, and an "Add to Cart" button all in one neat package.

You can find this block in the FluentCart section of your editor, represented by a small card icon.

Block Settings: Here you can control exactly which product shows up and how the card is sized.

• Product Selection: Use the Product dropdown to search for and pick the specific item you want to feature.

• Query type: This determines how the block pulls information; leaving it on Default is usually best for a single card.

• Price Format: You can set the price to show as "Starts From," which is very helpful if the product has different versions with different prices.

• Card Sizing: You can fully control the size by choosing Custom Width and using the slider to make the card wider or narrower to fit your layout (e.g., setting it to 216 pixels).

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, like special shadows or borders, to your product card.

7. Product Image

This block allows you to showcase the visual identity of your products anywhere on your site. It renders the featured image of a specific product, making it an essential tool for building custom landing pages or highlighted product sections.

Settings: Here you can control which product visual appears in the block.

• Query type: Choose how the block identifies which image to display, such as using a Custom selection to pick a specific item.

• Select Product: Click this button to open a search and select the exact product whose image you want to feature.

• Product Title: This area displays the name of the product you have currently selected (e.g., "Perfume") so you can easily verify you've picked the right one.

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, like custom borders, shadows, or hover effects to your product image.

8. Product Info

This block is used to display essential details about your product—such as the title, description, and price—in a clean and organized way. It acts as a central hub for pulling product data directly into your custom layouts or landing pages.

Here you control which product's information the block displays.

• Query type: This setting allows you to choose how the block identifies the product. Setting it to Default will automatically pull data from the product page it is placed on, while choosing Custom allows you to manually search for and select a specific item from your catalog.

• Select Product: If you choose a custom query, you can use the selection button in the editor to pick the exact product you want to showcase.

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, such as custom borders or specific text colors, to the product information container.

9. Price Range

This block is designed to showcase the cost of your products with automatic currency formatting. It is especially useful for variable products, as it can dynamically display the full price range (e.g., $5.00 - $8.00) to give customers a clear idea of the cost options.

• Query type: This setting determines which product's price is displayed. Using the Default setting will automatically pull the price from the product page it is placed on, while choosing Custom allows you to manually select a specific product from your inventory.

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, such as specific font weights, colors, or spacing, to the price display.

10. Mini Cart

This block is a compact cart widget designed to let shoppers quickly view their cart items. It allows customers to see their item count and total price at a glance without needing to leave the page they are currently browsing.

Block Settings: Here you control the icon style and what information is displayed to the user.

• Cart Icon: Choose from three default shopping icons or provide a Custom Icon URL (SVG) to match your store’s unique branding.
• Display Options: Toggle the Display total price switch to show or hide the current value of the cart next to the icon.
• Show Cart Item Count: Define when the item counter bubble appears. You can set it to display Always, Only if cart has items, or Never.
• Style Settings: Switch to the style tab (half-moon icon) to customize the visual look.
  • Color: You have granular control to set individual colors for the Icon, the Price, and the Product Count.
  • Typography: Adjust the Font Size (Small to Extra Large) and Line Height to ensure the text fits perfectly with your header's design.
  • Dimensions: Use the Padding and Margin sliders to adjust the spacing around the mini cart for perfect alignment.

Advanced: Standard block settings to help with your custom page design.

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, such as specialized hover animations or custom border effects.

11. Buy Now Button

The Buy Now button is a powerful shortcut designed for landing pages to trigger an immediate purchase action. Instead of sending customers through the standard cart process, this block can be configured to take them directly to checkout or open a payment window on the same page.

Product Settings: Here you control the behavior and target of the button.

• Enable Instant Modal Checkout: Toggle this on to open the checkout form in a popup modal instead of navigating the customer to a different page.

• Product Selection: You can search for and select a specific product variation (e.g., "Teal Green") that this button will automatically assign to the customer's order.

• Style Settings: Switch to the style tab (half-moon icon) to customize the button's appearance.

  • Color: You have full control over the Text and Background colors of the button.
  • Typography: Adjust the Font Size (from Small to Extra Large) and Line Height to ensure your call-to-action is clear and readable.
  • Dimensions: Use the Padding and Margin sliders to adjust the size of the button and its spacing within your layout.

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, such as custom hover animations or specialized border effects.

12. Add to Cart Button

The Add to Cart button is a standalone tool that allows customers to add a specific product or variation to their cart while remaining on the same page. This is ideal for custom landing pages where you want to encourage multi-item shopping.

Settings: Use the settings tab (gear icon) to define which item the button targets.

• Product Selection: Click the Select Product button to search for and assign a specific product variation to this button.

• Style Settings: Switch to the style tab (half-moon icon) to customize the button's appearance.

  • Color: You can manually set the Text and Background colors to match your brand's palette.
  • Typography: Control the Font Size (ranging from Small to Extra Large) and Line Height to ensure your call-to-action is prominent.
  • Dimensions: Use the Padding and Margin sliders to adjust the button's internal spacing and its external position within your design.
  • Border & Shadow: Add depth to your button by configuring border styles or shadow effects.

• Additional CSS Class(es): Enter custom code here if you want to apply unique CSS styling, such as custom hover states or specialized animations.

13. Buy Section

This block acts as the functional hub of your product page. It brings together all the essential purchase elements—like price, quantity, and action buttons—into one convenient area for your customers.

Settings: You can control how the block identifies which product to display.

• Query type: Set this to Default to automatically pull details from the current product page, or choose Custom to manually select a specific item from your inventory.

• Included Elements: The block automatically renders the product price, a Quantity selector (with plus and minus buttons), and both Buy Now and Add To Cart buttons to provide a complete shopping experience.

• Additional CSS Class(es): Enter custom code here if you want to apply unique styling or specialized layout adjustments to the entire buy section container.

14. Checkout Page

This is the essential block that renders the secure checkout form for completing purchases. It provides a comprehensive, professional layout where customers enter their details and review their items before finalizing their order.

• Customer Information: Includes standard fields for Name and Email, plus a toggle for customers to Create an Account? while they check out.

• Address Sections: Provides organized areas for Billing Address and Shipping Address, complete with fields for street names, apartment details, and phone numbers.

• Order Summary Sidebar: Displays a clear breakdown of the purchase, including product variations, subtotals, shipping costs, and tax estimates.

• Coupons & Terms: Features a Have a Coupon? section for applying manual discounts and a checkbox at the bottom for customers to agree to your terms and conditions.

• Additional CSS Class(es): Enter custom code here if you want to apply unique styling to the checkout form, such as custom borders or specific background colors for the form fields.

15. Product Categories List

The Product Categories List block helps your customers navigate your store by displaying an organized directory of your different product departments. This is a great way to improve your site's browsing experience and help shoppers find related items quickly.

Block Settings: Use the settings tab (gear icon) to configure how the list is structured.

• Display Style: Choose between a standard List format or a space-saving Dropdown menu.

• Show product count: Toggle this on to display the number of available products next to each category name (e.g., "Menswear (10)").

• Show hierarchy: When enabled, this will display child categories nested underneath their respective parent categories for better organization.

• Show empty categories: You can choose whether to hide or display categories that do not currently contain any products.

• Style Settings: Switch to the style tab (half-moon icon) to customize the visual appearance of the list.

  • Color: You have separate controls to set the color for the Text and the clickable Links.
  • Typography: Adjust the Font Size (ranging from Small to Extra Large) and the Line Height to ensure the list matches your website's design.

• Additional CSS Class(es): Enter custom code here if you want to add unique styling, such as custom bullet points or specialized hover effects for the category links.

16. Excerpt

The Excerpt block is designed to display a brief summary or snippet of your product's description. It is an ideal tool for building custom shop layouts or landing pages where you want to provide a quick preview of an item without including the full description text.

Here, you can easily control the data source for the snippet.

• Product Selection: Use the Product dropdown in the settings panel to search for and pick the specific item whose summary you want to feature.

• Style Tab: Here you change the visual look to match your website's design.

  • Color: You have granular control to set individual colors for both the Text and the Background.
  • Typography: Adjust the Font Size (ranging from Small to Extra Large) and the Line Height to ensure the text snippet is clear and readable.
  • Dimensions: Use the Margin slider to adjust the external spacing around the excerpt for perfect placement within your layout.

• Additional CSS Class(es): Enter custom code here if you want to apply unique styling, such as specific font weights or text effects, to the product excerpt.

Note: Each FluentCart block comes with its own customization settings. After adding a block, check the settings panel on the right to adjust design, alignment, behavior, and visibility.