Hey jaimemerz,

Thank you for the inquiry.

We recommend upgrading to PHP 8.0 or later versions to eliminate potential errors related to older PHP versions. The site will also benefit from the performance improvements included in PHP 8.0 and later versions.

// https://www.php.net/releases/8.0/en.php#:~:text=PHP%208%20introduces%20two%20JIT,on%20par%20with%20PHP%207.4.

Best regards,
Ismael

Hi Tim,

Thank you for the credentials.

Having a look into it – you are having a lot of customizations, a lot of plugins and also modifications to the image sizes defined.

E.g. 1500*0 – Featured Thin (added by theme), 1700*0 – Fullscreen Sections/Sliders (added by theme), …

In core it is: 1500*430 – Featured Thin (added by theme), 1500*1500 – Fullscreen Sections/Sliders (added by theme)

We are using core WP functions for creating the responsive scrset and size – no idea what *0 causes behind the scene in WP core.

Also it is a bit strange that when no image is selected for a category we get the last image added returned by a core WP function:

$attachment_id = avia_get_woocommerce_term_meta( $term->term_id, 'thumbnail_id' );

calls

get_term_meta( $term_id, $key, $single )

The following functions are involved in handling the banner for shop page and category pages in file ..\config-woocommerce\config.php:

avia_woocommerce_overview_banner_image()
avia_woocommerce_big_cat_banner()
avia_woocommerce_shop_banner()
avia_woocommerce_parallax_banner()

The code in the functions is pretty straight and easy to understand.

What I would suggest you can do:

– To make 100% sure we do not have a bug in our core (we tested it carefully, but we might have missed something) create a clean install with Enfold and WooCommerce, add a few images and categories and check, if you get it to run as you want it – using filters if necessary (we can add additional filters if needed to core)

– Then you need to dig into your customizationed site and try to figure out, what breaks our code

I know this answer does not satisfy but digging into your code cannot be done in a few minutes.

If you need anything added to code or anything I can assist you let me know.

Best regards,
Günter

Hey James,

Thank you for the inquiry.

You can try this script in the functions.php file:

function ava_custom_script_here()
{
    ?>
    <script>
        (function ($)
        {
            function hideEmptyDescCols()
            {
                if ($(window).width() <= 768) {
                    $('.avia-desc-col').each(function() {
                        if ($(this).is(':empty')) {
                            $(this).hide();
                        }
                    });
                } 
            }

            $(document).ready(function ()
            {
                hideEmptyDescCols();
                $(window).resize(hideEmptyDescCols);
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_here');

Best regards,
Ismael

Hi,
CSS would not be the way to display the LayerSlider, we would use PHP, the css would be used to style the LayerSlider after the PHP, such as to hide the logo in the header. We can do this but since you are not using a Child Theme you could use the WP Code plugin to add the PHP code.
Since we will need to switch your theme to the one that the LayerSlider is not working in a few times to ensure the PHP code that we add works correctly, do you want to create a staging site so your visitors will not be confused while we work on the site? Did you find any other errors when switching to the new theme?
I also see that you don’t have the latest theme installed v6.0.1 I only see v5.6.9?

Most cPanel webhosts have a staging site option, some in the dashboard:

Others add the option in the Softaculous WordPress Management

There may be other staging site options in different cPanel servers, these are the two that I have seen.

Best regards,
Mike

Hi,
Thank you for your patience and the link to your site, I first tested one of your videos on my test sites with the same settings that you have and the video plays with sound, on your site the volume is clearly disabled:

but your child theme has a lot of custom files, including a header.php – typically including a old header.php can cause issues, please consider removing.

So I tested switching to the parent theme and the video plays correctly with sound:

So this points to a custom file in your child theme causing the error, try removing the header.php first, then the “includes” files, and if that doesn’t help start removing your other custom files until you find the conflict.

Best regards,
Mike

Hey Peter,
I will try, in my example I wanted to use a menu created in WordPress, so first create a menu and save the menu name for the function code later:

For the logo we will add the image via css so you will need to add the custom classes button logo

For the CTA we add the classes button cta:

Then on the page you want to use this use the option Hide Header on this page:

and add the shortcode [custom_menu menu=”test menu with logo”] to your page, adjust the menu name to suit.
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function display_custom_menu($atts) {
    $atts = shortcode_atts(
        array(
            'menu' => '',
        ), 
        $atts, 
        'custom_menu'
    );
    $menu = $atts['menu'];
    if (!empty($menu)) {
        $args = array(
            'menu' => $menu,
            'container' => false, 
            'menu_class' => 'av-main-nav scmenu',
            'echo' => false
        );
        $menu_html = wp_nav_menu($args);
        $output = '<header id="header" style="position: absolute; top: 0;">';
        $output .= '<nav class="main_menu" style="display: flex; align-items: center; justify-content: center; width: 100%;">';
        $output .= $menu_html;
        $output .= '</nav>';
        $output .= '</header>';
        return $output;
    } else {
        return '<p>No menu specified or menu not found.</p>';
    }
}
add_shortcode('custom_menu', 'display_custom_menu');

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .main_menu ul.scmenu {
list-style: none;	
}
#top #wrap_all .main_menu .scmenu .menu-item a {
	color: var(--enfold-header_replacement_menu_color);
}
#top #wrap_all .main_menu .scmenu {
background-color: rgba(0, 0, 0, 0.2);
}
body:not(.wp-admin) li.button.logo {
background-image: url(/wp-content/uploads/2024/07/logo_fysiotherapie_groningen.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
width: 200px;
margin-left: 0;
}
body:not(.wp-admin) li.button.logo a {
opacity: 0;
}
#top #wrap_all .main_menu .scmenu .button.menu-item.cta {
	background-color: orange;
}

and adjust the image URL to suit
The expected results should be like this when a color section with a image is used:

Best regards,
Mike

Hi,
Please change #av-sc-portfolio-1 to .av-portfolio-grid-sorting-container in the code:

like this:

function custom_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    $('.av-portfolio-grid-sorting-container .grid-sort-container').each(function(){
     var $gridContent = $('.grid-content',this);
     var gridContentmaxHeight = Math.max.apply(Math, $gridContent.map(function(){
         return $(this).height();
     }).get());
     $gridContent.height(gridContentmaxHeight);
  });
  })(jQuery);
  });
  </script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Best regards,
