Add attribute image to product content elements

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

  • Avatar: evmart
    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>';
    	}
    }
    8 Answers
    Avatar: Rose Tyler
    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

    Avatar: evmart
    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.

    Avatar: Rose Tyler
    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://www.8theme.com/documentation/xstore/support/support/

    Regards

    Avatar: evmart
    evmart
    Participant
    September 6, 2021 at 10:31

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

    Avatar: evmart
    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.

    Avatar: Rose Tyler
    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

    Avatar: evmart
    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.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 7, 2021 at 08:12

    Here is custom CSS code:

    .etheme-custom-product-attributes ul {
        display: inline-block;
    }

    Regards

  • Viewing 9 results - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.