Support » Plugin: WooCommerce » Image Size in Slider

  • Hi there.
    I’m try to create a uniform image size for the products in my woocommerce sliders.
    Please see below under “Check Our Latest Products.”

    I know the length won’t be 100% even since the amount of text varies…but Is there a way to make them uniform?


Viewing 3 replies - 1 through 3 (of 3 total)
  • How about overwriting the CSS?

    Look for this class:
    .product-image .front-image img
    .product-image .back-image img

    Change the width value from auto to what px you need.

    Just be aware, all your images are different heights, so unless you are going to have a fixed height and the image sits inside vertically, you won’t get it lining up nicely 😉

    Thanks for the reply…I’m new at this…Can you please tell me which file in wordpress I am looking to update?

    The easiest way is to:
    1. Create a new file in your theme called app.css
    2. Call in the css file in your head
    3. Start writing CSS in the file.

    For example, you can write:
    .product-image .front-image img { width: 200px !important; }

    The !important will overwrite the width value of your theme with a new value.

    A great app to write CSS is Coda2 from Panic. I started using Dreamweaver in the late 90s, and switched to Coda years back. It’s got brilliant CSS libraries which are easy to learn and play with 😉

    Another good tip, is to use Google Chrome. Right click on the image to Inspect Element. In the developer tools you’ll see a window bottom right where you can play with the CSS to get the right measurements. I use this alot of the time to measure up what I need, and then cut and paste over in to my app.css file in Coda2. Just remember not to refresh or click links in the page in Chrome, otherwise you’ll lose the CSS changes you are making.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Image Size in Slider’ is closed to new replies.