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

Home Forums Support Design of 'shop' and 'product' pages in WooCommerce

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #892262
    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

    #892330
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #894953
    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

    #895092
    David
    Staff
    Customer Support

    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

    #895202
    Simon

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

    #895206
    David
    Staff
    Customer Support

    Awesome – glad to be of help πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.