≡ Menu

WooCommerce Product Images

img

How to: Edit Product Images for an eCommerce Site, Change the Size of WooCommerce Cart Thumbnails and More

Editing product images for an eCommerce site can be a frustrating task.  It can be especially annoying if you have a large product catalog with varying shapes and sizes.  In this tutorial, I’ll show you the process that I use when editing product images so that they appear as uniform as possible on every page of the eCommerce site.

In addition to general product image editing, I’ll show you how to do a couple more specific things that are related to WooCommerce images.  Specifically, you’ll see how easy it is to adjust the size of the WooCommerce Cart page product thumbnail images by using the “Custom CSS” text box in the WordPress admin.  You’ll also learn how to increase the size of the homepage “Featured Products” and “Recent Products” images for the WooStore theme so let’s get started.

Use a Product Template Image to Make your eCommerce Site look Uniform

From my experience, using a product template image is the best way to ensure that images appear uniform on your eCommerce site.  The product image template cediting ecommerce product images WooCommerce Product Imagesan be any dimensions you choose and each original product image should be edited to fit within the template.  Use the same image template for all of your products.

Photoshop is the image editing program used in the tutorial video below.  There are many alternatives to Photoshop so if you don’t have it, no worries.  Give Gimp a try.  It’s an open source (free) image manipulation program that will work great for editing eCommerce product images.  Just Google “gimp download” and you’ll have all the tools you need to do this.

Watch our video below to learn how to edit product images for an eCommerce site

Increase Size of WooCommerce Cart Page Product Thumbnail Images

Need to adjust the size of the product thumbnail images that appear on the WooCommerce Cart page?  If so, changing the size of the Shopping Cart page product thumbnail images is as easy as doing the following…

In the WordPress admin go to WooStore > Theme Options > General Settings > Display Options > copy and paste the CSS below into the “Custom CSS” text box > change “32px” to any number > Save All Changes

table.cart img { width:32px; height: auto; padding:0; }

woocommerce cart thumbnail images WooCommerce Product Images

Important Note:  WooStore is the theme used in our tutorial video.  The same CSS should work with other WooCommerce specific themes such as; Mystile, Artificer, Shelflife, Emporium, Argentum, Peddlar, Superstore, Coquette and Wootique.

Watch our video below to learn how easy it is to change the size of the WooCommerce Cart page product thumbnail images

Increase Size of WooStore “Featured Products” and “Recent Products” Images

Adjusting the size of the WooStore theme “Featured Products” and “Recent Products” homepage thumbnail images is really easy.  To change the size of the Featured Product images log into the WordPress admin and go to…

WooStore > Theme Options > General Settings > Display Options > copy and paste the CSS below into the “Custom CSS” text box > change “180px” to any number to change the size of the Featured Products > Save All Changes

#featured-products.fp-slider .jcarousel-item img { width:180px; height: auto; margin-bottom:10px; }

woostore featured products homepage images WooCommerce Product Images

To make the Recent Products thumbnail images larger or smaller use the CSS below…

ul.products img { width:175px; height: auto; float: left; margin:0 12px 0 0; padding:0; border:0; background: none; }

Just change “175px” to any number to change the size of the Recent Products.

woostore recent products thumbnail images WooCommerce Product Images

Important Note:  The featured products and recent products CSS above was only used with the WooStore theme.  It has not been tested with other themes but feel free to do so.

Our video below will show you how to change the size of the “Featured Products” and “Recent Products” images on the homepage of the WooStore theme

Thanks for taking time to read this tutorial on eCommerce product images.  If you need help adjusting image sizes for themes other than WooStore, let me know by posting a comment below in the Upload WP Community Forums.  For more information on Woocommerce product images check out our tutorial on… WooStore Product Setup.

Teddy Triton

