Add Tabby and Tamara item icons to all product cards

Dear @Omar Quddam,

We hope this message finds you well.

1. To display the specified image within each product item, kindly add the following code to the functions.php file located in your child theme:

add_action('etheme_product_grid_list_product_element_image', 'n2t_etheme_product_grid_list_product_element_image');
function n2t_etheme_product_grid_list_product_element_image(){
?>
<img class="custom-icon" src="https://kashafco.com/wp-content/uploads/2025/08/tabby-tamara-kashaf.webp" />
<?php
}

2. To create the popup as requested, please begin by installing the Pro Elements plugin, which can be found at: https://proelements.org/. Once installed, you may utilize the popup feature available in Elementor. For guidance on how to create your first popup, please refer to the following article: https://elementor.com/help/how-do-i-create-my-first-popup/

Should you have any further questions or require additional assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team

Dear @Omar Quddam,

We kindly ask you to re-add the custom code so that we can proceed with providing you with the appropriate custom CSS. This will allow us to assist you in resizing the image and positioning it at the top or bottom, according to your preference.

Best regards,
The 8Theme Team

Dear @Omar Quddam,

We hope this message finds you well.

Could you kindly take a moment to review the following update?

Screenshot: https://prnt.sc/lbglBoZspS-z

You can modify the custom CSS by navigating to:
XStore > Theme Options > Theme Custom CSS > Global CSS

Please find the relevant CSS code below:

.etheme-product-grid-item {
    position: relative;
}
.etheme-product-grid-item img.custom-icon {
    position: absolute;
    top: 5px;
    right: 5px;
    max-width: 100px;
}
.etheme-product-grid-item .etheme-product-grid-content {
    position: static;
}

Should you have any questions or require further assistance, please do not hesitate to reach out.

Best regards,
The 8Theme Team

Hi @Omar Quddam,

Can you check now?

https://prnt.sc/eqNwsJ5asup3

Thanks.

Hi @Omar Quddam,

Please find this custom CSS code under XStore > Theme Options > Theme Custom CSS > Global CSS and adjust the 100px:

.etheme-product-grid-item img.custom-icon {
    max-width: 100px;
}

Best regards,
The 8Theme Team