Shop page ignoring Ultra theme

Hi Houseofconcrete

Thanks for reaching out. We’ll take a look and report back shortly.

Or, to quickly explain a little bit of the code that WooCommerce applies, please, view the below:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: left;
    margin: 0 3.8% 2.992em 0;
    padding: 0;
    position: relative;
    width: 22.05%;
}

The above rule is outputted by a WooCommerce stylesheet called: woocommerce-layout-css. What it says is that each product should take up 22.05% of the page, that leaves space for four products a row. That’s why you’re not seeing a change on the shop page. How many products to want per row?

Sorry for not being clearer. You don’t need to use the above CSS. I thought it might provide a clearer picture to show the CSS being outputted by WooCommerce. To change the products per row it’s easiest if we use a child theme, that way we can make use of the WooCommerce built-in CSS. I’ve created one here:

https://purothemes.com/wp-content/uploads/2016/02/ultra-child-woocommerce-3-rows.zip

Install from Appearance > Themes > Add New > Upload Theme and then activate.

Activating a child theme in WordPress will, unfrotunately, cause menu location and Customizer settings to reset. Those will need to be reapplied.

Let me know how it goes.

Glad to hear you’ve made progress 🙂

When activating any child theme in WordPress, unfortunately, menu location and Customizer settings will reset. If you’re using WooCommerce Colors plugin you can go back to the Customizer > WooCommerce and reapply your settings. There is unfortunately no way around the settings reset that occurs when activating a child theme.

To try change WooCommerce from a left aligned product layout to a center aligned one, try adding the following at Appearance > Custom CSS:

.woocommerce ul.products {
    text-align: center;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	display: inline-block;
    float: none;
}