siteground

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 customising the store. When to say customising, 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 customise 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, array( '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 customise your store a lot. Most of our premium 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.

7 Comments

  1. Hi, thanks for that tip, but your code only works for “first” class.
    The “last” class still exists after putting the code in my function.php and looking at the shop archive.
    Any idea what went wrong?

    1. according to latest woocommerce the filter priority need to set

      add_filter( 'post_class', 'prefix_post_class', 21, 3 ); //woocommerce uses 20  as priority, so  need to apply our filter after woocommerce  finishes
      function prefix_post_class( $classes ) {
      	if ( 'product' == get_post_type() ) {
      		$classes = array_diff( $classes, array( 'last','first' ) );
      	}
      	return $classes;
      }
  2. Hey Rilwis,

    Just Wonderful…! It’s simple but it’s truly helpful code. I would like to thank you for this helpful sharing. I am also WooCommerce Developer and the exclusive coding is the best source to me to remove “first” and “last” CSS classes in WooCommerce.

  3. Thanks!

    And for the categories in loop:

    add_filter( ‘product_cat_class’, ‘prefix_remove_first_last_classes_cat’, 10 );
    function prefix_remove_first_last_classes_cat( $classes ) {
    $classes = array_diff( $classes, array( ‘first’, ‘last’ ) );
    return $classes;
    }

Leave a Reply