[Support request] Design of 'shop' and 'product' pages in WooCommerce

[Simon]

Hi

I am creating a site with 3k images of 700 plants, with categories and filters to help identification and just the pleasure of looking at the great photos. I’m using WooCommerce, but of course without showing stock, prices etc.

On the ‘shop’ page, the current grid setting is for the individual images to reduce in size on smaller screens. I would like them instead to retain a similar size, but with fewer on each row. The only way I can think of doing it is to completely redefine the CSS for the 5 column grid for different screen sizes. But there must be a better/simpler way? Can you suggest?

On the individual ‘product’ pages, on larger screens I would like to locate the ‘Additional information’ to the right of the image (where all the non-displaying prices etc would usually be), and appearing below the image on smaller screens. It means relocating that block of information into a 2 column layout. So do I simply start a new design from scratch with Elementor, or can I modify the existing? Suggestions welcome!

Thank you
Simon

[Tom]

Hi there,

1. This should be possible. The first thing you need to do is increase the size of your images in Customize > WooCommerce. Right now they’re quite small (around 200px), so you’ll want to increase that. Then we can adjust the CSS to reduce the amount per row as the screen size reduces.

2. Try this CSS:

@media (min-width: 769px) {
    .woocommerce #content div.product .woocommerce-tabs, 
    .woocommerce div.product .woocommerce-tabs, 
    .woocommerce-page #content div.product .woocommerce-tabs, 
    .woocommerce-page div.product .woocommerce-tabs {
        clear: none;
    }
}

Let me know 🙂

[Simon]

Tom – Thank you for this, and for the speedy reply.

Re 1. I’m about to read up on Grids, so will come back if I need help.

Re 2. A good reminder of how much clear:none; can achieve. Putting it on the woocommerce-tabs as a whole as you suggested, then enabled me to control the two component tabs independently at different screen sizes, with clear:left; and clear:none;. Great improvement.

Request – I would really like to swop the Description text and the Additional information table, so that the Additional information comes first. But they are both on the same hook, so I can’t see how to do it.

Do you have a solution?

Thank you.

Simon

[David]

Hi there,

Woocommerce provides this filter where you can change the priority and re-order each of the tabs:

https://docs.woocommerce.com/document/editing-product-data-tabs/#section-3

[Simon]

Wow – so simple to implement. I’ve searched everywhere for that, and tried things far more complicated! Thank you.

[David]

Awesome – glad to be of help 🙂

[Author]

Posts