TSF Added columns 'break' WooCommerce Product listing in Admin

Hi cdensch,

Because WooCommerce doesn’t use the default WordPress columns, I had to work my way into this listing without breaking stuff.
In fact, WooCommerce never intended to have extra columns added, because of their fixed widths. They also have at least 4 more rows than the default Post Types (posts, pages). This made it a difficult case.

To resolve this, I’ve applied a fix in CSS, which should already be present on older versions of this plugin.
With fix: https://theseoframework.com/share/other/with-fix.jpg
Without fix: https://theseoframework.com/share/other/without-fix.jpg

You can see at the top-right that there’s “Screen Options” available, this is a per-user setting on which you can choose what columns to show. I understand this can be a hassle as you might need all columns at all times.

You could also try and see if enlarging your browser window will help.
Or, you could get a bigger screen, but that might be something for later or that might even be impractical :).

Unfortunately, I can’t make it fit “any more” in its current state.
I’ve also tried stacking rows, alas, with even more negative side-effects: https://theseoframework.com/share/other/tsf-rows.jpg

In the future I might implement other ways to represent the SEO Bar, but for now, this is all I can do in the given time — with its unfortunate side-effects on smaller screens with WooCommerce.

I hope this clears things up and might lead to a possible solution. If you have anything more to add, let me know! Have a great day :).

Thanks for your reply, which both makes a lot of sense and is complete.

I understand what you’re saying, after messing around with it in Chrome inspector for a couple of minutes I can see that Woo didn’t use a very responsive set up for this. I’ve “fixed” it by manually adding some custom CSS in /woocommerce/assets/css/admin.css that puts a width on the <th> tags that are displaying compressed/vertically but I don’t endorse that as any kind of “fix” for your plugin, because the columns that “fall out” of the columnset are going to be arbitrary to each user’s plugin/admin/screen options setup (Mine are Ultimate Brands Brands column and WooSideBars Custom SideBar y/n column). Adding any kind of inline style=”width:x;” to the <th> of the impacted columns works as well but is obviously even more of a hack (and would require getting into OPP – Other People’s PHP). Other solutions include adding the CSS to your admin-theme’s functions.php or getting one of those admin-css plugins, both of which are probably too much work for a problem of this scale.

As an aside, I’m pretty sure it’s not a low resolution/small screen scenario that’s causing it; I’m running at 1920×1080 on a 26″ screen with the browser in full screen (Chrome 50.0.2661.94 m) and see it by default. I think it’s more a “adding any number over (x) columns to Woo products listing” problem.

Thanks again for your help!

Hi cdensch,

I understand! I didn’t know you had multiple extra rows active.

The best way to solve this is to put a percentage width on the fields, and adding an !important tag with it.
Please keep in mind that you should target it at specifically the WooCommerce fields, otherwise all kinds of weird things will happen.

For example, this worked for me:

body.post-type-product table.wp-list-table th {
    width: auto !important;
}

Or:

body.post-type-product table.wp-list-table th {
    width: 8% !important;
}

These changes shouldn’t be done directly into an active plugin, as these changes will be overwritten in an update (OPP ;)).

I can’t help you much more on this topic, as it opens all kinds of bad practices while it might result in unexpected behavior, although it’s “only” in CSS.
This issue should be resolved at WooCommerce, if that’s even possible at all.

I’ll hop on board the WooCommerce Github train when I find the time to contribute anything useful, easy, and permanent on this matter that goes hand-in-hand with many popular extensions.

Until then, happy fiddling and have a great day!