Hi,

Thanks for the update. Please try replacing enfold/framework/php/class-responsive-images.php with this file: https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_7_0/framework/php/class-responsive-images.php

Best regards,
Rikard

Hey bur2000,

Thank you for the inquiry.

Unfortunately, it’s not possible to control the order of the items in the grid, especially when the size of the images varies. The sorting is dynamically calculated by the Isotope script, which is also used to sort the items by category. Have you tried using multiple Masonry elements?

Best regards,
Ismael

Hi,

I see there is no option to which image it should switch to though.

You can upload the image using the Alternate Fade Image option. Please check the screenshot below.

View post on imgur.com

We selected a temp image from the Media > Library.

View post on imgur.com

Best regards,
Ismael

Hey Aram,

Thank you for the inquiry.

We temporarily disabled the Enfold > Performance > File Compression settings, and this seems to have fixed the issue with the blog page. We are not yet sure why the background image of the color section is not displaying. It worked fine on a test page we created (see the private field).

Please try to remove the current color section and delete the related background image from the Media > Library, then add the color section again and re-upload the image. Let us know how it goes.

Best regards,
Ismael

Hi,

Try to add this code in the functions.php file to add a custom sales badge above the product image.

add_filter('woocommerce_sale_flash', 'avf_woocommerce_sale_badge', 10, 3);
function avf_woocommerce_sale_badge($badge, $post, $product) {
    if ($product->is_on_sale()) {
        return '<span class="av-custom-sale-badge">Sale!</span>';
    }
    return $badge;
}

Then apply this css code:

.av-custom-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #7E9A47;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
}

Best regards,
Ismael

Hey ausgesonnen,

Thank you for the inquiry.

That is the default border of the color section in the footer page — not a bug. To remove the border and add spacing below the first color section with the background image, you can add this css code:

.footer-page-content #av_section_3 {
    border: 0;
}

.page-id-31 #av_section_1 {
    padding-bottom: 50px;
}

View post on imgur.com

Best regards,
Ismael

Hey dradoering,

Thank you for the inquiry.

Have you done any page speed optimization to the site? If you haven’t, please review the following articles:

— https://kriesi.at/support/topic/pagespeed-100100/
— https://gtmetrix.com/wordpress-optimization-guide.html

You can start by installing a cache plugin such as WP Super Cache or WP Rocket and compressing the images. The LCP should improve once you’ve completed the steps above.

Best regards,
Ismael

Hey ballindigital,

Thank you for the inquiry.

It looks like you have already applied the adjustments. If you’d like to increase the image size further, you can add this css code:

#top.single .single-product-main-image {
    width: 50%;
    float: left;
    margin-right: 50px;
    overflow: hidden;
    padding-bottom: 50px;
}

#top.single .product div.images img {
    width: 100%;
    height: auto;
    max-height: unset;
    margin: 0 auto;
}

Best regards,
Ismael

Hi,

Thank you for the info.

In the style.css file, you have the following css rules that target specific widgets using #custom_html-2 or #custom_html-3. These rules don’t apply to the EN version because the widget there has a different ID, #custom_html-4.

body #header_main #custom_html-2 .col.btn a, body #header_main #custom_html-3 .col.btn a {
    display: block;
    background-image: linear-gradient(#d9c596, #b39b60);
    padding: 0 25px 0 25px;
    color: #050607;
    font-size: 14px;
    font-weight: 700;
    border-radius: 25px;
    max-height: 40px;
    line-height: 40px;
    text-transform: uppercase;
    margin-top: 5px;
}

Please update the css to include the widgets in the EN version.

Best regards,
Ismael

Hey!

Thank you for the update.

Please note that the modification from the previous thread is for the default editor and the main/featured product image. It’s not going to work when the Advance Layout Builder (ALB) is active. This is still possible with the ALB, but you’ll have to use the Image element. Go to the Advanced > Animation panel, then set the Image Hover Effect settings to Fade to another image.

Let us know if you need additional info.

Cheers!
Ismael