Style ◑

Tab Styles

The Tab Styles panel controls the aesthetics and interactive feel of the navigation bar. These settings allow you to transform simple text links into structured buttons that provide clear visual feedback as users browse through your categories.

• Padding: Adjust the internal breathing room around your heading text. Increasing padding creates a more prominent, “framed” look for the header area.
• Border Radius: Control the roundness of the box corners. Use 0px for a sharp, formal rectangle or higher values to create soft, modern curves that match your site’s design language.
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Default/Active: This toggle allows you to define separate styles for the tabs’ normal state and the state when a tab is currently selected (Active).
  • Border: Apply a stroke to the tab for each state. A common design choice is to add a distinct border to the Active tab to make the current selection “pop.”
  • Color (Text & Background): Customize the palette for both the label and the tab container. Use high-contrast colors for the Active state—such as a vibrant background or bold text—to ensure shoppers always know exactly which category they are viewing.

Tab Seperator Styles

The Tab Separator Styles panel allows you to refine the visual boundary between your navigation and the product content. These settings are ideal for creating a structured “folder” look or a clean, minimalist underline that anchors your tabs to the display area.

• Padding: Adjust the internal space between the text and the boundary of the heading’s background or border. This is essential for ensuring the text doesn’t feel cramped when using background colors.
• Margin: Manage the external distance between the tab bar and the product grid below, ensuring the layout feels balanced.
• Border: Apply a stroke to the separator. This is typically used to create a horizontal line (e.g., a Border Bottom) that spans the width of the tab container, providing a clear visual break.
• Tab Overlay: Use this feature to create a seamless, integrated look where the active tab appears to “sit” on top of the separator line.
  • Note: For the overlay effect to be visible, you must set a border-bottom style for the separator and define a background color for the active tab. This allows the active tab to visually mask a portion of the separator line.
• Border Radius: If your separator has a background color or a thick border, use this setting to soften the edges or match the curvature of your tabs for a cohesive design.
• Color:
  • Background: Set a background color for the separator container. This can be used to create a full-width bar behind your tabs to further define the navigation area.

Heading Typography

The Heading Typography panel provides granular control over the primary title of your product showcase. These settings ensure your section header is perfectly on-brand and maintains a clear visual hierarchy within your page layout.

• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Color
  • Heading: Choose a dedicated color for your title. Whether you want it to blend seamlessly with your body text or stand out with a bold brand accent, this setting ensures your heading captures the shopper’s attention.

Product Box Style

The Product Box Styles panel governs the container of the individual product card. These settings allow you to define the outer structure and interactive behavior of each item, ensuring your products are presented with consistent spacing and engaging motion.

• Padding: Adjust the internal space between the product content (image, title, price) and the edge of the box. This creates a balanced, professional frame for each item.
• Margin Top & Bottom: Control the external vertical spacing. This defines the gap between the product cards and the elements above or below the block.
• Border: Apply a stroke style and color to the product container. A subtle border can help separate products from the page background, especially on minimalist white layouts.
• Border Radius: Define the curvature of the box corners. Use a higher value for a soft, friendly look or 0px for a sharp, modern aesthetic.
• Hover Effect: When toggled on, this adds a “lift” animation to the product card. When a user mouses over the box, it translates slightly upwards, creating a sense of depth and providing clear visual feedback that the product is interactive.
• Default / Hover States: Use the toggle tabs to define different styles for the “Normal” and “Hover” states. You can shift colors, borders, or shadows to create a dynamic visual lift.
  • Box Shadow: When the Box Shadow toggle is enabled, you can add depth and dimension to your container to make it “pop” off the page:
    • Position: Choose Outline for a traditional drop shadow or Inset to make the shadow appear inside the container, creating a “pressed” effect.
    • Horizontal & Vertical: Shift the shadow’s position along the X and Y axes to simulate a specific light source.
    • Blur & Spread: Blur softens the edges of the shadow for a natural look, while Spread expands or contracts the overall surface area of the shadow.
    • Shadow Color: Select the color and transparency (opacity) of the shadow effect.
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Color
  • Background (Default/Hover): Apply a background fill to the sub-heading area. Switching the background color on hover creates a dynamic, “button-like” feel.
  • Border Hover: Change the outline color during a hover event to further emphasize the interactivity of the element.

Product Title and Price Style

