skip to Main Content

I have a product page which currently contains two parts: image at the right and some summary at the left. However, I am not happy with this alignment and would like to take the summary part and switch the alignment with the image, resulting the summary part at the right and the image at the left. I checked with the inspect tool and found out that the summary part has this div class: summary.entry-summary and the image part has this div class: div.woocommerce-product-gallery_image. Any ideas how to do this ?

EDIT: OK, I managed aligning the summary part like this: however I still can’t manage aligning the image.

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    float: right
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
    width: 100%
}

EDIT 2: OK, I now managed to align the image right with a different div class like this:

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

the problem is the summary is now below the image…

EDIT 3: OK, I managed fixing everything by just deleting

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
    width: 100%
}

Thank you everyone !!

2

Answers


  1. Chosen as BEST ANSWER

    OK, my final code is this:

    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
        float: right
    }
    .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: left;
    }
    .woocommerce div.product div.images .woocommerce-product-gallery__trigger{
        display: none;
    }
    

  2. Use floats or left, right and center attributes in HTML.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search