Customize woocommerce shop page

Hi there, I am using your Sydney Pro and I have some stuff I would like to sell. I choose SPro also because it is woo commerce ready. Now I installed WC plugin and everything works, but I can not customize in any way my shop page.

I’d like to:

  • set my shop page as a full with page (only this one), but from pages–>modify it does not work.
  • hide the page title. but from pages–>modify it does not work too
  • change the size of my main product image, but I can not find in any place where I could do that.

I am in trouble. Please, could you please help me?

Thanks in advance for your help,
Lorenzo

Dear Lorenzo,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

/* Full width shop/product page */
.woocommerce-page #secondary{
  display: none;
}

.woocommerce-page #primary.col-md-9{
  width: 100%;
}

/* Hide shop page title */ 
.post-type-archive-product h3.archive-title{
  display: none;
}

To change the product image size, please go to:

WooCommerce > Settings > Products > Display > Product Images > set the size values > Save Changes. Then regenerate the new thumbnail with Regenerate Thumbnails plugin.

I hope this reply helps.

Regards,
Kharis

Thank you Kharis for your help.

I applied your code and it’s really work. Thank you very much for that.

Unfortunately your second suggestion dos not work. Maybe I make some mistakes, but the only result I got is that all images lose quality. So same pixel dimension, but all images seems to be stretched.

Thank you very much for your kind help,
Lorenzo

Dear Lorenzo,

Thank you for updating me. Could you please take screenshot of the thumbnail settings and share it here, so I could try to reproduce it on my test site? You can upload the screenshot file to the free file hosting service like Google Drive, Dropbox, or cloudup.com.

Regards,
Kharis

Thank you Kharis,

here you find the snap. In the first snap you get my settings. in the second one how my shop page looks like. Products images does not became smaller, but only of a worse definition.

Thank you again for your kind help.
I really appreciate.
Lorenzo

https://drive.google.com/file/d/0B0w-oj2Kwz22OW5fYWJFOVUtdnc/view?usp=sharing

https://drive.google.com/file/d/0B0w-oj2Kwz22T0lvbUViVHNJTTA/view?usp=sharing

100px square for Catalog Images and Single Product Image is too small, I think. Please see this documentation which might help you.

Regards,
Kharis

Dear Kharis,

I am trying with 300x300 to al values. But I read the following in doc you shared:

Find the size your theme renders thumbnails ↑ Back to Top The theme you chose delegates how big the pictures will be, so you need the dimensions in which it renders them

Maybe could be this the problem? With value would you suggest?

Thank You,
Lorenzo

Ignore that notification, please. Because we don’t set set_post_thumbnail_size().

Follow the size pattern please on this screenshot, please. Product thumbnails should be the smallest and single product image should be the largest.

Regards,
Kharis

Thank you Kharis for your help. I set my woo commerce product display as you suggested. Here my screenshot. But what could I do if I would like to have 4 columns? Or maybe 5? So maybe smaller images in their pixel dimensions.

I really would like to find a way to manage this shop page.

Thank you,
Lorenzo

Hi Kharis, how are you? Any hews about my last post just here before? Thanks a lot!

Ciao,
Lorenzo

Dear Lorenzo,

In order to change default product columns to 4, please try adding the following function into the child theme’s functions.php file:


add_filter('loop_shop_columns', 'loop_columns');
function sydney_set_product_loop_columns() {
   return 4;
}

Then this custom CSS code into the child theme’s style.css:


.woocommerce .content-area ul.products li.product, 
.woocommerce-page .content-area ul.products li.product {
  width: 21.2% !important;
}

Regards,
Kharis

Thank you Kharis,

Unfortunately I do not use any child theme, so how could I do?

Hello there,

Thank you for the followup.

You can also use Functionality plugin to add custom function and use Simple Custom CSS for CSS.

Regards,
Kharis

Dear Kharis, thank you for your help. I successfully added the CSS, but could not find a good way to add the function into the child theme’s functions.php file. I really would appreciate your help and sorry if I bother you with this problem.

Page now is like this

Thanks again,
Lorenzo

Dear Lorenzo,

Please install and activate the Functionality plugin. Then navigate to Plugins > Edit Functions > add the code into the editor box. Put it at the most bottom line.

Regards,
Kharis

Thank you kharis. When I click ‘Edit Functions’ my website replies ‘File dos not exists. Please check its name and try again’.

Here a snap. What’s wrong with this for me?

Thanks again,
Lorenzo

Dear Lorenzo,

Alternatively, you can use the Code Snippets plugin.

Regards,
Kharis

Sorry for bothering you. Look at this :frowning:

Thank you Kharis

I guess you pasted the code from email. Copy/paste this one, please.

Regards,
Kharis

Dear Kharis, I have to admit you were right. But now nothing changed. I am so sorry. I set an account for you so you can enter the site and have a look. I send your credentials via email.