How to change font size of product listing page in Woocommerce?

In this tutorial we’ll learn how to change font size of product listing page at admin panel in Woocommerce. Although we can change it in css file by finding appropriate CSS file and changing font size. This approach has one drawback after updating you have to change the font size again.

So, we’ll apply another approach here. This is the default product listing screen:

The default font size being used for product title is 14px. Now let’s say I want to change this font size to 18px.

To do this add the following lines of code at the end of your theme’s functions.php file:

add_action( 'current_screen', 'my_admin_listing_custom_styles' );

function my_admin_listing_custom_styles() {

   $current_screen = get_current_screen();

   if( 'edit' == $current_screen->base && 'product' == $current_screen->post_type) {

       // Run some code, only on the admin products listing page for e.x add css style

       ?>

<style type="text/css">

       a.row-title {font-size: 18px !important;}

</style>

<?php

   }

}

Save the file after placing code.

Now if you go to product menu from admin panel again, you’ll see font size increased.

woocommerce

This approach will keep your changes even after updating Woo plugin. In this way you can change other styles as well.

Waqas

I hope you enjoy reading this blog post. If you want my team to do WooCommerce Maintenance for you, click here.

Leave a Comment

Your email address will not be published. Required fields are marked *