Styling the button and modal

The plugin ships with a small stylesheet that keeps the modal readable on any theme. Everything can be overridden from your theme’s stylesheet or from Appearance → Customize → Additional CSS (classic themes) or Styles → Additional CSS in the Site Editor (block themes).

Theme colours and CSS variables#

The modal reads two of the standard WordPress colour presets:

CSS variable	Used for	Fallback
--wp--preset--color--base	Modal background	#fff
--wp--preset--color--contrast	Modal text colour	#1e1e1e

Block themes define these presets in theme.json, so the modal automatically uses the theme’s light and dark colours. On classic themes, or to override the colours, set them on the modal:

.ankpqv-modal {
	--wp--preset--color--base: #fafafa;
	--wp--preset--color--contrast: #222222;
}

CSS classes#

Class	Element
.ankpqv-quick-view	The Quick view button in listings. It also has the button class, so theme button styles apply.
.ankpqv-modal	The dialog element. The dialog also has the woocommerce class so WooCommerce’s own form styles apply inside it.
.ankpqv-modal::backdrop	The dimmed overlay behind the modal.
.ankpqv-modal__close	The × close button.
.ankpqv-modal__content	The scrolling content area.
.ankpqv-modal__status	The loading and error messages.
.ankpqv-product	The two-column product wrapper inside the modal.
.ankpqv-product__image, .ankpqv-gallery__main, .ankpqv-gallery__thumbs, .ankpqv-gallery__thumb	Gallery parts. The active thumbnail has .is-active.
.ankpqv-product__summary	The details column.
.ankpqv-product__title, .ankpqv-product__price, .ankpqv-product__description, .ankpqv-product__cart, .ankpqv-product__notice, .ankpqv-product__actions, .ankpqv-product__details	Individual detail blocks.

Examples#

Make the quick view button secondary and smaller than add to cart:

.ankpqv-quick-view {
	background: transparent;
	border: 1px solid currentColor;
	font-size: 0.85em;
}

Change the modal width and corner radius:

.ankpqv-modal {
	width: min(1100px, calc(100vw - 32px));
	border-radius: 12px;
}

Darken the backdrop:

.ankpqv-modal::backdrop {
	background: rgba(0, 0, 0, 0.8);
}