Mike

Hi,
On the demo page that you linked to, The sidebar menu is automatically created by the Page Sidebar Navigation option.

I believe the issue with the sidebar showing lower on the page when you add a tab section element is that it is a full width element and this moves the sidebar, there are a few elements like the color section and full width slider that is known to do this.
Nonetheless you can add the Page Sidebar Navigation with a shortcode, first add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

//shortcode [avia_sidebar_menu]
function display_avia_sidebar_menu() {
    ob_start();
    global $avia_config;
    if (function_exists('avia_sidebar_menu')) {
        $av_sidebar_menu = avia_sidebar_menu(false);
        if ($av_sidebar_menu) {
            echo $av_sidebar_menu;
        }
    }
    return ob_get_clean();
}
add_shortcode('avia_sidebar_menu', 'display_avia_sidebar_menu');

then add this shortcode [avia_sidebar_menu]

and note that the theme option Page Sidebar Navigation must be enabled:

then it will show, note that the style is the same because it is in the sidebar:

but if you add the shortcode to your page it will have a different style, so add this css:

#top #main .widget_nav_menu .nested_nav>li:first-child,
#top #main .widget_nav_menu li {
border: none;
}
#top #main .main_color .widget_nav_menu .current_page_item>a {
color: var(--enfold-main-color-heading); 	
}
#top #main .main_color .widget_nav_menu a {
color: var(--enfold-main-color-meta);	
}
#top #main .main_color .widget_nav_menu ul:first-child>.current_page_item {
background: var(--enfold-main-color-bg2);	
}
#top #main .widget_nav_menu li a{
border: none;
padding: 6px 7px 7px 0;
}
#top #main .widget_nav_menu ul:first-child > .current_page_item {
    left: 0;
}

so with the sidebar disabled it will look the same:

Best regards,
Mike

Hi,
I believe that I have found a solution to change the sidebar header menu to have multiple dropdowns like the burger menu,

for example this is the first dropdown after a click:

this is the second level after click:

