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 @Mac,

We kindly recommend reviewing the Sale Booster: Quantity Discount feature, which you can find at the following link:
https://www.8theme.com/documentation/xstore/xstore-features/how-to-setup-booster-sales-quantity-discounts/

We hope you find this information helpful.

Best regards,
The 8Theme Team

Dear @Malcolm,

Please add the following code under functions.php file locates in your child theme:

/**
 * @snippet       Change return to shop link, send to homepage instead
 * @how-to        businessbloomer.com/woocommerce-customization
 * @author        Rodolfo Melogli, Business Bloomer
 * @compatible    WooCommerce 9
 * @community     https://businessbloomer.com/club/
 */
 
add_filter( 'woocommerce_return_to_shop_redirect', 'bbloomer_change_return_shop_url' );
 
function bbloomer_change_return_shop_url() {
   return home_url();
}

Hope it helps!

Dear @Khurram Virk,

We hope this message finds you well.

Kindly add the following custom CSS code to your project:

.single-product ul.st-swatch-size-large li.type-label > span {
    padding: 12px 24px;
}

Additionally, please note that the color of the social icons can be modified through the “Style” tab of the social element.

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

Best regards,
The 8Theme Team

Dear @Goostaf,

Unfortunately, Elementor and WPBakery utilize entirely different structures and layouts for their elements, which makes direct compatibility between the two challenging.

If you would like to suggest a feature or improvement, we kindly invite you to submit your request through our official roadmap page. Please note that you will need to create an account to do so: https://support.wpbakery.com/roadmap

Best regards,
The 8Theme Team

Dear @Goostaf,

We hope this message finds you well.

We would like to kindly ask you to add the following custom CSS code, which is used in our demo:

/* Tabs */
.et-tab-content {
    border: 3px solid #E95D2A;
}
.et-tabs-wrapper .tabs-nav {
    border-bottom: none !important;
    padding-bottom: 0px !important;
}
.et-tabs-wrapper .tabs-nav li {
    border-top: 2px solid #e1e1e1;
    border-left: 2px solid #e1e1e1;
    max-width: unset;
    margin: 0;
}
.tabs .tab-title {
    padding: 15px 62px 15px 62px !important;
    background-color: #FAFAFA;
    font-size: 16px !important;
    font-weight: 500;
    text-transform: none !important;
}
.tabs-nav li:last-child {
    border-right: 2px solid #e1e1e1;
}
.tabs .tab-title:hover, .tabs .tab-title:focus {
    color: #e95d2a;
}
.et-tabs-wrapper .tabs .tab-title.opened, 
.et-tabs-wrapper .tabs .tab-title:hover {
    background-color: white;
}
.template-container .et-tabs-wrapper .tabs-nav li.et-opened:before,
.template-container .et-tabs-wrapper .tabs .accordion-title.opened:before {
    display: none;
}

Please feel free to make any adjustments to the code as needed.

Best regards,
The 8Theme Team

Dear @anli75,

We hope this message finds you well.

Could you please adjust the logo height to “auto” for the mobile version?

You may refer to the following screenshot for clarification:
https://prnt.sc/EkwPKolxQloa

Thank you in advance for your assistance.

Best regards,
The 8Theme Team

Hi @khurram virk,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:

.single-product ul.st-swatch-size-large li.type-label {
    border-radius: 8px;
    margin-bottom: 0 !important;
}
.single-product ul.st-swatch-size-large li.type-label span {
    text-transform: capitalize;
}

.single-product ul.st-swatch-preview-single-product.st-swatch-shape-square {
    margin-bottom: 0;
}

.single-product li.type-label.subtype-square.selected,
.single-product ul.st-swatch-size-large li.type-label:hover {
    background-color: #7C3AED !important;
    border-color: #7C3AED !important;
    color: #fff;
}

.single-product table.variations {
    margin-bottom: 0;
}

.single-product .single_variation_wrap .price {
    font-size: 20px;
}

body .star-rating, 
body #review_form .stars {
    --et_yellow-color: #7C3AED;
}

Kind regards,
The 8Theme Team

Dear Leon,

We hope this message finds you well.

We would like to kindly inform you that the Google Pay and Apple Pay buttons can only be displayed either above or below the checkout form, as shown in the following screenshot:
https://prnt.sc/T7LFAxGXK1pA

Could you please take a moment to review the checkout page again to ensure everything is in order?

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

Dear @martijntje,

We hope this message finds you well.

The issue appears to be related to the default custom CSS codes of the WPBakery Builder, as shown in the following screenshot: https://prnt.sc/DbsVoYNqHL_L

To resolve this, we have implemented some custom CSS adjustments.

Could you please check the result on your end and let us know if everything is now displaying correctly?

Thank you for your attention to this matter.

Best regards,
The 8Theme Team

Dear @Goostaf,

We’ve updated the full custom CSS codes. Please delete the previous codes and try only with this one:

.products-grid > div.product {
    background-color: #fff;
}

@media (min-width: 980px){
    body .row-count-6 .product {
        width: calc(16.66666667% - 10px) !important;
        margin: 0 5px 10px !important;
    }
}

@media (max-width: 979px){
    body .row-count-6 .product {
        width: calc(50% - 10px) !important;
        margin: 0 5px 10px !important;
    }
}

Hope it helps!

Dear @Goostaf,

We hope this message finds you well.

We would appreciate it if you could kindly clarify your request, as we are currently unsure about the objective you are aiming to achieve.

Thank you in advance for your cooperation.

Best regards,
The 8Theme Team

Dear @Genius DTF,

We hope this message finds you well.

We have adjusted the padding and margin as requested. You can review the changes at the following link:

https://tinyurl.com/2yclc7zx

Could you please take a moment to check and let us know if everything looks as expected?

Thank you for your continued cooperation.

Best regards,
The 8Theme Team

Dear @kmc,

We would like to inform you that the scroll-to-top functionality has been disabled following the use of AJAX filters.

Best regards,
The 8Theme Team

Dear @Genius DTF,

Please note that we did not request the addition of the custom CSS code. We kindly ask you to find the custom CSS and adjust it by reducing the padding and margin as necessary.

Thank you for your attention to this matter.

Best regards,
The 8Theme Team