The Product Title Style panel manages the typography and layout of your product names. Use Top and Bottom Spacing to perfectly position the title within the card, and define Link Default and Hover colors to provide clear interactive feedback when a shopper engages with the product.

The Product Price Style panel ensures the cost is clear and well-positioned. It features dedicated Top and Bottom Spacing to separate the price from surrounding elements, along with a Text Color setting to apply a high-contrast shade that makes your pricing immediately visible at a glance.

• Top & Bottom Spacing: Use these sliders to manage the vertical margins around both the title and the price. Adjusting the Top Spacing helps separate the text from the product image, while Bottom Spacing ensures there is a clear gap between the price and any action buttons below, preventing the layout from feeling overcrowded.
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Colors: Customize the appearance across three distinct interaction states (Default, Hover, and Active)
  • Product Title Colors: Since titles typically act as navigation, you can set a Link Default color for its standard state and a Link Hover color to provide interactive feedback when a user mouses over the product name.
  • Price Color: Choose a dedicated Text Color for the price. This is an excellent opportunity to use a bold or high-contrast color to ensure the cost is immediately visible to the customer at a glance.

Image Style

The Image Style panel provides a suite of controls for the product’s primary visual. These settings allow you to standardize how your product photography is framed and how it responds when a user interacts with it.

• Hover Effect (Toggle): Enable dynamic animations—such as a subtle zoom or a secondary image swap—that trigger when a shopper mouses over the product.
• Width & Height: Define the exact dimensions for your product images to ensure a uniform grid, even if the original source files vary in size.
• Object Fit: Use this toggle to determine how the image fills its container. Cover fills the entire area (cropping if necessary), while Contain displays the full image without cropping.
• Object Position: Adjust the focal point of the image within the frame (e.g., Top, Center, Bottom) to ensure the most important part of the product is always visible.
• Margin Top & Bottom: Fine-tune the vertical spacing above and below the image to separate it from badges or titles.
• Radius: Control the corner roundness of the image. Use a higher value for a soft, modern look or 0px for sharp edges.
• Colors
  • Overlay: Apply a tinted color layer over the image. This can be used to dim the image slightly to make text more readable or to add a branded “wash” to your photography.

Sale Badge Style

The Sale Badge Styles panel provides high-level customization for the promotional stickers that appear on discounted items. These settings allow you to communicate value clearly while ensuring the badge aligns with your store’s specific promotional branding.

• Padding: Adjust the internal spacing to control the overall size and “breathability” of the badge text.
• Position (Left/Right): Quickly anchor the badge to the left or right side of the product image.
• Vertical & Horizontal Positioning: Fine-tune the exact placement using coordinate offsets to ensure the badge doesn’t overlap critical parts of the product photo.
• Rotation: Tilt the badge to a specific angle (e.g., -45°) to create a dynamic “slanted sticker” effect.
• Border & Border Radius: Apply a stroke for a high-contrast outline, and adjust the corner roundness to create anything from sharp rectangular tags to soft, circular badges.
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Colors
  • Text & Background Color: Set the primary colors for the badge. Using high-contrast colors (like white text on a bright red or orange background) ensures the discount is the first thing a customer sees.

Util Icon Style

The Util Icon panel provides comprehensive layout and styling controls for functional icons (such as Wishlist, Quick View, or Compare). These settings allow you to define the spatial positioning, sizing, and interactive behavior of these icons to ensure they are both accessible and visually integrated.

• Show on Hover: Toggle this to only display the Utililiy Icons (Cart, Wishlist and Quick View blocks) on hover over the product box.
• Direction: Choose between a Horizontal or Vertical stack if you are displaying multiple utility icons.
• Vertical & Horizontal Align: Quickly snap the icon container to the Top, Bottom, Left, Center, or Right of its parent element.
• Vertical & Horizontal Positioning: Fine-tune the exact placement using coordinate offsets for precise “pixel-perfect” anchoring.
• Size: Control the scale of the icon itself.
• Box Width & Height: Define the dimensions of the clickable area surrounding the icon. This is essential for creating consistent touch targets for mobile users.
• Border & Border Radius: Apply an outline and define corner roundness. High radius values can transform the container into a perfect circle.
• Colors: Customize the appearance across three distinct interaction states (Default, Hover, and Active)
  • Icon: Set the color of the glyph/graphic for each state.
  • Background: Define the fill color of the icon’s container box. Changing this on hover or active states provides excellent tactile feedback.
  • Border: Specifically adjust the border color, with a dedicated option for the Active state to highlight which utility is currently engaged.

