Code snippet: Change the product table search box width and position
Please note: this article is aimed at developers. We have provided an article on how to add code snippets. If you're not comfortable using them then you can use our plugin customization service.
WooCommerce Product Table displays the search box above the table by default. If you want to change its width or move it to the left, you can do this with custom CSS.
Change the search box width
Add this CSS to your theme or child theme, or to Appearance - Customize - Additional CSS:
.wpt-dataview .search-input-wrapper input.search-input {
width: 320px;
max-width: 100%;
}Change 320px to the width you want to use.
Move the search box to the left
Add this CSS if you want the search box to appear on the left instead of the right:
.wpt-dataview .search-input-wrapper {
margin-right: auto;
}Change the width and position together
You can also combine both changes:
.wpt-dataview .search-input-wrapper {
margin-right: auto;
}
.wpt-dataview .search-input-wrapper input.search-input {
width: 320px;
max-width: 100%;
}The CSS on this page is for the current table frontend. If your site is still in legacy mode, use the older selectors that start with .wc-product-table.