WordPress.org

Forums

Virtue
[resolved] Move image and text on product page (8 posts)

  1. jd3723
    Member
    Posted 1 year ago #

    On the individual product pages, I would like to move the main product image a bit over to the right so that it isn't so far to the left of the page. I also want to move the column that shows the product name, price, description, and "add to cart" button slightly over to the right. I want that column to be narrower than it is now, so it's left edge should be moved further over to the right, but it's right edge can remain at the same place that it currently is.

    My site is dorici.com. Currently the individual product pages are aligned like this: http://www.dorici.com/product/eaux-my-god-tee/

    Ideally, I want the location for the image and description width to be something more like this:
    http://unifclothing.com/womens/pusher-dress

    Please let me know if there is any shortcode or editing that I can do to scootch things over on the product pages. Any help is appreciated!

  2. hannah
    Kadence Theme Support
    Posted 1 year ago #

    Hey, Try pasting this into your custom css box in theme options > advanced settings.

    @media (min-width: 1200px){
    .span7 {
    width: 400px;
    padding-left: 120px;
    }
    div.product .product_image {
    padding-left: 70px;
    }
    }

    Let me know if that's the look you're going for! If not I'm happy to change things a bit.
    Hannah

  3. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    First, I recommend updating the theme, you are using version 1.8.4 the current version is 2.2.1

    And for what your wanting to change I would use this css:

    @media (min-width: 992px){
    .product .entry-summary {
    padding-left: 80px;
    }
    }

    Kadence Themes

  4. jd3723
    Member
    Posted 1 year ago #

    Thanks! That helped to move the text over to the right, but it didn't move the image over to the right. Is there any code I can add to scootch the product image over to the right by around 80 pixels?

  5. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    In that case remove the css I posted above and use this:

    @media (min-width: 992px){
    .product .col-md-7.product-summary-case {
    width: 40%
    }
    .product .col-md-5.product-img-case {
    width: 60%
    }
    }

    Kadence Themes

  6. jd3723
    Member
    Posted 1 year ago #

    That worked perfectly! Thanks. However, I just turned on the Woocommerce Dynamic Gallery plugin. Is it possible to scootch the Dynamic Gallery over to the right on the product pages?

  7. Kadence Themes
    Member
    Theme Author

    Posted 1 year ago #

    @media (min-width: 992px){
    .product .col-md-5.product-img-case .images.gallery_container {
    padding-left: 80px;
    }
    }

    Kadence Themes

  8. jd3723
    Member
    Posted 1 year ago #

    Perfect! Thanks so much.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic