How to change products per row count on mobiles

There isn’t any option for this but instead you can customize it through CSS.

Please use this code:

@media (max-width: 768px){
    .woocommerce ul.products.columns-2 li.product, 
    .woocommerce ul.products.columns-3 li.product, 
    .woocommerce ul.products.columns-4 li.product, 
    .woocommerce ul.products.columns-5 li.product, 
    .woocommerce ul.products.columns-6 li.product, 
    .woocommerce-page ul.products.columns-2 li.product, 
    .woocommerce-page ul.products.columns-3 li.product, 
    .woocommerce-page ul.products.columns-4 li.product, 
    .woocommerce-page ul.products.columns-5 li.product, 
    .woocommerce-page ul.products.columns-6 li.product {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

Either paste it into the child theme’s style.css stylesheet (recommended) or add it into Customizer > Additional CSS (not recommended).

Read more on how to add custom CSS .