Product Rating Style

The Product Rating Styles panel allows you to customize the appearance of customer feedback within your product cards. Fine-tuning these settings ensures that your social proof—like star ratings—is prominent and fits perfectly within the vertical layout of each item.

• Padding: Adjust the internal breathing room around the category text. Adding padding is useful for creating a “badge” or “pill” effect.
• Margin Top & Bottom: Control the external vertical spacing to define the distance between the category labels and surrounding elements like the product image or title.
• Border: Apply a stroke style and width to the category container.
• Border Radius: Define the roundness of the corners. Use high values to create modern, rounded tags that match your brand’s aesthetic.
• Hover Effect: Apply subtle animations or transitions to the category tag when a user mouses over it, ensuring the navigation feels responsive and polished.
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Colors:
  • Icon: Set a dedicated color for the rating stars. Using a vibrant gold or a brand-specific accent ensures the rating is the first thing customers notice when evaluating product quality.
  • Text: Customize the color of the associated text, such as the numerical rating or review count, to ensure it remains legible against your product box background.

Cart Button Style

The Cart Button Styles panel allows you to customize the primary call-to-action for your products. These settings ensure that the “Add to Cart” button is prominent, on-brand, and provides clear visual feedback to shoppers.

• Button Label: Customize the text displayed on the button. You can use standard phrases like “Add to Cart,” “Buy Now,” or “Get it Today” to match your store’s voice.
  • This setting will be deprecated starting from plugin version 2.2.9. In newer versions, the button text will automatically sync with your global WooCommerce Add to Cart settings to ensure a consistent shopping experience across your entire store.
• Width: Define the horizontal span of the button. You can set it to a specific size or make it full-width to fill the product card.
• Padding: Adjust the internal space between the label text and the button’s edge for a balanced, clickable look.
• Margin Top & Bottom: Control the external vertical spacing to perfectly position the button relative to the price or product summary.
• Border: Apply a stroke style, width, and color to the button’s outline.
• Border Radius: Control the curvature of the button corners. Use a high value for a pill-shaped button or 0px for a sharp, formal rectangle.
• Typography
  • Font Family & Size: Select the typeface and scale that best matches your site’s design system.
  • Font Weight: Control the thickness (e.g., Bold for emphasis or Light for a modern look).
  • Letter Case: Force the labels to Uppercase, Lowercase, or Capitalize without editing the form code.
  • Decoration: Apply styles like Underline or Line-through if needed for specific design cues.
  • Line Height & Letter Spacing: Fine-tune the vertical breathing room and horizontal character density.
• Colors:
  • Text (Default/Hover): Set the color of the label for both its static and interactive states.
  • Background (Default/Hover): Choose the button’s fill color. Using a distinct hover color provides essential tactile feedback when a user is about to click.
  • Border Hover: Specifically change the outline color during a hover event to further emphasize the link.

Pagination Styles

The Pagination Style panel provides design controls for the navigation elements found within the Quick View modal. These controls specifically manage how users cycle through multiple pages of customer reviews, ensuring that even on a pop-up preview, the browsing experience remains smooth and visually consistent.

• Vertical Positioning: Fine-tune the vertical offset to control how far the pagination sits below the carousel content.
• Gap: Adjust the specific spacing between each individual pagination dot to ensure they are distinct and easy to click.
• Align: Set the horizontal placement of the indicators. Toggle between Left, Center, or Right to balance the layout against your team member cards.
• Default / Active (Toggle)
  • Default:
    • Width & Height: Define the base size of the inactive indicators.
    • Border Radius: Control the shape, from sharp squares to perfect circles.
  • Active:
    • Width & Height: Increase these values to make the active slide indicator physically larger or longer (e.g., a “pill” shape) for better visibility.
    • Border & Border Offset: Add an outline to the active dot and use the offset to create a “halo” effect (spacing between the dot and its border).
    • Border Radius: Independently adjust the curvature of the active indicator.
• Color:
  • Default: The color of inactive indicators.
  • Default Hover: The color shift when a user moves their cursor over an inactive dot.
  • Active: The primary color for the dot representing the current slide.
  • Active Default: The color of the active dot when hovered.
  • Active Border: The specific color of the stroke surrounding the active indicator.