It used to be that you had to find specific WooCommerce-compatible themes for your store. In the upcoming release we have made big improvements in how WooCommerce handles themes that were previously unsupported, so now you can run WooCommerce with any theme!
On themes that don’t formally declare WooCommerce support the templates will render inside the content. This keeps everything looking natural on the site while ensuring everything still works great. Here are some before and after examples using themes that do not formally declare WooCommerce compatibility:
In order to make sure everything looks as nice as possible and so customers can see products well on themes with narrow content areas, lightbox and zoom will automatically be enabled for themes that don’t formally support WooCommerce. If your theme currently declares WooCommerce support the theme will still have full control over whether lightbox and zoom are enabled on products.
One thing that you will notice is that the product reviews area is not present on these themes. In our testing the CSS used by most themes that do not support WooCommerce did not work well with WooCommerce’s CSS for review styles. These themes will use the regular comments form. Themes that declare WooCommerce support will still use the review template.
Column and row settings
We’ve also added the ability to select the number of rows and columns displayed in the shop to the customizer. Everything updates dynamically so you can preview how your shop will look while changing the settings. The width of the columns will automatically increase or decrease depending on your settings, so everything should look nice and fill the available area. This feature is available on all themes.
Theme developers can set the minimum, maximum, and default settings for the columns and rows when declaring WooCommerce support:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function my_custom_woocommerce_theme_support() { add_theme_support( 'woocommerce', array( // . . . // thumbnail_image_width, single_image_width, etc. // Product grid theme settings 'product_grid' => array( 'default_rows' => 3, 'min_rows' => 2, 'max_rows' => 8, 'default_columns' => 4, 'min_columns' => 2, 'max_columns' => 5, ), ) );}add_action( 'after_setup_theme', 'my_custom_ |