WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
How to resize thumb & manage sidebar (4 posts)

  1. usmanmohammadi
    Member
    Posted 7 months ago #

    I want to know that how to resize the thumb coz the image actual size 100x100 but thumb show very large size.. sample link below.

    Further, I want to know that how to manage sidebar because the sidebar show after the product.

    Sample Link: http://price-in-pakistan.com/product-category/mobiles/nokia/

    http://wordpress.org/plugins/woocommerce/

  2. ManusH
    Member
    Posted 7 months ago #

    If you are not able to design for yourself, it will be a good start to use WooCommerce compatible themes at the first place.

    In your case, you are using a free theme: Point. ANd in its description, it does not indicate any compatibility. SO, that will mean you have to challenge any incompatibility for yourself.

    Those errors you mentioned can easily be repaired by some css-tricks.

    1) For the first "image" issue; in general product images are used in very large resolutions to show the customers. And the theme modifies its thumbnail to fit into the area. But in your case, you used a really small image, so the theme tries to enlarge it in order to fit it into place.

    My suggestion will be to use a large product image. But if you want to use smaller images, than you can change

    .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { width: 100%; }

    to

    .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { width: auto; }

    Then the images wont be resized to fitt 100% of the width.

    2) I'm not sure of the theme, but it seems that the sidebar is not inside the container div, that is why it displays after the main content area, under the product.

    In order to be side-by-side; main-content must have a (float:left) and the sidebar must have a (float:right) style inside the same div.

    In the other sections of your site, the layout is just as I described, but in that WooCommerce product page, the layout changes and the divs are seperated!

    Maybe you have to edit your WooCommerce integraion!

  3. usmanmohammadi
    Member
    Posted 7 months ago #

    Can you please let me know the file location where I got this code.

    .woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img { width: 100%; }

  4. usmanmohammadi
    Member
    Posted 7 months ago #

    because this code not found in wp-content / plugins / woocommerce / assets / css / woocommerce.css

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.