Website Building » WooCommerce » How Do I Change the Product Grid in WooCommerce?

How Do I Change the Product Grid in WooCommerce?

Last updated on January 23, 2023 @ 12:26 pm

WooCommerce is a popular eCommerce platform that allows you to sell products online. One of the great things about WooCommerce is that it’s highly customizable. This means that you can change the way your products are displayed on your website to better suit your needs.

If you’re looking to change the product grid in WooCommerce, there are a few different ways you can do it. Let’s take a look at how to change the product grid in WooCommerce so you can better customize your website.

One way to change the product grid in WooCommerce is by using a plugin. There are a number of plugins that allow you to change the product grid, and they’re fairly easy to use. Simply install and activate the plugin, then follow the instructions on how to change the product grid.

Another way to change the product grid in WooCommerce is by modifying the code. This method is for more advanced users who are comfortable working with code. If you’re not comfortable working with code, we recommend using a plugin instead.

To modify the code, you’ll need to access your WordPress files via FTP. Once you have access, navigate to /wp-content/plugins/woocommerce/includes/admin/. From here, open up class-wc-admin-products.php in a text editor.

Around line 1290, you’ll see this code:

$this->display_product_rows();
exit; // Exit immediately to prevent base class destructor from running
}
PRO TIP: If you are not familiar with code or are not comfortable working with code, we recommend that you seek help from a developer. Making changes to your product grid can have unintended consequences and may break your WooCommerce installation.

Replace this code with this:

$this->display_product_rows();
exit; // Exit immediately to prevent base class destructor from running
}

/** Custom display_product_rows method for customizing output */
public function display_product_rows() {

// Your code goes here..

Save your changes and upload the file back to your server. Once you’ve done this, you can start customizing the output by adding your own code into the display_product_rows() method.

Keep in mind that if you update WooCommerce, your changes will be overwritten and you’ll need to reapply them. We recommend using a child theme if you plan on making any changes to WooCommerce so your changes are not lost when updating.

That’s all there is to changing the product grid in WooCommerce! As you can see, it’s relatively easy to do either with a plugin or by modifying the code yourself.

Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.