Code snippets: Customizing the bulk variations grid
These code snippets let you fine-tune the appearance of the variations grid created by WooCommerce Bulk Variations. They cover some of the most common requests we receive, such as hiding the prices, changing the font size, and resizing the columns and quantity boxes.
Add any of these to your site in Appearance → Customize → Additional CSS. If you have not used custom CSS before, see our guide on how to add code snippets.
Hide the prices
By default, each variation shows its price in the grid. To hide all the prices and show only the quantity boxes, use:
.wc-bulk-variations-table .wcbvp-row .woocommerce-Price-amount {
display: none !important;
}
Change the font size
To make the text in the grid larger or smaller, set a font size on the table. Change 14px to whatever suits your design:
.wc-bulk-variations-table {
font-size: 14px;
}
Set the column width
The grid sizes its columns automatically based on their content. To give each column a minimum width, use the following and change 120px as needed:
.wc-bulk-variations-table .wcbvp-col-header {
min-width: 120px !important;
}
Resize the quantity boxes
To make the quantity input boxes narrower or wider, set a width on them. Adjust 60px to suit your layout:
.wc-bulk-variations-table input.wcbvp-quantity {
width: 60px !important;
}
Need a different change?
These are the customizations we are asked about most often. If you want to style something else in the grid and you are comfortable with CSS, you can inspect the relevant element in your browser to find its class. If you would rather we did it for you, our plugin customization service can help.