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:

.wc-product-table-controls .dataTables_filter input[type="search"] {
    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:

.wc-product-table-controls .dataTables_filter {
    float: left;
    text-align: left;
}

Change the width and position together

You can also combine both changes:

.wc-product-table-controls .dataTables_filter {
    float: left;
    text-align: left;
}

.wc-product-table-controls .dataTables_filter input[type="search"] {
    width: 320px;
    max-width: 100%;
}

Related Articles

• Code snippet: Disable product table caching for specific users
• Code snippet: Disable sorting when column headings are clicked
• Code snippet: Change the options in a product table filter dropdown
• Code snippet: Sort SKU numbers numerically
• Code snippet: Change the Page Length dropdown options
• Code snippet: Hide the View Cart link after adding to cart