How to add attribute images below the product on shop page?

About this:

Adding this function to the functions.php in combination with some attribute options in Flatsome will show attribute images below your products on the shop page to show available variants or specific product attributes.

Requirements

There are multiple ways to make these edits. Most of them are good but for a small change like this the theme editor under admin menu “Appearance” will do just fine. Already know how to add custom functions? Skip to step 4.

Explaining the child theme

Why a Child Theme?

A Child Theme is a fundamental part of editing templates and functions which is often overlooked. Why is it important? The Flatsome main theme is updated regularly which essentially replaces and overwrites files. The child theme is separate and will not receive these updates so all files within will not be edited/overwritten/replaced. This way you don’t have to edit the template or functions every time there is an update.

Installing the child theme will automatically provide a functions.php for you.

Activating swatches

Swatches are build into Flatsome, you just have to activate them. You can find them in your WP Dashboard under Flatsome > Advanced > WooCommerce.

Enable the first option to allow Flatsome Swatches for your product attributes.

Adding images to attributes

Adding images to your attributes to show on the Shop page. Can be done by making new attributes or editing your current attributes. For the purpose of adding an image, we will choose `UX Image`.

After this you have to configure your attribute values. You can find the option all the way to the right:

finding the functions.php

1. In the admin dashboard find the “Appearance” menu item in the left sidebar and choose “Theme Editor”
2. Make sure you have selected your child theme in the dropdown on the top right above the right sidebar.
3. If the child-theme is selected, select the functions.php in the right sidebar.

Adding to the functions.php

Add the following code somewhere in your functions.php after the first 2 lines.

You can check the hooks for locations and change woocommerce_before_shop_loop_item_title for a hook to your preferred location.

// Add Attribute images on shop page with products
add_action( 'woocommerce_before_shop_loop_item_title', 'display_attribute_images', 20 );
function display_attribute_images() {
	global $product;

	$attributes = $product->get_attributes();
	echo '
';
	foreach ( $attributes as $attribute ) {
		$name = $attribute['name'];
		$options = $attribute['options'];

		foreach ( $options as $option ) {
			$image = wp_get_attachment_image( get_term_meta( $option, 'ux_image', true ), 'thumbnail' );

			if ( $image ) {
				echo '
' . $image . '
';
			}
		}
	}
	echo '
';
}

Save the functions.php

Don’t forget to save the changes made by clicking the save button below the text editor. You should now have the attributes ready to go.

Set product attributes

Edit your product to add Attributes. Select their value and if correct you should now have the related imagery shown on the shop page.