I'm a blogger and the founder of UploadWP.com. Upload WP was originally created as a training tool for my Flippa.com clients. Having bought and sold a large number of WordPress sites on Flippa, I needed an effective and efficient way to teach people how to make updates to their new sites. Upload WP was the answer and the site has since grown into a leading WordPress Tutorials destination. I enjoy helping people solve their WordPress related issues. If you have any questions or a WP issues that you need help with, please leave a comment below and we'll do our best to help.

View all contributions by

{ 76 comments… add one }

  • Shereen June 26, 2013, 11:22 am

    Hi there – your tutorials are excellent. However, I have two questions:

    1. How I can get rid of a 'Sale!' sign that hangs over product thumbnails and on the products page?]
    2. How can I resize the image on the product image page.

    Reply
    • Teddy Triton

      Teddy Triton June 28, 2013, 1:44 pm

      Hi Shereen,

      Thanks for letting me know our WooCommerce tutorials have been helpful. To get rid of the Sale sign that hangs above your product images simply enter the product price in the "Regular Price" field. If you enter the price of the item in the "Sale Price" field it will trigger that Sale sign so just use the Regular Price field.

      In terms of resizing the image on the product detail page goes I'll have to look into that further. I'll try and do that tonight and I'll update this comment with the custom CSS needed.

      Thanks for your support.

      Adam

      Reply
    • Teddy Triton

      Teddy Triton July 2, 2013, 10:25 am

      Hi Shereen,

      Here's how to adjust the size of the WooCommerce WooStore product detail page main image…

      In the WordPress admin go to WooStore > Theme Options > Display Options > and in the Custom CSS box paste the following…

      .single-product .product .images img { width:200px; height: auto; padding: 9px; border:1px solid #e6e6e6; margin-bottom:12px; }

      Change the number "200" to any value to adjust the size of the product detail page image. I've found 225px to be a good number. It makes the image larger without having it hit the product short description text. Let me know if this helps.

      Adam

      Reply
  • Teddy Triton

    Teddy Triton July 3, 2013, 11:28 am

    To change the size of the main product image on the Product Detail page of the Mystile theme do the following…

    In the WordPress admin go to Mystile > Theme Options > General Settings > Display Options > paste the CSS below into the "Custom CSS" text box

    img {
    vertical-align: bottom;
    max-width: 100%;
    height: auto;

    To reduce the size of the product detail page image change "100%" to a smaller number.

    Reply
  • Teddy Triton

    Teddy Triton July 3, 2013, 5:45 pm

    Watch our tutorial video below to learn how to solve the issue of Featured Products showing up as FREE on the homepage of the WooStore theme…

    http://youtu.be/AXAWuiTzYQg

    Copy and Paste the following CSS… In the WordPress admin go to… WooStore > Theme Options > Display Options > paste in the "Custom CSS" box

    #featured-products.fp-slider .jcarousel-item .price {
    color: #222222;
    display: none;
    float: none !important;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
    display:none
    }

    Reply
  • Cindy July 11, 2013, 10:56 am

    I am currently building my woocommerce website and am having a real problem with fuzzy images in the product pages…I have tried the fixes in the WordPress forums, (dropping them in the custom css area of my themes options panel). I am wanting to keep the pinboard theme that I am using, and it seems that others have been able to get it all to work on pinboard. I am really new to css, and am trying to not go into my theme editor unless someone is "holding my hand" so to speak!

    Thank you for any help you can offer, or if you know where the answer is, please reply with a link to it…

    Reply
    • Teddy Triton

      Teddy Triton July 11, 2013, 9:42 pm

      Hi Cindy – Thanks for your question and huge complements on you're site. I see what you're referring to in terms of the product page images displaying a bit blurry. I've unfortunately not yet had a chance to work on the pinboard theme but my bet is that one of our readers has. So if anyone out there knows of a solution to this blurry image issue with the pinboard theme please share it with us.

      You'll be helping many people that are trying to find a solution to this issue.

      Thanks,

      Adam

      Reply
    • Lauren Vartanian November 5, 2013, 5:41 pm

      Cindy or Teddy,

      Were you able to get any help on the "blurry image" issue? Not specific to your template "Pinboard" but in general with Woo Commerce. My images look blurrier by the day. Ugh !
      Any guidance would be appreciated.

      Reply
  • Michelle July 20, 2013, 7:08 pm

    Hi Teddy
    Thanks so much for your excellent videos, I have been following them with the set up of my site and they have been simple straightforward and really helpful. Can you tell me the CSS to increase the size of my product thumbnails as they appear on the single product page (I am using Woo Superstore) & these thumbs default at 59x59px which is too small. I can't find the answer at woo support. Many thanks in advance
    Michelle

    Reply
    • Teddy Triton

      Teddy Triton July 22, 2013, 12:55 pm

      Hi Michelle – Thanks for letting me know that our WooCommerce tutorials have helped in building your site. I do not yet have the Superstore theme, however, I just tested the CSS below with the WooStore theme and it worked in terms of making the thumbnail images on the Product Detail page larger. Most likely, that same CSS will work with the SuperStore theme as well. Here it is…

      .single-product .product .images .thumbnails img { padding:0; border:0; width:30.75%; float: left; margin-right:3.8%; margin-bottom:8px; }

      Paste that into the "Custom CSS" box in the WordPress admin and change… "30.75" to a larger number to make the Product Detail page thumbnail images larger.

      I know it works for the WooStore theme but let me know if it works for the Superstore theme as well. Thanks,

      Adam

      Reply
  • Jan August 2, 2013, 1:06 am

    Hi,
    Thanks for great videos. I am new to WooCommerce & WordPress. I need help to set up my product pages. As an example I have 3 categories: Men, Women, Children. Under Men Category I want to sell shirt in 10 colors, t- shirt in 5 colors, hat in 5 colors. Under Women Category I want to sell Dress in 6 colors, Blouse in 5 colors, Shoes in 6 colors. Under Children I want to sell Shorts in 4 colors, Hat in 10 colors, T-Shirts in 8 colors. Every single item has its own picture and I want each picture to be visible. For Example in Men Category – when you go to Shirt I want all 10 colors to be visible with the name of that color as he product to purchase. Can you suggest the best way to set this up?
    Thanks for the help,
    Jan

    Reply
    • Teddy Triton

      Teddy Triton August 5, 2013, 7:44 am

      Hi Jan,

      Thanks for contacting me and for your question. I'm glad to hear you're thinking for moving your site to WordPress and WooCommerce. From your description, it sounds like using the WooCommerce Grouped Product option might work out the best for your site. Please take a few minutes to watch my tutorial on setting up Groped Products and let me know if you think that will work for your specific site. Here's the tutorial video on grouped products…

      http://youtu.be/3JKZp0QWX0Y

      Reply
  • Teddy Triton

    Teddy Triton August 6, 2013, 2:01 pm

    If you're looking to increase or decrease the font size on the Product Detail page for the WooStore theme then use the following custom CSS…

    p {margin: 0; font:12px/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif serif; }

    Copy the CSS above and in your WordPress admin go to… WooStore > Theme Options > General Settings > Display Options > paste the CSS above in the "Custom CSS" text box and change "12px" to any other number.

    Reply
  • Tom August 13, 2013, 9:27 am

    Hi Teddy,

    Great video instruction for the shopping cart page! Im still looking for the CSS code to enlarge the picture on the shop page.

    Reply
    • Teddy Triton

      Teddy Triton August 13, 2013, 11:08 am

      Hi Tom,

      Here's the CSS to increase / decrease the size of the product thumbnail images on the WooCommerce Shop page…

      ul.products img { width:90px; height: auto; float: left; margin:0 12px 0 0; padding:0; border:0; background: none; }

      Just change the "90px" to any other number to change the size of the Shop page images.

      Reply
  • Mohit Agrawal August 13, 2013, 9:54 am

    Thanks alot uploadwp.com, Your blog is proven very very helpful to me……..Thanks

    Reply
    • Teddy Triton

      Teddy Triton August 13, 2013, 11:01 am

      You're welcome Mohit – glad to hear to has been helpful.

      Reply
  • kylie August 16, 2013, 3:34 pm

    Hi I have found your info a great help and am just wanting to know if any one knows how to reduce the product image size on the detail page in canvas theme. I have tried for a couple of days now no success. Thanks again for all the info!

    Reply
  • Dennis August 28, 2013, 9:38 am

    Hi Teddy – this post and others have helped a TON! Thank you! I'm using Wootique theme and am having a difficult time re-sizing the following images:
    1. Recent Products on the home page below the slider
    2. Related Products on the single product page

    All other CSS mods above seem to be working perfect! :-)

    You provided this CSS for the recent products image, however it doesn't seem to like Wootique…? ul.products img { width:175px; height: auto; float: left; margin:0 12px 0 0; padding:0; border:0; background: none; }

    Any help here would be great!

    ~Dennis

    Reply
    • Teddy Triton

      Teddy Triton August 29, 2013, 7:05 am

      Hi Dennis,

      Thanks for the complements on our WordPress tutorials! The custom CSS to change the size of "Recent Products" on the homepage of the Wootique theme is as follows…

      ul.products a img { width:100%; height: auto; padding:0; border:0; background: #fff; border-radius:3px; -webkit-box-shadow:0 0 3px rgba(0,0,0,0.25); -moz-box-shadow:0 0 3px rgba(0,0,0,0.25); box-shadow:0 0 3px rgba(0,0,0,0.25); -webkit-transition: all ease-in-out .2s; }

      Just change "width:100%" to any other number to change the size. The same custom CSS changes the size of the "Recent Products" thumbnail images on the product pages. Let me know if this helps.

      Adam

      Reply
      • Dennis September 5, 2013, 8:57 pm

        Thanks! That worked perfectly.

        Dennis

        Reply
  • kylie wells September 12, 2013, 4:30 am

    Hoping you can help using woothemes canvas and wordpress I have seen many posts and discussions about images on ecommerce woo but I am so confused I try and change sizes but seems not to make any difference there seems to be a couple of ways to manage images size and I am not sue what rules what my site it a trophies so we have a lot of images or hope to but I can not seem to get the images on the cricket page to show at a reasonable size and they are inconsistent I have three that I have loaded but the fourth is larger they really need to be much smaller maybe half an consistent in size I have watch many of your vidios and they are great I have never ventured down this track but I am in for the long hall if you can offer any advise I would appreciate it

    Reply
    • Teddy Triton

      Teddy Triton September 13, 2013, 7:28 am

      Hi Kylie,

      Thanks for your question on product images… The best way that I know of to create consistent product images is to use a product image template. Please take a few minutes to watch our video on creating a template for your product images… http://youtu.be/_sMpXfh91Mo

      Let me know if this helps.

      Reply
  • Lee September 17, 2013, 12:04 pm

    Hi Teddy,
    I followed your instructions in the tutorial and video above for increasing the size of the featured products images on my homepage but it didn't work. Also, the recent products don't show up at all even though I have checked that setting in my homepage display options. Any help would be appreciated! Thank you.

    Reply
    • Teddy Triton

      Teddy Triton September 19, 2013, 7:40 am

      Hi Lee – I'd be happy to take a closer look at it if want to create a wp admin user for me. You can send it via the Contact form on uploadwp.com – that goes to my email and from there I'll try to figure out why the custom CSS isn't working for you. Thanks

      Reply
  • Todd October 1, 2013, 7:18 pm

    I really, really hope you can help. We have tried everything and nothing has worked. We are attempting to build a WP WooCommerce site using Xing WP template and Woocommerce. The images we have been putting on the site are cut on the top and the bottom in the image box on the products page on the actual site. We have tried every possible variation of size, etc. and we cannot get the image to fit in the box. What we really need to do is resize the box that's on the page – it is simply a square box, we need a rectangular box – la box that a book would fit in (something along the lines of 300w and 450H). How can we change the image boxes on the products page to make them rectangular so our images of books will look correct on the page?

    Reply
    • Teddy Triton

      Teddy Triton October 2, 2013, 4:22 pm

      Hi Todd,

      Have you tried using the product template image method that is demonstrated in this tutorial? Basically, you decide on a standard product image size and use it for all product images. You then take your original product images, open them in a program like Photoshop, and re-size them to fit within the product template image…

      Looking at the Xing theme demo site, it appears that they use a product template image with dimensions of… 370 x 404 pixels

      So you you were to use 370×404 as the product image template and then all of your original product images to fit in that template they should appear perfect on the site. Have you tried doing that yet? Let me know. It most likely is possible to change the actual default size of the featured product image at the product detail level of the Xing theme but using the product image template method is much easier.

      Reply
  • Tom October 25, 2013, 4:52 am

    I have been building my online store with the Wootique and have found many answers that has just not been readily found online. My question is I would like to change the font and make bold my prices on my product page. Everything else I am really happy with but the price is just so small. Thanks for all your hard work I am really glad I found you on you tube.
    Tom

    Reply
    • Teddy Triton

      Teddy Triton October 27, 2013, 11:51 am

      Hi Tom,

      I'm glad to hear that our WooCommerce tutorials have helped in building your site, tomsfoolerychainmailejewelry.com. Your bracelets are fantastic. To answer your question on making the Price bold / stand out more on the product detial page of the Wootique theme…

      The custom CSS you need to make the Wootique single product page Price bold is…

      .single-product .product .summary .price { color:#222;font-weight: bold; padding:10px 0; }

      Simply copy the custom CSS above and in your WordPress admin go to… Wootique > Theme Options > General Settings and scroll down to the Custom CSS box > paste the CSS in and Save All Changes

      Thanks for your question and complements on Upload WP!

      Reply
  • murali October 31, 2013, 10:16 am

    Can any one help with my cart which is showing empty after "checking out"
    Here is the link
    http://www.charminarbangles.in/store/cart/

    I used woo commerce plugin after uninstalling eshop plugin.
    Please help

    Reply
  • Sandra November 5, 2013, 11:22 am

    Hi Teddy,
    Thanks for your excellent videos, I have been following them with the set up of my site. Can you please tell me the CSS code to increase the size of images on the shop page. I'm having a really hard time to resize, it's just too small.
    My theme is Mystile

    Thanks,
    Sandra

    Reply
    • Teddy Triton

      Teddy Triton November 12, 2013, 1:16 pm

      Hi Sandra,

      Here's the custom CSS to change the product thumbnail images on the WooCommerce /Shop page. In the WordPress admin go to Mystile > Theme Options > General Settings > Display Options > in the Custom CSS box paste the following…

      ul.products li.product img {
      width: 300px;
      height: 220px;
      }

      Change "300px" and "220" pixels to a larger number to increase the size of the Shop page images. Let me know if this helps.

      Reply
  • Jimmy November 25, 2013, 9:29 pm

    Thank Teddy on all these tutorial and it helps alot for me to set up my website. But then i still facing few problem on the image.

    1st, Is there any way to enhance my image quality in the slider? i set the slide size to 960×250. The original image size that i use is 720×336, but the out come was not so good in term of quality.

    second problem is when i click in to the product page, the image in the product gallery is super tiny but when i click on it, it looks good.
    http://www.grapstone.com/product/grimms-earth-2/#!prettyPhoto

    Can you help me on this?

    Thank you very much!!

    Reply
    • Teddy Triton

      Teddy Triton November 26, 2013, 5:03 pm

      Hi Jimmy,

      To make the homepage slider images clearer / more sharp start with a larger original image. So since you set the slide size to 960×250 you need to make sure that the images you use for the slides are as large or larger than 960×250 before you upload them. If they are smaller, they will get stretched and appear blurry in the slider. I'm not sure why the thumbnail images on the product detail page are so small, that is strange. Are you using a plugin that might be causing an issue with the theme?

      Reply
  • Ben E November 27, 2013, 12:11 pm

    I'm working on a wp website that will sell window treatment. I have a large number of products to upload to the site with so many of them having attributes and variations. What is the easiest way to accomplish that as well as keeping the products updated.

    In addition to the attributes and variation, each product has a number of colour variations some over 100. How can I upload the colour swatches and attach them to the products.

    Reply
    • Teddy Triton

      Teddy Triton November 27, 2013, 1:54 pm

      Hi Ben,

      Take a few minutes to review the "Import Products from any XML or CSV to WooCommerce" plugin extension. Let me know if that plugin will help make the process of bulk uploading a large number of variable products to your WP site easier. Here' the link to the WooCommerce add-on for WP All import…

      http://wordpress.org/plugins/woocommerce-xml-csv-product-import/

      Reply
  • Karog November 29, 2013, 6:36 pm

    Hi Teddy!

    I have bought a nice theme with woocommerce and are struggling to get the product image with product detail and price look good. Looked great at first on simple products but when i made some variable products with attributes it turned out bad. Not much feedback at the theme forum, therefor I am posting here. Need to get the site online in a couple of days. Would make an admin user for you if you could have a look at it.

    Kind regards
    Karog
    frustrated

    Reply
    • Teddy Triton

      Teddy Triton November 30, 2013, 8:52 am

      Hi Karog,

      Let me know what theme you're using. And if you want to create a wp admin user that's cool as well. Just use the contact form to send me the info. Thanks

      Reply
      • Karog November 30, 2013, 4:58 pm

        Hi Teddy,

        That´s nice of you. Shall I just give you the login details here, in a comment?

        Karog

        Reply
        • Teddy Triton

          Teddy Triton December 1, 2013, 10:19 am

          Hey Karog,

          Please use the contact form to send that. Thanks

          Reply
  • Bruce January 4, 2014, 8:15 am

    Thanks so much for the help you provide. It means so much to so many.

    My question is how do you change the featured image from the home/shop page to something different on the product page? I'm creating a T-shirt site where I want just the graphic image to show up on the Home/Shop pages. When someone clicks on that image, I want the featured image on the product page to be an image of someone wearing a T-shirt that has the graphic image on it. The gallery images on that product page would show other variations of the T-shirt and would include the image of the graphic as well.

    Does that make sense?

    Thanks
    Bruce

    Reply
    • Teddy Triton

      Teddy Triton January 5, 2014, 1:22 pm

      Hi Bruce,

      Thanks for the positive feedback. Your question makes total sense and I can see how that setup would be effective. Having your product thumbnails that display on the homepage and shop pages be different than the featured image on the WooCommerce single product page is a great idea for a t-shirt site. The WooCommerce Product Image Flipper plugin will get you close but is not exactly what you're looking for. Please post your question in our new Upload WP Community Forums here… http://uploadwp.com/community/index.php?forums/woocommerce-product-setup.5/

      I'll work on finding a good solution and we'll ask for help from the Upload WP community. Thanks

      Reply
      • Bruce January 6, 2014, 7:39 am

        Thanks, Teddy, for the hint on the Product Image Flipper. You're right in that it won't be a solution, but it may help. I'll give it a try.

        I signed up for the new Forum but am not able to post. Here is the message I receive ->
        (You have insufficient privileges to post here.)

        Bruce

        Reply
        • Teddy Triton

          Teddy Triton January 6, 2014, 8:18 am

          Hey Bruce,

          I went ahead and manually approved your account for the Upload WP Community Forums so you should be able to post new threads and comments now.

          Reply
  • Robert January 13, 2014, 5:29 am

    Hi Teddy,
    thank you for your tutorial, i've found it very helpful.
    Maybe i was guessing if you can help me with a problem i have.

    I have to make a sign like the "Onsale", in the thumbs, for a specific category (the category Vintage). Do you know how to do it, or if there's a plugin that can make it?

    Thank you very much, it's very important for me.
    Robert

    Reply
  • Tom Oberbichler January 20, 2014, 5:47 am

    Thanks for another great and very helpful Video!

    Keep rocking!

    Reply
  • Stevie B January 25, 2014, 12:42 pm

    What a great thread!

    I'm building a woocommerce (superstore) online shop and I'm having serious issues with sizing and clarity. By all the chatter online about this I'm not alone!

    Anyway, after getting the images to look OK I dumped in some code in the css box and trashed my slider… Yikes!

    Now the slide images are the size of postage stamps and I can't get them back!

    …—… …—… …—… (That's Morse code for SOS)

    Reply
    • Teddy Triton

      Teddy Triton January 28, 2014, 7:40 am

      Hi Stevie,

      Thanks for the complements on our tutorials. If you have not already, please check out the following thread from our WooCommerce Forums… http://uploadwp.com/community/index.php?threads/woocommerce-product-images.6/

      If that doesn't help solve the issue, then feel free to start a new thread in the forums that highlights the issue. Please provide as much detail as possible and we'll do our best to help. Thanks

      Reply
  • David February 13, 2014, 10:29 pm

    Teddy,

    I installed Woocommerce 2.1 and lost the customizations on my site. I was able to roll back to 2.0, thanks to a backup, but now, my images won't align on the category shop pages. Can you tell the css that will align left my images and also set the number of columns to 3. Any help is greatly appreciated.

    http://shooflyshoes.com/product-category/pump

    Reply
  • Janet Stephens February 19, 2014, 10:43 am

    Just registered for the forum and hoping to find some answers as well. This had fixed the product image size until the recent woocommerce 2.1. So glad I'm not the only one having problems and looking forward to finding a solution.
    Thank you for what you do!

    Reply
  • Andrei February 20, 2014, 4:59 am

    Hi Teddy,

    Thanks a lot for the tutorial, very useful.
    Please help me with a problem with woocommerce shortcode featured products.
    The theme is Artificer theme and I use static homepage. In it I put featured products shortcode:

    [featured_products per_page = "4" columns = "4" orderby = "date" order = "desc"]

    The point is that no matter what I tried fail to make the images smaller to arrange as they should.
    Can you help me with a suggestion about what I should do?

    Website address is http://www.ustensilecofetarie.ro

    Thanks in advance

    Reply
    • Teddy Triton

      Teddy Triton February 21, 2014, 7:10 am

      Hi Andrei,

      Thanks for your question on WooCommerce shortcodes and for the positive feedback. To better help you and others that have the same question, please post in the Upload WP Community Forums. Specifically, please join the forum and post a new thread in our "WooCommerce Shortcodes" forum here… http://uploadwp.com/community/index.php?forums/woocommerce-shortcodes.18/

      Thanks and I'll see you in the forums.

      Reply
  • Andria April 6, 2014, 10:33 pm

    Hi Teddy! I'm using the Sentient theme for my jewelry and accessory store and I am trying to change the size of the recent products on the home page and the thumbnail size on the shop page. Do you have any suggestions?

    Reply
    • Teddy Triton

      Teddy Triton April 7, 2014, 11:09 am

      Thanks for your question on changing the size of recent products on the homepage of the Sentient theme. Have you had a chance to checkout our tutorial on Modifying the size of Woostore theme featured and recent product images? If not, here's the link to view our video… http://youtu.be/lNJJJP1ja5k

      I know it's not the Sentient theme but it just might work. If not, then please go to the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      Reply
  • Jonathan April 15, 2014, 11:32 pm

    Hey I'm having some trouble with the product variation images. I have uploaded individual images to my produce variations but when I go to the actual product page and select the variations the image doesn't change accordingly. Is what I'm explaining even a possibility with Woocommerce? If not what is the point of having product variation images.

    Thanks

    Reply
    • Teddy Triton

      Teddy Triton April 16, 2014, 10:09 am

      Hi Jonathan,

      There are a number of extensions for woocommerce that will give you the variation images functionality that you're looking for. I believe we've mentioned a few in the Upload WP Community forums so please check there first… http://uploadwp.com/community/index.php

      If you don't find the answer, please feel free to join the forums and start a new thread. We have many active members that will point you in the right direction. Thanks

      Reply
  • ilyani May 6, 2014, 4:16 am

    Hello!
    At single product page, is there any way to disable lightbox when small product images (thumbnails) are clicked? Somehow I wish they can be enlarged/displayed at the large box (which can be dynamic on product variation only). Pls help! Thanks!!

    Reply
    • Teddy Triton

      Teddy Triton May 6, 2014, 12:34 pm

      Hi ilyani,

      There most likely is a way to disable lightbox at the product detail level in WooCommerce. Please check the Upload WP Community Forums here… http://uploadwp.com/community/index.php

      Most likely you'll find the answer there. If not, please feel free to join and start a new thread. We have many members that are well versed in WordPress and WooCommerce and they're more than willing to help.

      Reply
  • Jeremy May 23, 2014, 11:30 pm

    Hey, I'm building a website using the simplicity wootheme for an ecommerce store I have started with a neurologist. I am very new to wordpress and css, etc but have managed to pick up enough to get by. I am curious how I can move my featured products above the testimonials slider on my page. Please help!!

    Reply
  • Kate July 12, 2014, 8:43 pm

    Hi, Teddy Triton

    I'm building a website using the WooCommerce Wootique. In the product detail page, after I click the image, it will have a popup window to show the larger of that image. Is there CSS code to make the image show as 100% of original size instead of clicking on the top left corner?

    Reply
  • Joe July 15, 2014, 10:58 am

    Hi teddy thanks for the great job and keep it up, am buidling my site using mystile theme and i have a problem with home page products images they are just too small av tried all the sloutions posted above but non is working,also i have alot of white space above and below my site kindly assist

    Reply
  • Mark August 10, 2014, 1:04 pm

    Hi Teddy I'm using artificer theme. I would like to add rollover or zoom feature. Do you have a video on that? And also, what is the best pixel size for the two images to accomplish that?

    Reply
  • Colin Nixon October 5, 2014, 6:02 am

    Hi, firstly a big thank you for creating and posting your videos free for everyone to use. They have been invaluable in building my first ecommerce site. My question is this, is it possible to remove the add to cart button, price and title from the WooStore theme home page Featured Products? I would like the end user to see only a clickable image.

    Reply
  • Frano October 18, 2014, 9:12 am

    Hi there, great article! I would like to make the product images on my /store page bigger but they don’t get bigger, no mather what size i add to the custom code:

    ul.products li.product img {
    width: 400px;
    height: 400px;
    }

    I think this is because there isn’t any more space available so i can do thing:

    1: make smaller margins
    2: make a less column

    Can you please assist me on this? I think there are many people with this same problem…

    Reply
  • Doug JAnchik October 27, 2014, 12:09 pm

    Hi Teddy, How do I show small thumbnails under the featured images on a category page. We are selling shirts and want the customer to see that the shirt comes in more than one color with out clicking to the product page. We want the customer to see this in the category page ????????

    Thank you

    Reply
  • Jade November 4, 2014, 10:45 pm

    Hi Teddy, thank you for all this incredibly valuable information! It’s saved me many times from pulling my hair out :) I have a question: From my shop page i have 4 categories, then it takes you to a few sub categories and under those it takes you to the products. When I click on 1 product (product detail page I guess?) the image is huge! I need those images to be smaller. I re-sized the single product image setting in woocommerce from 500 to 300 under and regenerated all the images. Nothing changed. I added the first code on this thread where you responded to Shereen. That worked, but it made my thumbnails on the subcategories page smaller as well. Just need to the product detail image to decrease. Do you have any suggestions?

    Thank you!!

    Reply

Leave a Comment