Displaying a “Price per day” on Product Pages

Sometimes, the price of a product can feel like a lot at first glance. But when you break it down into a daily (or nightly) cost, it suddenly feels way more affordable. So here’s another tip to maximize your conversion and in this post we will look into how i implemented this. I did this for a brand and their sales skyrocket. 🚀

This works especially well for premium products that you’d use every day. After all, it’s easier to justify spending on something that brings you joy or value every single day.

I got this idea from a Tweet and saw a great example with Dagsmejan’s nightwear (check out the screenshot below).

Their pricing strategy really clicked for me. For example, a €99.90 price tag sounds expensive, but when you frame it as €0.27 per night over a year? That feels like a bargain! Inspired by that, I created my own version using a custom code snippet.

Add the following code to the functions.php file of a child theme, or via the Code Snippets plugin.

add_action( 'woocommerce_single_product_summary', 'shoptimizer_display_daily_price', 15 );

function shoptimizer_display_daily_price() {
    global $product;

    // Get the product price
    $price = floatval( $product->get_price() );

    // Calculate daily price and round up to 2 decimal places
    $daily_price = round( $price / 365, 2 );

    // Display the daily price with custom text
    echo '<p class="price_per_day">
		<span data-customTooltip="for 365 days">
			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
	  			<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
			</svg>
		</span>
		<span>Only ' . wc_price( $daily_price ) . ' per day</span></p>';
}

You can of course change the “per day” text to “per night” if you wish.

Then, add the following custom CSS, either to the style.css of a child theme (preferred), or via: Appearance > Customize > Additional CSS.

.price_per_day {
	display: flex;
	font-size: 14px;
	align-items: center;
}
.price_per_day span[data-customTooltip] {
	display: inline-flex;
	cursor: pointer;
	position: relative;
	z-index: 1;
}
.price_per_day svg {
	width: 18px;
	flex-shrink: 0;
	margin-right: 0.5rem;
}
[data-customTooltip]:after {
    background-color: #fff;
    color: #222;
    font-size:11px;
    padding: 4px 8px;
    height: fit-content;
    width: fit-content;
    border-radius: 4px;
    position: absolute;
    word-break: normal;
    text-align: center;
    white-space: nowrap;
    bottom: -2px;
    left: 50%;
    content: attr(data-customTooltip);
    transform: translate(-50%, 110%) scale(0);
    transform-origin: top;
    transition: 0.14s;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05);
}
[data-customTooltip]:hover:after {
    display: block;
    transform: translate(-50%, 110%) scale(1);
}

You’ll see the result in the screenshot below. It even includes a nicely animated tooltip which pops in when you hover over the info icon.