WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Image Size in Slider (4 posts)

  1. davidjoshuae
    Member
    Posted 5 months ago #

    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?

    Thanks

    thetoynation.com

  2. pacificshack
    Member
    Posted 5 months ago #

    How about overwriting the CSS?

    Look for this class:
    .product-image .front-image img
    and
    .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 ;)

  3. davidjoshuae
    Member
    Posted 5 months ago #

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

  4. pacificshack
    Member
    Posted 5 months ago #

    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.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.