Return to previous page

Shop page product images need to be rectangular and not square

This topic has 16 replies, 2 voices, and was last updated 9 years, 10 months ago ago by Eva Kemp

amritagill

Participant

February 15, 2015 at 00:00

Hi!

I have product pictures that need to be rectangular (220px by 110px) on the woocommerce Shop page however they are all showing up as squares (220px by 220px) which leaves a huge white space between the product picture and the price/add-to-cart button. I changed the sizing in woocommerce settings to what I needed and also regenerated the thumbnails however this does not change anything. The same issue is happening with the ‘related products’ area on the individual product page.

I did notice that the product image on the individual product page DOES resize to be a rectangular shape (the dimensions i upload it as) and not a square shape.

How can I get the shape of the products on the shop page to automatically take the shape of the images I am uploading (to be rectangular and not square)?

In the private content I have attached the URL.

Please, contact administrator
for this information.

#42417 Copied

15 Answers

amritagill

Participant

February 15, 2015 at 05:28

I added this code below which helped the images when looking at it however it resizes to the big size when you hover over it.

#products-grid .product-image{
height:100px;
}
.product-image .img-wrapper{
height:auto;
}

#42433 Copied

amritagill

Participant

February 15, 2015 at 20:00

now the product sizing issue is only on related products section at the bottom of the individual product pages.

This is the code I added to solve it for the catalog images and hover images. (as well as on the homepage for the recent products shortcode). Just the related products section still has that large white space between the picture and price/add to cart button
#products-grid .product-image{
height:100px;
}

.product-image .img-wrapper{
height:auto;
}

#products-grid .product-image:hover {
height:100px;
}

.product-image:hover .img-wrapper{
height:auto;
}

Please, contact administrator
for this information.

#42467 Copied

Eva Kemp

Support staff

February 16, 2015 at 15:28

Hello,

The link you provided is asking for a password. Please provide us with wp-admin panel credentials.

Thank you.
Regards,
Eva Kemp.

#42630 Copied

amritagill

Participant

February 16, 2015 at 15:53

Sorry about that. It’s attached

Please, contact administrator
for this information.

#42641 Copied
Eva Kemp

Support staff

February 16, 2015 at 20:01
Hello,

Please add this code in custom.css file:
```
.product-slider .product-image {
    height: 180px;
}
.product-slider .product-slide .product-image {
    margin-bottom: 0px;
}
```
To create custom.css you need rename default.custom.css to custom.css in wp-content/themes/blanco directory via FTP and enable it in Blanco – Theme Settings, tick “Enable Custom CSS file”.

– Please add this code in custom.css to change background color for zoom image:
#cloud-zoom-big {background-color: white !important;}

– Unfortunately there is no option to move social icons to the menu but you can try to add them as described in these articles:
http://en.support.wordpress.com/menus/social-links-menu/
http://nathaningram.com/tutorials/easy-social-icons-in-the-wordpress-navigation-menu/
https://wordpress.org/plugins/menu-social-icons/

– Sorry but you have to find some plugins yourself.

– Unfortunately we don’t have such options for “Add to Cart” button to make it scrolled to lower section on a page. Sorry. Single product page is configured by Woocommerce, you can contact them concerning your query.
Thank you.

Regards,
Eva Kemp.
#42752 Copied
amritagill

Participant

February 16, 2015 at 20:04

Thank you! I also noticed on a tablet every individual product page is off. The picture to the left side is normal but the ‘product name, product price and add to cart button” is down the page leaving a huge white space to the right side of the product picture. How can this be fixed?

#42755 Copied

Eva Kemp

Support staff

February 17, 2015 at 18:56

Hello,

Could you please show a screenshot of the issue for better understanding?

Thank you.
Regards,
Eva Kemp.

#43075 Copied

amritagill

Participant

February 17, 2015 at 19:10

Sure the screenshot is in the private section. This is for a regular mac tablet. I believe the 8 inch

Please, contact administrator
for this information.

#43081 Copied
Eva Kemp

Support staff

February 17, 2015 at 22:58
Hello,

Please add this code in custom.css file:
```
@media only screen and (max-width: 959px) and (min-width: 768px) {
#product-page.product_layout_horizontal .product-shop {
width: 300px;
}}
```
Thank you.
Regards,
Eva Kemp.
#43125 Copied
amritagill

Participant

February 18, 2015 at 00:05

That code didn’t work.. it is on a normal sized iPad

#43152 Copied
Eva Kemp

Support staff

February 18, 2015 at 14:37
Hello,

Please try to add this code:
```
@media (max-width: 768px) {
#product-page.product_layout_horizontal .product-shop {
width: 300px !important;
}}
```
Thank you.
Regards,
Eva Kemp.
#43339 Copied
amritagill

Participant

February 18, 2015 at 16:58

That still doesn’t work, especially on the individual product pages.

All on a desktop or laptop when you make the browser window screen smaller after about 700px the entire website goes blank.

Please, contact administrator
for this information.

#43438 Copied

Eva Kemp

Support staff

February 18, 2015 at 20:35

Hello,

I’ve edited the code.
Please check the site on mobile devices now.
When you resize browser window you need reload a page after that.

Thank you.
Regards,
Eva Kemp.

#43527 Copied

amritagill

Participant

February 19, 2015 at 17:42

Thank you so much for your help so far. I have one more question. I downloaded a woocommerce plugin called ‘ajax navigation’ which is for the sidebar of the catalog page (URL attached) this plugin doesn’t go perfectly into the sidebar and if you scroll all the way down it is at the bottom of the page instead of to the left of the products. The plugin developer told me that it is an issue with the theme. Is there any code or css we can use to get these widgets to appear in the sidebar correctly?

Please, contact administrator
for this information.

#43795 Copied

Eva Kemp

Support staff

February 19, 2015 at 20:41

Hello,

Unfortunately there is a conflict between our theme and “WooCommerce Advanced Ajax Layered Navigation” plugin. You have to disable it.
Sorry.

Regards,
Eva Kemp.

#43844 Copied
Tagged: rectangular images, seo friendly, shop page product images, square images, woocommerce templates, wordpress
Viewing 16 results - 1 through 16 (of 16 total)