Removing "first" and "last" CSS classes in WooCommerce

WooCommerce is the most popular e-commerce plugin for WordPress, allowing us to sell any kind of products online. It has almost everything an online store needs and doesn't require much effort customizing the store. When to say customizing, I mean WooCommerce has all the necessary pages on the front end for the store: the product archive page, the product details page, the cart and checkout page and they work as expected. However, being created for the general store, it can't satisfy all users and sometimes we need to customize WooCommerce for our specific needs.

One problem I usually see when I develop WordPress themes for WooCommerce is styling the product archive page. WooCommerce automatically displays all products in a grid of 4 columns, which is great. The problem comes when we want to display 3 products in a row or call WooCommerce to list products in a custom location. This action sometimes breaks the grid layout that WooCommerce defines. It turns out that WooCommerce uses its own HTML markup and styling for its grid. One of the most important things is the first and last CSS classes which are used to clear float and reset the margin for the first and last product in a row. If we change the layout, some products have wrong first or last classes and break the layout. Fortunately, there is a fix for that, which is the main purpose of this article.

How to remove "first" and "last" CSS classes from products in the product archive page

So, to resolve the problem, simply put the following code into your theme's functions.php file:

add_filter( 'post_class', 'prefix_post_class', 21 );
function prefix_post_class( $classes ) {
    if ( 'product' == get_post_type() ) {
        $classes = array_diff( $classes, [ 'first', 'last' ] );
    }
    return $classes;
}

The code is very simple. I add a filter to the post_class filter which helps us add or remove CSS classes for posts. In this case, we use it to remove first and last classes. I also add a simple check for the post type, make sure it works only for products.

Some notes when removing WooCommerce classes

After doing this, your product list is free of those classes added by WooCommerce. That means there is no default style from WooCommerce and you have to style it your own. However, that also means you have the freedom to control the style of your theme. This is a big advantage if you need to customize your store a lot. Most of our free e-commerce WordPress themes requires this and it benefits us a lot. But if you don't know much code or you don't have a developer to handle this kind of things, then using default WooCommerce style is still good. Changing something that is working is not necessary.