Style ◑

Header Box Styles

The Header Box Styles panel provides the layout and aesthetic controls for the container housing your component’s title and introduction. By customizing these settings, you can create a distinct visual separation between the header content and the main body, ensuring a structured and professional appearance for any section of your site.

• Padding: Adjust the internal breathing room around your heading text. Increasing padding creates a more prominent, “framed” look for the header area.
• Margin Top & Bottom: Control the external vertical spacing. Use Margin Top to separate the header from the elements above it, and Margin Bottom to define the distance between the header and the main content below.
• Border: Define a stroke style, width, and color to outline the header container. This is a great way to add structural definition or a subtle decorative touch.
• 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.
• Color:
  • Background Color: Set the fill color for the header container. Applying a subtle background color can help the title stand out as a clear visual anchor for the section.

Heading Styles

The Heading Styles panel provides dedicated controls to customize the visual character of your component’s main title. These settings allow you to go beyond standard typography, turning your heading into a stylized design element that captures the user’s attention.

• 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.
• Border: Apply a stroke style, width, and color around the heading. This can be used to underline, frame, or fully encase the title for added emphasis.
• Border Radius: Define the curvature of the heading’s corners. This works in tandem with the background or border to create a sleek, modern look.
• Clip-path: Enter a custom CSS clip-path value (such as polygon(50% 0, 100% 50%, 50% 100%, 0 50%) or circle(40%)) to create unique, non-rectangular shapes for the heading’s background. This allows for creative, high-end design layouts like slanted or notched headers.
• Color:
  • Text Color: Set the primary color for the heading typography to ensure it is legible and brand-consistent.
  • Background Color: Apply a fill color specifically to the heading area, which can be used to create a “badge” or “highlight” effect behind the title.

Sub Heading Style

The Sub Heading Styles Panel allows you to refine the secondary text or links within your header. This is particularly useful for styling “View All” links or descriptive taglines, providing a clear visual hierarchy and interactive feedback for users.

• Padding: Adjust the internal space around the sub-heading text. This is essential if you are styling the sub-heading as a button or badge to ensure the text has balanced breathing room.
• Border: Define the stroke style and width. A subtle border can help transform a simple text link into a sophisticated call-to-action.
• Border Radius: Control the roundness of the corners. Use a high value to create a pill-shaped button or 0px for a classic rectangular look.Vertical & Horizontal Positioning: Use these granular offsets to “pin” the badge to specific areas of the product image. You can tuck it into the top-right corner or center it along the bottom edge for a unique look.
• 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
  • Text (Default/Hover): Set the base color for your text and define a hover color to provide immediate visual feedback when a user interacts with the link.
  • 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 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 Style

The Product Styles panel provides precise control over the presentation of the product imagery and typography. These settings allow you to standardize how your catalog appears, ensuring a uniform and professional look regardless of varying image sizes or title lengths.

• Product Image:
  • Width & Height: Define the specific dimensions for the product images. Setting a fixed height is a great way to maintain a consistent “row” look across your entire layout.
  • Radius: Control the corner roundness of the product image itself. This can be used to create soft, circular, or pill-shaped thumbnails.
  • Object Fit (Cover/Contain): Use this toggle to decide how the image fills its container. Cover ensures the image fills the entire area (cropping if necessary), while Contain shows the full image without cropping, which is ideal for products where every detail matters.
  • Object Position: Adjust the focal point of the image within the frame. If an image is cropped, you can choose to pin the focus to the Top, Center, Bottom, Left, or Right to ensure the most important part of the product is always visible.
  • Margin Top & Bottom: Control the external vertical spacing around the image. This helps define the distance between the photo and the surrounding elements like the “Sale” badge or product title.
  • Image Hover Effect: When active, the image will subtly zoom in when a user hovers over the card. This adds a layer of dynamic polish and draws the shopper’s eye toward the product details.
• Product Title / Content Typography:
  • Margin Top & Bottom: Control the vertical breathing room for your product titles and descriptions. This allows you to create a clear hierarchy and prevent the text content from feeling crowded.
  • 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.

Product Style

The Product Styles panel provides precise control over the presentation of the product imagery and typography. These settings allow you to standardize how your catalog appears, ensuring a uniform and professional look regardless of varying image sizes or title lengths.

• Width & Height: Define the specific dimensions for your images. Standardizing these values ensures your grid remains perfectly aligned.
• Radius: Control the corner roundness of the image. Use a higher value for a soft, modern look or 0px for sharp edges.
• Object Fit (Cover/Contain): 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.
• Colors
  • Image Overlay: Set a color layer that appears over the product image, which is especially useful for improving the legibility of text or icons placed on top.
  • Product Title (Default/Hover): Choose the primary color for your titles and a secondary color for when a user interacts with the link.
  • Product Price: Set a distinct color for the price to make it stand out as a key piece of information.
  • Product Summary: Define the color for the short description to maintain a balanced visual weight against the title.

Sale Badge Style

The Sale Badge Style panel allows you to customize the visual indicators that highlight discounted products. These badges are essential for grabbing the shopper’s attention and communicating value at a glance.

• Padding: Control the internal space within the badge. Adjust this to give your percentage or text more breathing room.
• Border & Border Radius: Define an outline style and corner curvature. Use a high Border Radius for a circular or pill-shaped badge, or 0px for a classic rectangular sticker.
• Content Type: Choose what information is displayed.
  • Default: Displays a standard “Sale” text.
  • Percentage: Automatically calculates and shows the discount percentage (e.g., -20%).
  • Amount: Displays the specific currency amount saved (e.g., Save $10).
• Label Before/After: Add custom prefix or suffix text to your discount values, such as “Up to” or “Off.”
• 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.
• 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.

• 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 Category Style

The Product Category Styles panel allows you to customize the labels that identify which collection a product belongs to. These settings help you style category links as subtle text or prominent buttons, improving both site navigation and visual organization.

• Gap: If a product belongs to multiple categories, this setting controls the space between each individual category tag.
• 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.
• 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: Customize the appearance across three distinct interaction states (Default, Hover, and Active)
  • Text (Default/Hover): Set the base color for your category labels and define a hover color to provide clear visual feedback when a user interacts with the link.
  • Background (Default/Hover): Apply a fill color behind the category text. Switching the background color on hover creates a dynamic, interactive feel.
  • Border Hover: Specifically change the outline color during a hover event to further emphasize the link.

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.