Lesson 40 (Implementation): Improving Auction Card Readability with Better Formatting

Team Wpnzee on July 3, 2026

frontend css

In the previous lesson, the auction card displayed all the required information, but the layout looked more like raw data than a professional marketplace listing. In this implementation, the auction card was refined to improve readability and give visitors a cleaner browsing experience.

What We Wanted to Improve

The original auction card displayed:

  • Prices without a currency symbol
  • Auction end date in raw database format (YYYY-MM-DD HH:MM:SS)
  • Labels and values that were difficult to scan quickly

The objective was to make the card resemble a professional online marketplace.

Step 1: Improve the Auction Details Layout

The auction details were converted into a definition list (<dl>), making the labels and values much easier to align.

Instead of using several independent paragraphs, the HTML now groups related information together.

Example:

<dl class="flipnzee-auction-meta">

    <dt>Start Price</dt>
    <dd>...</dd>

    <dt>Current Bid</dt>
    <dd>...</dd>

    <dt>Buy Now</dt>
    <dd>...</dd>

    <dt>Auction Ends</dt>
    <dd>...</dd>

</dl>

This produces a much cleaner appearance.

Step 2: Format Currency Values

Instead of printing plain numbers such as

111
333
0

the values are now formatted using WordPress’s localization function.

Example:

<?php echo esc_html( '$' . number_format_i18n( $auction['start_price'], 0 ) ); ?>

Similarly,

<?php echo esc_html( '$' . number_format_i18n( $auction['current_bid'], 0 ) ); ?>

and

<?php echo esc_html( '$' . number_format_i18n( $auction['buy_now_price'], 0 ) ); ?>

Now the auction card displays

$111
$0
$333

which immediately looks more professional.

Step 3: Display a Friendly Auction End Date

Previously, the auction end date appeared exactly as stored in the database.

Example:

2026-07-03 06:29:00

A visitor does not need to see the database timestamp.

Instead, the value is formatted before displaying it.

<?php
echo esc_html(
    date_i18n(
        'd M Y',
        strtotime( $auction['auction_end'] )
    )
);
?>

The visitor now sees

03 Jul 2026

which is much easier to read.

Step 4: Style the Definition List

CSS was added to create two neat columns.

Example:

.flipnzee-auction-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px 20px;
}

.flipnzee-auction-meta dt {
    font-weight: 600;
}

.flipnzee-auction-meta dd {
    margin: 0;
    text-align: right;
}

This aligns every label with its corresponding value.

Step 5: Keep the Call-to-Action Prominent

The View Listing button remains at the bottom of the card, giving visitors a clear next step.

The wording is intentional.

Rather than taking users directly to the website being sold, the button takes them to the listing page where they can review:

  • Verified analytics
  • Traffic statistics
  • Pricing
  • Auction details
  • Future bidding functionality

This avoids any confusion about where the visitor is being directed.

Result

The auction card now provides a much cleaner presentation.

Before:

  • Raw prices
  • Raw timestamps
  • Basic formatting

After:

  • Dollar-formatted prices
  • Human-readable auction dates
  • Better aligned labels and values
  • Improved visual hierarchy
  • More professional marketplace appearance

What We Learned

Small formatting improvements can significantly enhance the perceived quality of a marketplace.

Visitors usually decide within a few seconds whether a listing looks trustworthy. Clear prices, readable dates, and a well-organized layout contribute to a better user experience and help build confidence in the platform.

Source Code

The primary changes were made in:

  • includes/class-shortcodes.php
  • assets/css/frontend.css

Download Source Code

Download the completed version after this lesson:

⬇ Download Plugin (After Lesson 40) (0 downloads )

Next Lesson

In Lesson 41, we’ll begin integrating Flipnzee Analytics into the auction cards themselves, displaying key verified metrics such as Users, Sessions, and Google Impressions directly on the marketplace. This will highlight one of Flipnzee’s unique advantages: allowing buyers to evaluate website performance before even opening the full listing page.

Leave a Reply