please note that both the “first level” and “second level” menu items are not links to pages, so a click will open the sub-menu:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function change_sidebar_menu_to_burger_menu_dropdown() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    var screenWidth = window.innerWidth;
    if (screenWidth >= 768) {
        if (document.documentElement.classList.contains("html_header_sidebar")) {
            const aviaMenu = document.getElementById("avia-menu");
            if (aviaMenu) {
                aviaMenu.id = "av-burger-menu-ul";
                aviaMenu.classList.remove("av-main-nav");
                aviaMenu.classList.remove("menu");
            }
            const menuItems = document.querySelectorAll("#av-burger-menu-ul .menu-item");

            menuItems.forEach(function(item) {
                item.classList.add("av-active-burger-items");
                item.classList.remove("menu-item");
            });
            const menuItemsWithChildren = document.querySelectorAll("#av-burger-menu-ul .menu-item-has-children");

            menuItemsWithChildren.forEach(function(item) {
                item.classList.add("av-width-submenu");
                //item.classList.remove("menu-item-has-children");

                const dropdownAva = item.querySelector(".menu-item-has-children.av-width-submenu .avia-menu-text");
                if (dropdownAva) {
                    const dropdownAvailable = document.createElement("span");
                    dropdownAvailable.classList.add("dropdown_available");
                    dropdownAva.insertAdjacentElement('afterend', dropdownAvailable);
                }
                const dropdownSpan = item.querySelector(".menu-item-has-children.av-width-submenu .dropdown_available");
                if (dropdownSpan) {
                    const submenuIndicator = document.createElement("span");
                    submenuIndicator.classList.add("av-submenu-indicator");
                    dropdownSpan.insertAdjacentElement('afterend', submenuIndicator);
                }
            });

            const style = document.createElement('style');
            style.innerHTML = `
                #top #av-burger-menu-ul {
                    width: 300px;
                    padding: 0px 30px;
                }
                .main_menu ul:first-child>li a {
                    height: 50px;
                    line-height: 50px;
                }
            `;
            document.head.appendChild(style);
        }
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'change_sidebar_menu_to_burger_menu_dropdown', 99 );

Please disable any previous snippets from this thread.

Best regards,
Mike

Hey beverlystone,

Thank you for the inquiry.

You should be able to use custom fields to create links between pages in different languages. Here’s how:

1.) Edit the page in English (EN) language. Create a custom field named “language_switch_url” and enter the URL of the corresponding page in French (FR).

2.) Repeat this process for the page in French (FR) language, making sure you use the URL of the English (EN) page in the “language_switch_url” custom field.

3.) Finally, add the following code to your theme’s functions.php file to create a language switcher after the main menu:

add_action('ava_after_main_menu', function () {
    $switch_url = get_field('language_switch_url');

    if ($switch_url) {
        ?>
        <div class="av-custom-language-switcher">
            <a href="<?php echo esc_url($switch_url); ?>">
                <?php _e('Switch to Other Language', 'avia_framework'); ?>
            </a>
        </div>
        <?php
    }
}, 10, 1);

Best regards,
Ismael

Hey Ad-Min747,
I assume that your user is not admin, so see the theme option at Enfold Theme Options ▸ Layout Builder ▸ Lock Advanced Layout Builder
This removes the ability to move or delete existing template builder elements, or add new ones, for everyone who is not an administrator.
Another option might be this function in your child theme functions.php file in Appearance ▸ Editor to hide the ALB button from anyone that is not admin.

add_action('admin_head', function() {
	if( !current_user_can('activate_plugins') ){
            ?>
             <style>#avia-builder-button{ display: none; } </style>
            <?php
        }
});

Best regards,
Mike

Hi,
Thank you for your patience, yry adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function center_the_contact_form_ajax_response_after_the_submit_button_is_clicked() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function () {
    var buttons = document.querySelectorAll(".button.av-verify-recaptcha-0.av-recaptcha-submit");

    buttons.forEach(function(button) {
        button.addEventListener("click", function(event) {
            setTimeout(function() {
                var resultElement = document.getElementById("result_ajax_response_1");
                if (resultElement) {
                    resultElement.style.display = 'block'; 
                    var elementRect = resultElement.getBoundingClientRect();
                    var absoluteElementTop = elementRect.top + window.pageYOffset;
                    var middle = absoluteElementTop - (window.innerHeight / 2);

                    window.scrollTo({
                        top: middle,
                        behavior: 'smooth'
                    });
                }
            }, 7000);
        });
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'center_the_contact_form_ajax_response_after_the_submit_button_is_clicked', 99 );

This will center the contact form ajax response after the submit button is clicked, in my tests the time can be between 5 – 7 seconds while the recaptcha checks before the ajax response is shown. Some of this could be because I’m in a different country, so give this a try and adjust the 7000 at the end of the script to 5000 or 6000 to see what works best for you.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hey Roel,
Thanks for your question, but I’m not able to reproduce this on my demo site, please try disabling all of your plugins and any custom files such as a custom header.php or footer.php in your child theme, or any customized elements that you have created. If you still find the error please explain how we can reproduce this in a new support thread, because using the contact form is not appropriate for support questions, please log in to the support forum and open a new thread.
If you are unable to login to the support forum because you don’t have a activate support contract, please try going to your Theme Forest account and renew your support and then log in to the support forum and open a new thread.

Best regards,
Mike