Return to previous page

How to make WIDE layout and make Bigger Catalogue images?

This topic has 17 replies, 3 voices, and was last updated 9 years, 4 months ago ago by Eva Kemp

Olga777

Participant

June 21, 2015 at 19:41

Hi there,

I’m trying to figure out how to change the layout to “WIDE”. There is a setting in Blanco to change from “boxed” to “Wide”, yet it does not really change the layout (except of removing the background).

Another question: how to increase the size of the product catalogue images? Changing the images sizes in woocommerce setting does not seem to affect anything? Is there any way to change it within the theme?

Also, do you have anyone on your end to hire for custom work with the theme?

Thank you

#70629 Copied Theme version: latest version, as of April 2015 WooCommerce version: 2.3.8

16 Answers

Eva Kemp

Support staff

June 22, 2015 at 11:11

Hello,

Please provide us with wp-admin panel credentials in Private Content.

Unfortunately you have to hire a developer via some freelance sites as our specialists are busy due to theme updates.
Please take our apologies for inconveniences.

Regards,
Eva Kemp.

#70704 Copied

Olga777

Participant

June 27, 2015 at 22:35

Hi Eva, please see in private content credentials for test site that have all latest versions of Blanco and Woocommerce. Please let me know how I can change the layout to true WIDE. And if possible, to increase the size of the product catalogue images.

Thank you

Please, contact administrator
for this information.

#72019 Copied Theme version: latest, as of June 27 WooCommerce version: latest
Jack Richardson

Support staff

June 29, 2015 at 12:14
Hello,

Please add this code in custom.css file:
```
@media only screen and (min-width: 960px){ .containerInner {
  width: 1200px !important;
}
#default_products_page_container {
  width: 900px !important;
}
#products-grid.products_grid .product-grid {
  width: 280px !important;
}
#products-grid .product-image {
  width: 280px !important;
}}
```
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”.

Best regards,
Jack Richardson.
#72138 Copied
Olga777

Participant

June 29, 2015 at 21:58

Thank you, Jack! I have done this, and the site displays wide now! Yet, I get into another problem: product catalogue (shop page) does not display products correctly. There is now a layout problem on shop / product catalogue page. I set 4 products / per row and NO Sidebar. Yet, there is still a side bar space displayed (empty) and the products (4/per row) do not displayed inline (displayed 3 products inline, then 1 product, etc). How can we fix it? I need products (4 or 5 per line) displayed properly. This is the main reason to make website in WIDE layout. Please help. Thank you!

#72267 Copied

Olga777

Participant

June 29, 2015 at 22:02

And also, how to make the product images in product catalogue displayed in bigger size? Much appreciated.

#72268 Copied
Jack Richardson

Support staff

June 30, 2015 at 07:45
Hello,

I’ve added this code to make images bigger:
```
.no-sidebar #products-grid.products_grid.rows-count4 .product-image img {
  max-width: 300px;
  max-height: 300px;
}
```
and this one to fix the layout issue on Shop page:
```
#default_products_page_container {
  width: 100% !important;
}
```
Please clear browser cache and check.

Best regards,
Jack Richardson.
#72290 Copied
Olga777

Participant

June 30, 2015 at 14:59

Hi Jack, thank you! It worked, yet that caused another problem with layout: Product NAME, PRICE and “Add to Cart” (“Select Options”) box are CUT OFF. This is in product catalogue (shop page). Is it possible to align this data properly? Much appreciated, once again!

#72396 Copied
Jack Richardson

Support staff

June 30, 2015 at 15:22
Hello,

I’ve added this code in custom.css file:
```
.no-sidebar #products-grid.products_grid.rows-count4 .product-image {
    height: 300px;
}
```
Please check Shop page now.

Best regards,
Jack Richardson.
#72405 Copied
Olga777

Participant

June 30, 2015 at 20:06

Thank you, Jack! Looks good so far. One more question: how to make it work with the side bar enabled, if I need to? Same 4 big products/per line plus side bar. I need the side bar for filtering. Unless there is a way to display the filtering by size, brand, etc on TOP (not side).
Thank you once again!

#72443 Copied
Jack Richardson

Support staff

June 30, 2015 at 20:45
Hello,

If you use sidebar then add this code in custom.css file:
```
#default_products_page_container {
    width: 960px !important;
}
.with-sidebar #products-grid.products_grid.rows-count4 .product-image img {
    max-width: 220px;
    max-height: 220px;
    width: 200px !important;
    height: 300px !important;
}
.with-sidebar #products-grid.products_grid.rows-count4 .product-image {
    height: 220px !important;
}
```
Best regards,
Jack Richardson.
#72451 Copied
Olga777

Participant

June 30, 2015 at 22:04

Thank you, Jack. Tried that, but now 4 products do not aligned in Product Catalogue (Shop) page. It displays 3 products, then 1 product, etc…. Very sorry for asking you once again, if possible to fix this. Very much appreciated.

Please, contact administrator
for this information.

#72468 Copied
Jack Richardson

Support staff

June 30, 2015 at 22:21
Hello,

I’ve commented this code:
```
#default_products_page_container {
  width: 100% !important;
}
```
and edited this one:
```
#products-grid.products_grid .product-grid {
  width: 220px !important;
}
```
Please check Shop page.

Best regards,
Jack Richardson.
#72473 Copied
Olga777

Participant

June 30, 2015 at 22:35

Thank you, Jack! Now 4 products with side bar aligned, yet they are disproportional… not long enough (too wide). very sorry for the trouble.. and thank you so much, once again, for your help!
Olga

#72480 Copied
Jack Richardson

Support staff

July 1, 2015 at 09:43
Hello,

I’ve edited the code:
```
.with-sidebar #products-grid.products_grid.rows-count4 .product-image img {
    max-width: 220px;
    max-height: 400px;
    width: 200px !important;
    height: 300px !important;
}

.with-sidebar #products-grid.products_grid.rows-count4 .product-image {
    height: 300px !important;
}
```
Please check your site now.

Best regards,
Jack Richardson.
#72533 Copied
Olga777

Participant

July 8, 2015 at 21:51

Thank you, Jack. That looks much better! Although some of the products (different photo sizes) displayed not proportionally (too long – height), e.g. bags and shoes. And another problem is a layout of a single product page – not centred – due to WIDE overall layout (the content is more on the left and the right hand side is blank). Appreciate if you can provide any suggestions on how the above 2 issues can be fixed. Thanks a lot, again!

#74100 Copied
Eva Kemp

Support staff

July 9, 2015 at 13:37
Hello,

The images for bags and shoes differ because your original images are small. Try to upload them in higher resolution or change height value in the css code.
Try to use this code in custom.css for single product pages:
```
#product-page .product-images {
    margin-left: 200px !important;
}
```
Regards,
Eva Kemp.
#74280 Copied
Tagged: bigger catalogue images, how to, make, themes, wide layout, woocommerce, wordpress
Viewing 17 results - 1 through 17 (of 17 total)