WooCommerce Category Image Size

[tenchystryder]

Hi Tom

Hope the wife & family are doing well.

Just a quick one, which might not be GP related.

I am messing about with Woocommerce to use it as a company directory and the main category images are too large. I have altered image size options within woocommerce settings and regenerated thumbnails but still the same.
What I would like to do is drop the image sizes down to 150px x 150px and spread across 5 or 6 columns
instead of the current 4.

Is this a GP thing and if so what are the options. I have already dropped code in to rename breadcrumbs, remove ordering option, remove related products and to get rid of add to basket options.

Page is located here. (off to bed and away all week so may not respond straight away mate.

[tenchystryder]

PS – If you look at source code or inspect the elements, the images (colored books) are showing as 450px x 450px however the option in WC is set to 150px x 150px

🙁

[Tom]

Hi there,

We’re well – little one doesn’t like to sleep at night though, I miss sleep.

At first glance it doesn’t appear to be a GP thing, so I’m thinking either WC or another plugin.

The ?fit=450 parameter at the end of the URL looks like it may be another plugin – can you try #1 on this page?: https://generatepress.com/knowledgebase/debugging/

[tenchystryder]

Ha ha. Yeah I’ve done the whole no sleep thing. Luckily both mine are now teens so I just get the whole “Dad can you pay for ….”? thing going on 🙁

OK. Right I did option one as you suggested with the exception of WC (obviously). No change.
However, I have noticed tonight if I change WC display settings (catalog images) to anything (and I mean anything .. I have tried px sizes from 50 to 1000) the image just blurs but the actual physical size remains the same. Does that make sense cause I’m confused.

Right. Here is some snippets I have used to remove and.or changed things.

function wc_remove_related_products( $args ) {
	return array();
}

add_filter('woocommerce_related_products_args','wc_remove_related_products', 10);
remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
function woo_custom_breadrumb_home_url() {
    return 'http://www.thehirebook.co.uk/company-directory';
}

add_filter( 'woocommerce_breadcrumb_defaults', 'jk_change_breadcrumb_home_text' );
function jk_change_breadcrumb_home_text( $defaults ) {
    // Change the breadcrumb home text from 'Home' to 'Directory Home Page'
	$defaults['home'] = 'Directory Home Page';
	return $defaults;
}

…and some css changes (via simple css)

form.cart {
display: none!important;
}

select.orderby .woocommerce_ordering {
display: none;
}

Plugins in use and all switched off as you suggested but made no difference includes master slider, code snippets, simple css, jetpack, shortcodes ultimate and contact form builder

Not sure where to go now. Tom, if you need admin let me know and i’ll email to you.

[Tom]

First, I would set up the columns for WooCommerce to whatever you like: https://docs.woothemes.com/document/change-number-of-products-per-row/

That will reduce the image size if they’re in more columns.

Then you should be able to use CSS to reduce the images even more:

.woocommerce ul.products li.product a img {
    max-width: 150px;
}

[tenchystryder]

Perfect 🙂 That will do the job.

http://www.thehirebook.co.uk/the-directory

Thank you Tom. I really appreciate your help.

Next time I’ll find a GP problem for you 😉

• This reply was modified 8 years, 2 months ago by tenchystryder.

[Tom]

No problem 🙂 Glad I could help

[Author]

Posts