Last active
January 21, 2026 06:25
-
-
Save ababir31/acbd985f72d3ec968ac090c1a0e4bb0a to your computer and use it in GitHub Desktop.
FluentCart Product Card Style #1 - Minimal
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ===== CONTAINER SPACING ===== */ | |
| /* Controls gap between product cards */ | |
| .fct-products-container { | |
| gap: 32px !important; /* CUSTOMIZABLE: Adjust spacing between cards (16px, 24px, 32px, etc.) */ | |
| } | |
| /* ===== PRODUCT CARD BASE STYLES ===== */ | |
| /* Removes default borders and backgrounds for clean look */ | |
| .fct-product-card { | |
| border-radius: 0px !important; | |
| border-width: 0px !important; | |
| border-style: none !important; | |
| border-color: transparent !important; | |
| background-color: transparent !important; | |
| padding: 0px !important; | |
| } | |
| /* ===== IMAGE CONTAINER ===== */ | |
| /* Prevents image overflow during hover scaling */ | |
| .fct-product-card-image-wrap { | |
| overflow: hidden !important; | |
| } | |
| /* ===== PRODUCT IMAGES ===== */ | |
| /* Image styling with hover zoom effect */ | |
| .fct-product-card img { | |
| border-top-left-radius: 0px !important; | |
| border-top-right-radius: 0px !important; | |
| transition: 0.5s ease-out; /* CUSTOMIZABLE: Adjust transition duration/speed */ | |
| } | |
| .fct-product-card:hover img { | |
| transform: scale( | |
| 1.1 | |
| ); /* CUSTOMIZABLE: Change zoom level (1.05, 1.1, 1.2, etc.) */ | |
| } | |
| /* ===== PRODUCT TITLES ===== */ | |
| /* Title styling with hover color change */ | |
| .fct-product-card h1, | |
| .fct-product-card h2, | |
| .fct-product-card h3, | |
| .fct-product-card h4, | |
| .fct-product-card h5, | |
| .fct-product-card h6 { | |
| margin-top: 16px !important; /* CUSTOMIZABLE: Space above titles */ | |
| margin-bottom: 32px !important; /* CUSTOMIZABLE: Space below titles */ | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| padding-top: 0px !important; | |
| font-size: 18px !important; /* CUSTOMIZABLE: Title font size */ | |
| } | |
| /* Title hover effects */ | |
| .fct-product-card .fct-product-card-title { | |
| transition: color 0.2s ease-in !important; /* CUSTOMIZABLE: Color transition speed */ | |
| } | |
| .fct-product-card:hover .fct-product-card-title { | |
| color: blue !important; /* CUSTOMIZABLE: Hover color (#0000ff, #ff0000, etc.) */ | |
| text-decoration: none !important; | |
| } | |
| /* ===== PRICING SECTION ===== */ | |
| /* Price display positioning and styling */ | |
| .fct-product-card .fct-product-card-prices { | |
| display: flex !important; | |
| margin-bottom: -45px !important; /* CUSTOMIZABLE: Vertical positioning */ | |
| padding-left: 0px !important; | |
| padding-right: 0px !important; | |
| padding-bottom: 0px !important; | |
| justify-self: end; /* Aligns prices to the right */ | |
| font-size: 18px !important; /* CUSTOMIZABLE: Price font size */ | |
| align-items: flex-end !important; | |
| padding-bottom: 0px !important; | |
| justify-content: flex-end; | |
| flex-direction: column; | |
| } | |
| /* Sale price styling */ | |
| span.fct-compare-price { | |
| font-size: 14px; /* CUSTOMIZABLE: Sale price font size */ | |
| margin-bottom: -4px !important; | |
| } | |
| /* Subscription/variable price styling */ | |
| [aria-label*="from"] { | |
| font-size: 18px !important; /* CUSTOMIZABLE: "From" price font size */ | |
| width: 60%; | |
| text-align: right; | |
| margin-bottom: 0px !important; | |
| } | |
| /* ===== RESPONSIVE ADJUSTMENTS ===== */ | |
| /* Desktop breakpoint adjustments */ | |
| @media (min-width: 769px) { | |
| /* 5-column grid adjustments */ | |
| .fc-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-5, | |
| .fct-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-5 { | |
| .fct-product-card .fct-product-card-prices { | |
| margin-bottom: -55px !important; /* CUSTOMIZABLE: Price positioning for 5-column */ | |
| } | |
| [aria-label*="from"] { | |
| margin-bottom: 0px !important; | |
| } | |
| } | |
| /* 3-column grid adjustments */ | |
| .fc-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-3, | |
| .fct-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-3 { | |
| .fct-product-card .fct-product-card-prices { | |
| margin-bottom: -45px !important; /* CUSTOMIZABLE: Price positioning for 3-column */ | |
| } | |
| [aria-label*="from"] { | |
| margin-bottom: 0px !important; | |
| } | |
| } | |
| /* 2-column grid adjustments */ | |
| .fc-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-2, | |
| .fct-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-2 { | |
| [aria-label*="from"] { | |
| margin-bottom: 0px !important; | |
| } | |
| } | |
| } | |
| /* Medium screen adjustments (tablets/laptops) */ | |
| @media (min-width: 1000px) and (max-width: 1400px) { | |
| /* 5-column grid responsive adjustments */ | |
| .fc-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-5, | |
| .fct-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-5 { | |
| [aria-label*="from"] { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive font size */ | |
| } | |
| .fct-product-card .fct-product-card-prices { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive price font size */ | |
| } | |
| .fct-product-card button { | |
| font-size: 13px !important; /* CUSTOMIZABLE: Responsive button font size */ | |
| line-height: 1.3 !important; | |
| padding: 4px !important; /* CUSTOMIZABLE: Responsive button padding */ | |
| width: 50% !important; /* CUSTOMIZABLE: Button width on medium screens */ | |
| } | |
| .fct-product-card h1, | |
| .fct-product-card h2, | |
| .fct-product-card h3, | |
| .fct-product-card h4, | |
| .fct-product-card h5, | |
| .fct-product-card h6 { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive title font size */ | |
| } | |
| } | |
| /* 4-column grid responsive adjustments */ | |
| .fc-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-4, | |
| .fct-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-4 { | |
| [aria-label*="from"] { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive font size */ | |
| } | |
| .fct-product-card .fct-product-card-prices { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive price font size */ | |
| } | |
| .fct-product-card button { | |
| font-size: 13px !important; /* CUSTOMIZABLE: Responsive button font size */ | |
| line-height: 1.3 !important; | |
| padding: 4px !important; /* CUSTOMIZABLE: Responsive button padding */ | |
| width: 50% !important; /* CUSTOMIZABLE: Button width on medium screens */ | |
| } | |
| .fct-product-card h1, | |
| .fct-product-card h2, | |
| .fct-product-card h3, | |
| .fct-product-card h4, | |
| .fct-product-card h5, | |
| .fct-product-card h6 { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive title font size */ | |
| } | |
| } | |
| /* 3-column grid responsive adjustments */ | |
| .fc-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-3, | |
| .fct-products-wrapper | |
| .fct-products-wrapper-inner | |
| .fct-products-container.grid-columns-3 { | |
| [aria-label*="from"] { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive font size */ | |
| } | |
| .fct-product-card .fct-product-card-prices { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive price font size */ | |
| } | |
| .fct-product-card button { | |
| font-size: 13px !important; /* CUSTOMIZABLE: Responsive button font size */ | |
| line-height: 1.3 !important; | |
| padding: 4px !important; /* CUSTOMIZABLE: Responsive button padding */ | |
| width: 50% !important; /* CUSTOMIZABLE: Button width on medium screens */ | |
| } | |
| .fct-product-card h1, | |
| .fct-product-card h2, | |
| .fct-product-card h3, | |
| .fct-product-card h4, | |
| .fct-product-card h5, | |
| .fct-product-card h6 { | |
| font-size: 16px !important; /* CUSTOMIZABLE: Responsive title font size */ | |
| } | |
| } | |
| } | |
| /* ===== ADD TO CART BUTTONS ===== */ | |
| /* Main cart button styling */ | |
| .fct-product-card button { | |
| white-space: normal; | |
| background-color: #00009d !important; /* CUSTOMIZABLE: Button background color */ | |
| box-shadow: none !important; | |
| width: 50% !important; /* CUSTOMIZABLE: Button width */ | |
| border-radius: 0px !important; | |
| border-width: 0px !important; | |
| padding: 12px; /* CUSTOMIZABLE: Button padding */ | |
| font-size: 14px; /* CUSTOMIZABLE: Button font size */ | |
| line-height: 1.3 !important; | |
| color: #ffffff !important; /* CUSTOMIZABLE: Button text color */ | |
| } | |
| /* View product button styling */ | |
| .fct-product-view-button { | |
| background-color: #00009d !important; /* CUSTOMIZABLE: Button background color */ | |
| box-shadow: none !important; | |
| width: 50% !important; /* CUSTOMIZABLE: Button width */ | |
| border-radius: 0px !important; | |
| border-width: 0px !important; | |
| padding: 12px; /* CUSTOMIZABLE: Button padding */ | |
| font-size: 14px; /* CUSTOMIZABLE: Button font size */ | |
| line-height: 1; | |
| color: #ffffff !important; /* CUSTOMIZABLE: Button text color */ | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment