Placing side by side

CSS: Placing side by side

Recently my friends (a.k.a my customers) and I decided to change the theme as the vintage theme (Ferado) wasn’t really that suitable for the image they are going with their products. Hence we switched to the free WooCommerce theme Storefront.

The problem I was working on today is trying to place the div containing “© HiFridays 2015” and the logos of the payment methods we accept on the same row like this:

Initially each of them are of full browser width and stacked on top of each other and the use of width: 50% does not help. Googling for help brought me to this guy Lalit Kumar’s webpage on this topic and it works like wonder. I never thought it would be as simple as adding the float property to their CSS which, as Lalit Kumar said, force the div to not have full 100% width.

So now my CSS for these two look like this below and viola! It works. 😉

.site-info {
float: left;
}
.payment-info {
float: right;
}

Making WooCommerce Catalog Images Clickable

I spent much time doing research on making product images in my catalog clickable and there wasn’t a clear solution on how to do this so I did some trial and testing on my own and I succeeded!

Theme: Ferado
First I copied the file from parent theme (wordpress>wp-content>themes>ferado>woocommerce>content-product.php) to my child theme (wordpress>wp-content>themes>ferado-child>woocommerce>content-product.php). Locate the following code which render the product thumbnail.

<?php
  /**
  * woocommerce_before_shop_loop_item_title hook
  *
  * @hooked woocommerce_show_product_loop_sale_flash - 10
  * @hooked woocommerce_template_loop_product_thumbnail - 10
  */
  do_action( 'woocommerce_before_shop_loop_item_title' );
?>

and add the <a></a> codes highlighted in red before and after the above PHP codes.

<a href="<?php the_permalink(); ?>">
<?php
  /**
  * woocommerce_before_shop_loop_item_title hook
  *
  * @hooked woocommerce_show_product_loop_sale_flash - 10
  * @hooked woocommerce_template_loop_product_thumbnail - 10
  */
  do_action( 'woocommerce_before_shop_loop_item_title' );
?>
</a>

This applies to my theme and I hope it works for yours too!