Custom CSS For Online Product Card Design in FluentCart
Your online store needs some style. Your buyers require minimal discretion and a sleek interface. So to do that, we create this. A list of custom CSS for online product card design in FluentCart.
Here are the designs that can give your store a perfect look, just the way your customers like. Matched your brand and vibe of the store as well. And keep in mind, these styles will impact your store speed at all cause these are CSS codes.
If you do not know how to code, donāt worry. We took care of that; you do not need to know anything, and you do not need a developer. Just stay will and keep reading.
FluentCart product card CSS breakdown
If you understand a little bit of CSS, then this part is for you. Here we are breaking the vital CSS class that you need to do the customization. So, if you inspect the shop page of FlunetCart using any browser Dev tool, for the product card, you will find the following classes.
Layout & wrappers
Product card structure
Pricing details
Actions
How to set the CSS card designs
Now this is the easy part and the only part, to be honest. At this point, we are assuming you have already installed the FlunetCart and created a shop page. Now you have to just copy and paste the CSS codes in you WordPress. We will come to the CSS code a bit later.
You can add custom CSS in WordPress in two different ways for the online product card design.
Method #1
Go to the WordPress dashboard and then click on āAppearanceā. You will find āCustomizeā, click it. It will take you to a customization hub of WordPress. There you will find āAdditional CSSā. Click on it and just paste the CSS code that you copied. Hit publish. Now refresh the shop page, and you will see the new product card design.
But his method has a very little problem. Let’s say you have multiple shop pages and want a different design for each, or for better optimization, you want to load this additional CSS to the shop page only, not any other page. Then we have another method for you.
Method #2
For this method, you need to install a plugin called FluentSnippets. Donāt worry. It;s 100% free and open source. After you activate the plugin in WordPress, create the new CSS snippet. Paste the CSS code there, and from the condition below, set it to the specific page, in this case, the shop page. Thatās it. Hit publish, activate, and refresh the shop page.
Hope you are all clear and on the same page. Now let’s move on to the style codes.
Custom CSS for online product card design
Here is the first style of product card design for FlunetCart. Just copy the code from below and paste it into your WordPress site using any of the methods as we discussed above.
/*
* FluentCart Product Card Style #1 – Minimal
*
* INSTALLATION INSTRUCTIONS:
* 1. Install FluentCart plugin
* 2. Install FluentSnippets plugin
* 3. Copy this CSS code
* 4. Paste into FluentSnippets plugin
* 5. Add condition: Apply only on shop page for faster loading
* 6. Save and activate the snippet
*
* CUSTOMIZATION NOTES:
* – Colors: Change hex values (#00009d) for brand colors
* – Fonts: Modify font-size values for typography
* – Spacing: Adjust margin/padding values for layout
* – Hover effects: Modify transform and color values
*
* ACCESSIBILITY:
* – Maintain sufficient color contrast ratios
* – Ensure hover states are clearly visible
* – Test with keyboard navigation
* VISIT: https://fluentcart.com/
*/
/* ===== 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 */
}
Style One
We have two more styles, one is a bit fancy, and the other is modern, which you can download from below.
Style Two
Style Three
If you download, then you will be subscribed to the FluentCart newsletter. You may receive promotional emails as well as our monthly industry digest, “Checkout Thinking.” We will not spam you, and you can unsubscribe at any time.
Caution
Just one thing to keep in mind: these are only for grid view in FleuntCart, but not list view. At least not for now. But will optimize these for list view as well.
You may need to tweak things slightly to get the perfect result. Fonts and themes behave differently, so a bit of adjustment is totally normal. To fine-tune it, you might want to play around with the CSS property values until everything looks just right.
No worries, though; everything is clearly commented with simple, step-by-step instructions. Before rolling it out on your main site, itās a good idea to test and tweak it on a demo site first, just to make sure everything works exactly the way you want.
Wrap up
FluentCart delivers up to three times faster order processing while using 25% fewer server resources. But speed isnāt the whole story. Your store also needs style and personality. Your brand identity goes beyond a logo; itās the full experience. Hope you like this custom CSS for your online product card design in FluentCart.
Once In a Lifetime Offer
Hi, this is Abir, a Deputy Marketing Lead, passionate product designer, and WordPress core contributor. Creating interesting content and products that ensure a 360-degree customer experience is my daily job.
Subscribe now
Related Articles and Topics
-
What is Brand Equity? Meaning & How to Build One
Brand equity is the value a brand name generates beyond the product. Learn its meaning, components, and how…
-
FluentCart eCommerce MCP Is Here: Now You Can Talk to Your Store
Your store can now answer questions, run reports, and issue refunds through plain conversation. Here’s how eCommerce MCP…
-
How to Sell Online Courses With WordPress: The 2026 Setup
The LMS plugin you have leaned on for years just changed hands again, the cart you bolted on…
Leave a Reply