Shop page ignoring Ultra theme

Hi Houseofconcrete

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

Thanks for the wait and for raising this challenge.

If anyone wants to use a child theme for this challenge, I’ve created one here:

http://purothemes.com/wp-content/uploads/2016/02/ultra-child-full-width-woocommerce-shop-home.zip

The child theme removes sidebar and page header for the shop page. Child themes can be installed from Appearance > Themes > Add New: Upload Theme.

Houseofconcrete, in your case, it might be easier if we use a CSS only solution. Activating a child theme causes Customizer and menu location settings to reset. This makes activating a child theme a little tiresome as you have to redo the above-mentioned settings. To try a Custom CSS only solution you’ll need a Custom CSS plugin like Simple Custom CSS. Once activated, go to Appearance > Custom CSS and insert:

/* WooCommerce */

.woocommerce.archive .entry-header {
  display: none;
}

.woocommerce.archive.sidebar #primary {
	border: none;
	width: 100%;
}

.woocommerce.archive.sidebar #secondary {
  display: none;
}

.woocommerce.archive.sidebar .site-content > .container {
	padding-top: 3.57143em;
}

Hope that helps. Let us know how it goes.

Sorry for this late reply. It worked very well and removed the sidebar. Thanks a lot!

However it seems I have generel problems editing my WooCommerce Shop Page. It’s like it isn’t completely compatible with the Puro Ultra Theme. Have you experienced this problem before?

Thanks for the feedback. I’d love to fix whatever problems you’ve run into. Could you perhaps provide further details on the shop page challenges you mention above. I’m sure I can solve them once I know more.

I have a problem when I go to Woocommerce settings > Products > Display, when I try to change catalog images size (or the other images settings for that matter) it doesn’t change anything on the shop page. Do you know why?

Thanks for your feedback. Ultra isn’t setting any WooCommerce image sizes. Are you regernating your thumbnails after making the image size change?

Please, see: https://docs.woothemes.com/document/using-the-appropriate-product-image-dimensions/

(Input the data and regenerate the thumbnails)

You can use the following to regen. thumbnails: https://wordpress.org/plugins/regenerate-thumbnails/

I have tried regenerating images now and still not working. All images on shop and product pages keep being the same default size. I think the problem is the same as earlier that theres a conflict between Ultra theme and the Shop page in WooCommerce. Can you provide any CSS solution like before but now just for image sizes?

Thanks in advance.

Thanks for your feedback. As far as I know, there isn’t anything in Ultra that’s setting WooCommerce image sizes. I’d be happy to test this for you. Please, use the Private Reply checkbox to send your URL and a set of temporary login details and I’ll take a look. What are the image sizes you’re changing to?

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?

Thanks once again for the support. It is really appreciated.

The above mentioned code worked fine. I would like to have three products pr. row and preferably center aligned. Can you provide the CSS style for that? That would be all from me now then.

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:

http://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.

It’s me saying sorry for not understanding anything. I really liked the simple noobly-friendly Ultra theme design, but this Woocommerce is bad for my head 🙂

I have now applied the child theme for my site. It works fine with 3 products per row now. However I still miss the center alignment of the whole page. I have 3 products on the first row and 2 products on the second row. Especially the second row I want to align to the center.

However the child theme also changed the button colors to Woocommerce purple color. How do I change it back to theme color design?

Huge thanks once again. This will be my last requests.

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;
}