[Woocommerce] Woocommerce Single Product Display in One Column

I would like to display the Single Product page - Product Image and galleries with the Summary (Title, Price Description etc.) below in a single column - not 2 columns

  • Katya Tsihotska
    • Support & QA

    Hi Clive

    Hope you're having a wonderful day!

    In order to display this content in one columt, try to use the following CSS:

    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary,
    .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
        float: none;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    You can add it to the Appearance -> Customize -> Additional CSS section. If you don't have such section, you can use the Simple Custom CSS and JS plugin.

    Let us know if this doesn't work for you and if so, could you please grant us temporary support access to your website so we can have a better look? You can grant us access via WPMUDEV Dashboard plugin, there's no need to share credentials. Here's our detailed documentation page about it:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Kind regards,
    Katya

  • Clive
    • WPMU DEV Initiate

    Thanks for your quick response.
    I have tried to insert the CSS code in:
    - Appearance/Themes/CSS
    - Active Theme (UNCODE) Theme Options CSS
    and finally (currently) in
    Appearance/Editor/CSS
    But the products still present Images & Detail in 2 columns.
    See example:
    http://fireworksdev.co.za/product/navy-knit-cardigan/
    http://fireworksdev.co.za/product/navy-nylon-leather-backpack/

    I have granted access via WPMUDEV dashboard.
    This is a devsite with sample data so it is only for testing functionality.

    I hope you can help.
    Thanks & Regards,
    Clive

  • Ash
    • WordPress Hacker

    Hello Clive

    I have just checked your theme and it seems the theme uses grid layout. So, it's not possible to change this layout just using css, it will affect other part of the template. So, we need to change the layout from the page template.

    Would you please check if your theme any single product template? It should be called single-product.php but may vary based on the theme structure. If you find that page template, send me the file and I will change the layout for you.

    Please let me know. Have a nice day!

    Cheers,
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.