Rental Widget - Custom Styling

Advanced customization options for developers and designers

If the configuration options of the Product Rentals Pro Rental Widget aren't enough for you to get the Rental Widget looking as you'd like, you can customize it with custom CSS.

There are two ways to do this:

1. Using the "Custom CSS" box within the theme block configuration options

2. Applying custom CSS via an external CSS file, targeting the Rental Widget's CSS selectors

Below we break down the main CSS selectors to target, which can then be applied in either of the two ways above.

Options, Labels, Text & Buttons

Element	CSS Selector	Example
Option	.rw-form .product-form__input fieldset
Option Label	.rw-form .product-form__input legend
Option Values	.rw-form .product-form__input label
Selected Option Values	.rw-form .product-form__input input[type=radio]:checked+label
Text above and below calendar	.rw-datepicker-text
Text above calendar	.rw-datepicker-text__above	As above, but only for the text above the calendar.
Text below calendar	.rw-datepicker-text__below	As above, but only for the text below the calendar.
Recap Selected Date Label	.rw-recap_date-label
Recap Selected Date	.rw-recape_date-text
Recap Price Label	.rw-recap_price-label
Recap Price	.rw-recap_price-text
Add To Cart Button	.rw-submit
Add To Cart Button (disabled state)	.rw-submit[disabled]

Calendar

Element	CSS Selector	Example
Calendar	.rw-calendar
Current Month Label	.rw-calendar_current-month
Current Year Label	.rw-calendar_current-year
Days of the Week	.rw-calendar_day-of-week
Individual Date Cell	.rw-calendar_date-cell
Date Cell (disabled)	.rw-calendar_date-cell.disabled
Date Cell (selected)	.rw-calendar_date-cell.selected
Date Cell (hover)	.rw-calendar_date-cell.hover

Other Elements

To apply CSS adjustments to more specific parts of the calendar, or Rental Widget, determine the appropriate CSS selectors via browser Developer Tools. If you aren't a developer and need further guidance, please contact our support team and we'll be happy to assist.

Applying Different Styles when Dates have been Selected

When a customer selects dates in the Rental Widget, an additional CSS class is applied to the Rental Widget container.

The Rental Widget container always has a class of .rw-container applied to it.

When dates have been selected an additional class gets added of .rw-dates-selected

Below is an example of how you might use this is to make content appear, or become more prominent once dates have been selected.

Example - Highlighting the Insurance Option

If you're using the Insurance Add-On feature of Product Rentals Pro, you might realise that by default, it doesn't really stand out much, so customers may not notice it or pay a lot of attention to it. This means potential lost revenue for your business.

This can be helped by changing the appearance with custom CSS. At the same time, you may not want to make your product page look too busy, distracting, or just ugly.

Because an additional class is added to the Rental Widget container once dates have been selected, you can have the insurance option appear plain and simple to begin with (or even have it hidden), but then make it really stand out as soon as the customer has selected dates, so that it's almost impossible to miss before they click the Rent Now button (or whatever you have labelled in the PRP settings.

Before dates have been selected:

After dates have been selected:

Notice that there is a 'shine' effect that appears every few seconds. This might be considered too much to always be there, but is fine to apply only once someone has selected variant options and rental dates. The CSS even injects some extra text into the box ("Protect yourself from accidents for a low fee").

Below is the custom CSS that was applied to achieve the appearance above.

.rw-container.rw-date-selected .rw-insurance {
	padding: 5px 10px;
	background-color: #ffe3e7;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	letter-spacing: 0;
	border: 1px solid #000;
	border-radius: 4px;
}

.rw-container.rw-date-selected .rw-insurance .rw-extra-input {
	margin-right: 8px;
	width: 18px;
	height: 18px;
	margin-left: 0;
	accent-color: #000000;
	margin-top: 4px;
}

.rw-container.rw-date-selected .rw-insurance .rw-insurance-text {
	flex: 1 1 60%;
}

.rw-container.rw-date-selected .rw-insurance .rw-insurance-text {
	font-size: 15px;
	font-weight: 600;
}

.rw-container.rw-date-selected .rw-insurance .rw-insurance-price {
	flex: 0 0 auto;
	font-weight: bold;
	text-align: right;
	margin-left: auto;
}

.rw-container.rw-date-selected .rw-insurance::after {
	content: 'Protect yourself from accidents for a low fee';
	display: inline-block;
	font-size: 13px;
	margin-right: auto;
	order: 1;
}

.rw-container.rw-date-selected .rw-insurance .modal-open-button {
	margin-left: auto;
	text-decoration: underline;
	white-space: nowrap;
	order: 2;
}

.rw-container.rw-date-selected .rw-insurance::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 30%;
	height: 100%;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 100%);
	transform: skewX(-30deg);
	animation: shine 4s infinite ease-in-out;
}

@keyframes shine {
	0% {
		left: -100%;
	}

	20% {
		left: 110%;
	}

	100% {
		left: 110%;
	}
}