WooCommerce: Change Number of Related Products

Here’s a simple snippet to change the display of Related Products on the single product page. Lately, I even added a fix for the Storefront theme, which already overrides the WooCommerce filter and needs a different call.

Snippet (PHP): Change Number of Related Products (Rows & Cols) – WooCommerce

/**
 * @snippet       WooCommerce Change Number of Related Products
 * @how-to        Get tutoraspire.com FREE
 * @sourcecode    https://tutoraspire.com/?p=17473
 * @author        Tutor Aspire
 * @compatible    WooCommerce 3.5.4
 * @donate $9     https://www.tutoraspire.com
 */

add_filter( 'woocommerce_output_related_products_args', 'tutoraspire_change_number_related_products', 9999 );

function tutoraspire_change_number_related_products( $args ) {
 $args['posts_per_page'] = 4; // # of related products
 $args['columns'] = 4; // # of columns per row
 return $args;
}

Additional CSS for Storefront Theme – Change Number of Related Products to 4

@media (min-width: 768px) {
.site-main .related.products ul.products li.product {
    width: 22%;
    float: left;
    margin-right: 4%;
}
}