WooCommerce 2.0+ and Yoast SEO Product Page Columns Issue Fix

wordpress-seo-yoast-woocommerceWooCommerce is the best eCommerce plugin for WordPress. WordPress SEO by Yoast is the best SEO plugin for WordPress. I like to use them together to build awesome websites. Recently, I discovered an issue when using both plugins:

With WooCommerce and WordPress SEO both activated the columns in my Products listing page in the WordPress admin appear spaced incorrectly.

Here is an image of the issue:

woocommerce-whitespace

Fix #1: Hide WordPress SEO Columns

The easiest fix is to hide the columns WordPress SEO includes on the products page:

1. In the WordPress admin panel, while on the WooCommerce Products page click on Screen Options (it’s in the top-right hand corner)

screen-options

2. Uncheck all WordPress SEO related columns

You should now see your columns appear as normal. If you want the SEO columns…

Fix #2: Add a CSS fix to your Admin Head

Add the following CSS to your custom functionality plugin or theme’s functions.php file to override the conflicting styles causing extra padding:

//Fix WooCommerce Yoast Columns CSS issue
//http://impress.org/woocommerce-2-0-and-yoast-seo-product-page-columns-issue-fix/
function woocommerce_yoast_fix_style() {

    echo '

‘; } add_action(‘admin_head’, ‘woocommerce_yoast_fix_style’);

This isn’t the most elegant solution, but it works. If you have another recommendation please post in the comments below!

It appears this issue has happened for others using the same plugin combination: Yoast SEO Woocommerce 2.0.1 Products in Product Page Products Names Problem

These are two great plugins, hopefully in the near future this problem will be resolved without the use of either workaround mentioned above.