Title: Question about Layout
Last modified: August 22, 2016

---

# Question about Layout

 *  [montanagrafix](https://wordpress.org/support/users/montanagrafix/)
 * (@montanagrafix)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/question-about-layout/)
 * I recently installed WooCommerce on one of my websites and I am curious if there
   is any way to change how many products are showing per “page” on the shop page
   here: [http://review.montanagrafix.com/mthope/shop/](http://review.montanagrafix.com/mthope/shop/)
 * Right now it is set to 4, but I would like to change that to 12.
 * Also, how do change the size of the images on the product details page here? 
   They are huge, lol!
 * [http://review.montanagrafix.com/mthope/product/10-thermos/](http://review.montanagrafix.com/mthope/product/10-thermos/)
 * Any information you may have would be greatly appreciated. 🙂
 * [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/plugins/woocommerce/)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/question-about-layout/#post-5739074)
 * First, make a child theme so that the following customisation is not lost during
   any theme update.
    [http://codex.wordpress.org/Child_Themes](http://codex.wordpress.org/Child_Themes)
 * Put the following code in functions.php for the child theme:
    [http://docs.woothemes.com/document/change-number-of-products-displayed-per-page/](http://docs.woothemes.com/document/change-number-of-products-displayed-per-page/)
 * Displayed image sizes are governed by your theme, but can be made smaller with
   some custom css:
 *     ```
       .woocommerce #content div.product div.images,
       .woocommerce div.product div.images,
       .woocommerce-page #content div.product div.images,
       .woocommerce-page div.product div.images
       {width:40%}
       .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:56%}
       ```
   
 * The current split between image and summary is 48% / 48%.
 * Your product image thumbnails are a bit small so they get a little blurry when
   enlarged to fit the theme, even with the reduced size above. Set image sizes 
   at Admin page > WooCommerce > Settings > Products tab. 468px with above 40% css.
   After a change, regenerate your thumbnails:
    [https://wordpress.org/plugins/regenerate-thumbnails/](https://wordpress.org/plugins/regenerate-thumbnails/)
 *  Thread Starter [montanagrafix](https://wordpress.org/support/users/montanagrafix/)
 * (@montanagrafix)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/question-about-layout/#post-5739128)
 * Thank you so much for your reply lorro. Everything worked perfectly, however 
   it did not change anything on the product detail page with the “Related Products”.
   Do you know of any way to change it to show like 4 or 5 related products in that
   area instead of 2 or is that based upon my theme style as well? Thank you in 
   advance for your time.
 *  [Peter Lawrenson](https://wordpress.org/support/users/lorro/)
 * (@lorro)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/question-about-layout/#post-5739135)
 * Changing the number of related products may depend on your theme to some degree.
   Try this code in functions.php for your child theme.
    [http://docs.woothemes.com/document/change-number-of-related-products-output/](http://docs.woothemes.com/document/change-number-of-related-products-output/)
 * To get them to fit, try this in your custom css:
 *     ```
       .woocommerce .related ul li.product,
       .woocommerce .related ul.products li.product,
       .woocommerce .upsells.products ul li.product,
       .woocommerce .upsells.products ul.products li.product,
       .woocommerce-page .related ul li.product, .woocommerce-page
       .related ul.products li.product, .woocommerce-page
       .upsells.products ul li.product, .woocommerce-page
       .upsells.products ul.products li.product
       {width: 21%}
       ```
   
 * Experiment with the 21% value a bit.
 *  Thread Starter [montanagrafix](https://wordpress.org/support/users/montanagrafix/)
 * (@montanagrafix)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/question-about-layout/#post-5739299)
 * Thank you so much lorro, that worked perfectly! I truly appreciate your advice
   and help on this project. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Question about Layout’ is closed to new replies.

 * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504)
 * [WooCommerce](https://wordpress.org/plugins/woocommerce/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/woocommerce/)
 * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/)

## Tags

 * [layout](https://wordpress.org/support/topic-tag/layout/)

 * 4 replies
 * 2 participants
 * Last reply from: [montanagrafix](https://wordpress.org/support/users/montanagrafix/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/question-about-layout/#post-5739299)
 * Status: not resolved