Create sticky headers in grid view

When you’re displaying variations in a grid view, you might want to make the table headers ‘sticky’ – so that when users scroll up or across, the attribute names remain visible. This makes it easier for the user to read them.

You can do this with some CSS:

	.wcbvp-scrollable {
	height: 500px;
	}
	.woocommerce div.product form.cart table {
	border-width: 0 0 1px;
	position: relative;
	}
	.wcbvp-table-wrapper thead th {
	position: sticky;
	top: 0;
	background: #E0E0E0;
	}
	.wcbvp-table-wrapper tbody th {
	position: sticky;
	left: 0;
	background: E0E0E0;
	}

view raw wcbvp-sticky-table-headers.css hosted with ❤ by GitHub

Here’s how to add CSS to your site.

Was this article helpful?

Related Articles