The Product Showcase V2 widget is a highly customizable WooCommerce tool designed to display your product catalog in either a structured grid or a dynamic slider. This version provides enhanced control over decorative elements like badges and functional icons, ensuring your shop items are both informative and visually engaging.

Layout Settings #

The Layout Settings define the primary structural behavior and visibility of information on your product cards.

Layout: Choose the primary display mode for your products:

• Grid View: Displays products in a standard, multi-column format.
• Slider View: Transforms the product list into a scrollable carousel.

• Columns: Select the number of products to appear per row (e.g., 4 Columns). This setting can be adjusted independently for Desktop, Tablet, and Mobile devices.
• Content Alignment: Set the alignment of text and buttons within the product box to Left, Center, or Right.
• Space Between Item: Use the slider to adjust the pixel gap between individual product cards (currently set to 20px).

Toggle Elements: Easily show or hide the following components:

• Sale Badge: Displays a badge on items with a discounted price (currently Show).
• Review (Rating Badge): Shows the star rating for the product (currently Show).
• Categories: Displays the category name above or below the product title (currently Show).
• Short Description: Includes a brief summary of the product (currently Hide).
• Wishlist: Enables the heart icon for customers to save items (currently Show).
• Quick View: Enables the eye icon to preview product details in a popup (currently Show).

Content Tab: Slider Settings #

These settings become visible only when the Slider View is selected in the Layout dropdown.

• Slides Per View: Number of products visible at once (default 4).
• Space Between: Gap between product slides (default 20px).
• Autoplay: Enables automatic sliding.
• Transition Speed (ms): Animation duration (default 500ms).
• Delay (ms): Time between slides (default 3000ms).
• Disable on Interaction: If Yes, autoplay stops permanently after a manual click.
• Pause on Hover: Stops sliding when the mouse is over the widget.
• Reverse Direction: Changes slide movement from right-to-left to left-to-right.
• Wait for Transition: Timer waits for the animation to finish before counting down.
• Navigation Arrows: Toggles the visibility of manual control arrows.
• Infinite Loop: Creates a continuous loop from the last slide back to the first.

Content Tab: Query Settings #

The Query Settings section allows you to define exactly which products are pulled from your store to be displayed in the showcase.

• Source: Choose the criteria for the product selection, such as Latest Products.
• Filter by Categories: Use the + icon to select specific categories; only products belonging to these categories will be shown.
• Products Per Page: Set the total number of items to display in the widget (default is 8).
• Order By: Select the sorting logic, such as Date (Newest First).
• Order: Choose between Descending or Ascending for the final sort sequence.

Style Tab: Card Container #

• Background: Set the base color for the product card.
• Border Type: Choose from various border styles (e.g., Solid, Double).
• Border Radius: Control the corner roundness for the entire card (currently set to 20px for all corners).
• Box Shadow: Apply a shadow effect to create depth behind each product card.

Style Tab: Media #

The Media section allows you to customize the container and visual properties of the product image to ensure a professional and uniform layout.

• Media Padding: Adjust the internal spacing around the product image. In the current configuration, it is set to 14px for all sides (Top, Right, Bottom, Left).
• Media Background: Set a specific background color for the image area, which is useful for highlighting products with transparent backgrounds.
• Border Type: Define the stroke style around the media container, such as Solid, None, or Double.
• Border Width: Control the thickness of the border. Current settings show a 1px width applied only to the Bottom to create a subtle separator.
• Border Color: Choose the color of the border lines to match your branding.
• Image Radius: Define the corner roundness specifically for the product image. It is currently set to a uniform 20px for all four corners.

Style Tab: Badges (Sale/Rating) #

The Badges section provides granular control over the visual indicators for discounts and customer reviews. You can customize the colors for both the badge containers and their contents to ensure they stand out against your product images.

• Sale Badge BG: Set the background color for the sale indicator to highlight discounted items.
• Sale Badge Text: Choose the color of the text displayed within the sale badge for maximum readability.
• Rating Badge BG: Define the background color for the customer rating area.
• Rating Badge Text: Adjust the color of the numerical or descriptive text within the rating badge.
• Star Color: Specifically control the color of the star icons to match your site’s review aesthetic.

Action Button Style #

This subsection controls the appearance of secondary functional icons (such as Wishlist or Quick View) that appear on the product card.

Normal & Hover Tabs: You can set distinct styles for the buttons in their static state and when a user hovers over them.

• Background Color: Define the fill color for the action button icons.
• Icon Color: Choose the specific color for the icon glyphs themselves.

Style Tab: Add to Cart Button #

The Add to Cart Button section allows for complete visual customization of the primary call-to-action on your product cards.

• Typography: Click the pencil icon to adjust the font family, size, weight, and style of the button text.
• Inset (Left/Right/Bottom): Control the button’s positioning or internal margins. Current settings show 30px applied to the Right, Bottom, and Left.
• Button Radius: Use the slider or input field to define the corner roundness. It is currently set to 200px to create a fully pill-shaped button.

State Tabs (Normal & Hover): Switch between these tabs to define different styles for the button’s static state and when a user interacts with it.

• Background: Select the fill color for the button.
• Text Color: Choose the color for the “Add to Cart” label.

• Transition Duration: Set the speed of the color change animation when hovering (currently set to 0.25s).

Style Tab: Body #

Padding: Define the internal spacing between the product information and the card borders.

Style Tab: Categories #

The Categories section allows you to customize the appearance of the product category labels displayed on the product cards.

• Category Gap: Adjust the vertical spacing between the category label and surrounding elements (currently set to 10px).
• Category BG: Select a background color specifically for the category label container.
• Category Text: Choose the color for the category text to ensure it is legible against its background.
• Typography: Click the pencil icon to define the font family, size, weight, and style for category labels.
• Category Radius: Control the corner roundness of the category background. It is currently set to a uniform 100px for all corners to create a pill-shaped effect.

Title Styling #

The Title section provides specific typography and spacing controls to ensure product names are prominent and legible.

• Typography: Use the pencil icon to customize the font family, size, weight, and line height for product titles.
• Color: Define the text color for the titles to match your site’s branding.
• Margin: Adjust the spacing around the title (Top, Right, Bottom, Left) to control its distance from the categories above or the price below.

Style Tab: Prices #

Active Price (Sale or Standard): This controls the appearance of the current price being charged.

• Typography: Click the pencil icon to set the font family, size, and weight for the primary price.
• Color: Select a color to make the active price stand out (currently set to Black).

Regular Price (Crossed Out): This styles the original price shown when a product is on discount.

• Typography: Customize the font for the struck-through regular price to differentiate it from the sale price.
• Color: Choose a more subtle color for the crossed-out price (currently set to a Grey tone).

Style Tab: Navigation (Swiper) #

The Navigation (Swiper) section allows you to customize the appearance and placement of the interactive controls used in the Slider View.

• Position: Choose where the navigation arrows are located relative to the product showcase:
  • Inside Box: Arrows are placed within the boundaries of the widget container.
  • Outside Box: Arrows are positioned outside the main container edges.
• State Tabs (Normal & Hover): You can define separate styles for the navigation elements for their default state and when a user hovers over them.
• Background Color: Set the fill color for the navigation arrow containers.
• Icon Color: Choose the specific color for the arrow icons themselves.
• Box Shadow: Click the pencil icon to add a shadow effect to the navigation buttons, providing depth and better visibility.