[Support request] Move product image below the short description

Home Forums Support [Support request] Move product image below the short description

Home Forums Support Move product image below the short description

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #800790
    wonzilla

    Hi there,

    I want to move the product image/gallery BELOW the short description (with buy button) in the single product page. An example would be this site with product title and buttons on top and image below: https://audiotheme.com/view/popbelly/

    Thank you 🙂

    #801051
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to the site? You can edit your original topic and use the Site URL field for privacy.

    #801231
    wonzilla

    Hi David,

    My website is in maintenance mode right now. It’s just the standard WooCommerce structure with product image first followed by the short description of that product.

    #801339
    David
    Staff
    Customer Support

    I assume this is just on mobile? Does the image stay left, summary on right for the desktop?

    #801698
    wonzilla

    Hi David,

    I just want to change the order so that the short description appears first and then the gallery of that product. Currently, it shows the image first and then the short description on both mobile and desktop as it’s supposed to. Please see the link above to see what I’m talking about. I know it’s not WooCommerce there but that’s how I want it to look.

    #801944
    David
    Staff
    Customer Support

    OK so give this a shot:

    @media (max-width: 768px) {
        .woocommerce.single-product div.product {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
        
        .woocommerce.single-product #content div.product div.summary {
            -webkit-box-ordinal-group: 0;
                -ms-flex-order: -1;
                    order: -1;    
        }
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.