Support » Plugin: WooCommerce » description under photo

  • Resolved nutrition2change

    (@nutrition2change)


    Hello,
    When I first posted my product on woocommerce website I used the short description to add the big description so I could have the description on the right side of the product image instead of underneath because it makes the website look weird and theres a lot of blank space on the right hand side.

    Now, for some unknown reason the short and long description are under the image. Why is that and how do I fix this?

    Thank you

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Tseten D

    (@tibetanitech)

    Hi @nutrition2change,

    I understand you would like to have the product description back on the right side of your product images as the description has suddenly moved below the images.

    I went through you site and can see that there is an additional line of code on your product’s page which changed the alignment of these elements. Did you update your theme or plugins recently that might have caused this issue or did you add any additional CSS in your code?

    Here is the CSS which I found on your site that changed the display, the “float: none;” in the code is responsible for changing the layout. If you were trying to change the CSS for a different element then I would suggest using the specific CSS selector as per your requirements instead of using all the CSS selectors.

    .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: none;
        width: 100%;
    }
    

    Thank you for getting back to me.
    I’ve configured w3 total cache which is maybe why its changed the css? I’m a little uncertain to be honest.

    So do I just remove that line ‘flaot: none;’ ?
    Or what do I change it to?

    I cant stop the cache plugin unfortunately,I can see if I can play around a bit maybe I can find the options that’s done that

    Plugin Support Tseten D

    (@tibetanitech)

    You can add the following custom CSS code in Appearance > Customize > Additional CSS to align the description back with the product images.

    
    @media only screen and (min-width:768px) {
    .woocommerce #content div.product div.summary {
        float: left;
    }
    }
    

    I usually try to avoid using “!important” unless it is un avoidable. If the above code doesn’t work for you then I recommend adding “!important” to force this CSS.

    
    @media only screen and (min-width:768px) {
    .woocommerce #content div.product div.summary {
        float: left !important;
    }
    }
    

    Dies it matter where I place this code? I went onto the product page and clicked to customise, then I went to additional css but is there a specific place to add this code?or just anywhere?

    I’ve just tried adding both codes, and they didnt work? I dont know if I pasted them into an incorrect area

    Plugin Support thup90

    (@thup90)

    Hi there,

    Can you try to add an additional rule below the previous CSS you added:

    .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: left;
    }

    That worked! Perfect thank you 🙂

    Plugin Support Tseten D

    (@tibetanitech)

    I’m glad it worked. I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

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