Return to previous page

Add attribute image to product content elements

This topic has 9 replies, 2 voices, and was last updated 2 years, 7 months ago ago by Rose Tyler

evmart

Participant

September 2, 2021 at 12:36
Hello I managed to use the below code to add attribute names to the product content elements. But I wonder is there any code to display the attribute images (in circle shape) as well?
```
add_action('woocommerce_after_shop_loop_item_title', 'show_attributes', 10);
function show_attributes(){
    global $product;
	if ($product->get_attribute('pa_color')){
		echo '<p>' . wc_attribute_label('pa_color') . ': ' . $product->get_attribute('pa_color') . '</p>';
	}
	if ($product->get_attribute('pa_size')){
		echo '<p>' . wc_attribute_label('pa_size') . ': ' . $product->get_attribute('pa_size') . '</p>';
	}
}
```
#301021 Copied Theme version: 5.8
8 Answers

Rose Tyler

Support staff

September 2, 2021 at 13:04

Hello,

Please watch this video – https://youtu.be/LgzC4iK-j6A
If this is not what you are looking for, describe the request in more detail.

Regards

#301023 Copied

evmart

Participant

September 3, 2021 at 03:48

Thank you for your reply.

But I don’t wan’t to make it as a variable product. I just want to show the attributes as icons on the shop page.

#301149 Copied

Rose Tyler

Support staff

September 3, 2021 at 16:14

Hello,

Sorry, but additional customization in files is out of our basic support scope. The theme support team can help you only with existing options – https://xstore.helpscoutdocs.com/article/25-support

Regards

#301230 Copied

evmart

Participant

September 6, 2021 at 10:31

Do you know any online materials that can help me to customise myself

#301414 Copied

evmart

Participant

September 6, 2021 at 10:36

I assume I can simply modify the code (that i posted on the first floor) a bit to make it to display the attribute icons instead of the attribute name text.

#301417 Copied

Rose Tyler

Support staff

September 6, 2021 at 14:10

Download file from this page – https://dropmefiles.com/baMKn , with instruction.
If this is not what you are looking for, submit customization request to WPKraken team

Regards

#301437 Copied

evmart

Participant

September 7, 2021 at 07:42

Thank you. it works well and this is exactly what I want.

But there is one problem, when there are many icons, the placement of the icons will overlap with the icons of other products beyond the scope of the product. I think the icon should not be out of range, but continue to be placed in the next row.

#301492 Copied
Rose Tyler

Support staff

September 7, 2021 at 08:12
Here is custom CSS code:
```
.etheme-custom-product-attributes ul {
    display: inline-block;
}
```
Regards
#301504 Copied
Viewing 9 results - 1 through 9 (of 9 total)