Support » Plugin: WooCommerce » How to move Single Product Images to the Left ?

  • Hi,

    How can i move Single Product Images from right to the Left ?

    I’d like to have product summary items on the right and product images on the left.

    Thank You !

Viewing 9 replies - 1 through 9 (of 9 total)
  • From LEFT TO RIGHT !!!!!!

    Please post a link to one of your product pages.

    Hello Peter,

    You can make changes to the product page outline from your theme. If you are good with PHP, you can search for the file named ‘single-product.php’ inside your theme folder and edit that file according to your needs.

    This would be the best practise. You can also do that using CSS. But that is not recommended. Because the style might conflict in other pages and might scramble things up.

    Try this custom css:

    
    .product-main div {
      -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
      flex-direction: row-reverse; 
    }
    

    Best you check other pages for unwanted side-effects.

    Many Thanks 🙂 However …

    Works on desktop. However on mobile phones, images are still displayed on the top, before product summary. How can i change this ?

    I don’t think that can be done with custom css. It would be necessary to reorder the page elements in the markup. The approach would be to look at plugins/woocommerce/templates/content-product.php, or your theme version if there is one, use remove-action() to remove the image elements, and add-action() to put the image elements back lower down the order. The code goes in functions.php for your child theme.

    It would take a while to write that code and test it, so probably more than you would get via a forum answer. PHP skills or a developer would be needed.
    http://jobs.wordpress.net/

    i see. thanks.

    Fixed. thank you. Now my site is perfect: https://secretofyouth.net/konieccellulitu/

    🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to move Single Product Images to the Left ?’ is closed to new replies.