• Resolved fh4545

    (@fh4545)


    Hello,

    At the moment product title, price, short description, quantity selector, add to cart button, sku number, category and tags are showing up on the product photo.

    How can I move all the above to the right side of the product photo?

    Thank you and best regards,
    Finn

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi
    You have issues with some style.

    .woocommerce-page div.product div.summary {
        float: left !important;
    }

    Add above css in your active theme.
    Thanks
    Ahir Hemant

    Thread Starter fh4545

    (@fh4545)

    Hi Ahir,

    Thank you for your reply.

    I have tried your code in different files, including the style.css, additional customised CSS and the _wc-products.scss file, but it is not working.

    Right now I have left it in the and the whole file looks like below. If you look for .woocommerce ul { – you will see your code just below:

    [ SNIP! 450 lines deleted ]

    Best regards,
    Finn

    • This reply was modified 2 years, 7 months ago by Jan Dembowski.
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    Please do not post large code or responses like that here, it doesn’t work after ~10 lines or so.

    If you need share that data please use https://gist.github.com/ or https://pastebin.com/ instead and post the link to that paste.

    Thread Starter fh4545

    (@fh4545)

    Hello Jan,

    Sorry for that, I thought that it would work when there is a Code function in the menu.

    I have tried your code in different files, including the style.css, additional customised CSS and the _wc-products.scss file, but it is not working.

    As I wrote in my reply to Ahir I have tried his code in different files, including the style.css, additional customised CSS and the _wc-products.scss file, but it is not working.

    Right now I have left Ahir’s code in the _wc-products.scss file, which is a Theme file.

    How can I change the layout?

    Best regards,
    Finn

    Hello there,
    You can use this custom CSS code:

    .single-product.woocommerce div.product div.images, .single-product.elementor-element div.product div.images { float: left  !important; }
    
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary { float: right !important; }

    You can use add custom CSS in Appearance > Customize > Additional CSS, as explained here: https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

    Thread Starter fh4545

    (@fh4545)

    Hi Augustus,

    Perfect, Thanks a lot.

    Finn

    Thread Starter fh4545

    (@fh4545)

    Sorry forgot to mark it as solved.

    Glad to hear it – thanks for letting us know!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘The Layout of the Single Product Page’ is closed to new replies.