Modify Eureka – WooCommerce Archive Thumbnail

Today i got several e-mails asking about how to modifying Eureka theme by ColorLabs & Company. The e-mails i got is asking about the same topic, how to modify the products thumbnail that displayed on archive page.

The modification i made only working for Eureka with WooCommerce Plugin.

Ok, let’s check the images below:

Capture3

As you can check on the image above, the default product images on the product archives is cropped and displayed as square images.

The modification that i want to show you is to make those images displayed as it true size (scaled). To make it clear about how is the final result of this modification, please check the image below:

Capture4

To do it, you just have to edit only 1 file. ColorLabs, add some code on this theme in order to override the image size that declared by WooCommerce plugin, and what we will do now is to modify that special code made by ColorLabs.

To do it, you will need a FTP access (to make sure if you are doing it well, if you make some mistake then you can redo it). You can go to directory: wp-content → themes → eureka → includes, open a file named theme-functions.php.

Open the file and jump to line 823, you will find this code:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'colabs_template_loop_product_thumbnail', 10);
function colabs_template_loop_product_thumbnail() {
  if ( has_post_thumbnail() ) {
    colabs_image('width=325&height=325');
  } else {
    echo '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="325" height="325" />';
  }
}

What you have to do is modify those codes become:

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10);
add_action( 'woocommerce_before_shop_loop_item_title', 'colabs_template_loop_product_thumbnail', 10);
function colabs_template_loop_product_thumbnail() {
  if ( has_post_thumbnail() ) {
    colabs_image('width=325');
  } else {
    echo '<img src="'. woocommerce_placeholder_img_src() .'" alt="Placeholder" width="325"  />';
  }
}

What we are doing here is remove the height declaration from the code. By doing this you will keep the images width, so the structures of the theme will not affected or change.

Ok, that’s it how to make the modification

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s