Hi,
A test product page to test the javascript code. We can inject the code in the browser , but only for desktop.

Best regards,
Mike

Hey Aldo,

The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,
a: yes all would be lost
b: if all of the products followed the same format ie: dots in your slider, and the same number of slides as your variations in the same order, I expect that one javascript script would work for all. As the example thread did
But we won’t be sure until we test on your text product.

Best regards,
Mike

Hi,
Yes to the first two questions, as for the custom javascript it is a maybe, we would need to see a test page with the dots in your slider, and the same number of slides as your variations in the same order. Since there are no added classes to tell javascript the difference it needs to be setup so the first option is the first image in the slider & the last is the same as your last image. The dots in the slider link to the images, where the next/prev only link to the next image, not a specific image.
It may work similarly to this thread. But this thread is not your solution, we will need to examine and test on an example on your test page.

Best regards,
Mike

Hey Munford,
To hide the brand try this css:

.single-product .product_meta .tagged_as + .posted_in {
	display: none;
}

To change the woo sorting options to categories is not that easy, but I was able to create this function for your child theme functions.php

add_action( 'woocommerce_before_shop_loop', 'custom_product_category_dropdown', 20 );

function custom_product_category_dropdown() {
    $args = array(
        'show_option_none' => __( 'Filter by Category', 'woocommerce' ),
        'show_count'       => 1,
        'hierarchical'     => 1,
        'taxonomy'         => 'product_cat',
        'hide_empty'       => 1,
        'value_field'      => 'slug',
        'class'            => 'orderby',
        'name'             => 'product_cat_filter',
        'id'               => 'product_cat_filter',
    );

    echo '<div class=" sort-param sort-param-order custom-category-dropdown">';
    wp_dropdown_categories( $args );
    echo '</div>';

    ?>
    <script type="text/javascript">
        (function() {
            var dropdown = document.getElementById("product_cat_filter");
            if (dropdown) {
                dropdown.onchange = function() {
                    var val = this.value;
                    if (val !== '-1') {
                        // Redirect to the category archive page
                        window.location.href = "<?php echo esc_url( home_url( '/' ) ); ?>product-category/" + val;
                    }
                };
            }
        })();
    </script>
    <?php
}

Then add this css:

#top .product-sorting.avia-product-sorting {
   display: none;
}
.avia-webkit #top.woocommerce-page .custom-category-dropdown select {
    padding-right: 40px;
}
#top.woocommerce-page .custom-category-dropdown select {
	width: 100%;
}

The result:


Note that clicking the category in the sort will redirect to the category page, I’m not sure if that will be an issue for you, but it’s the only solution I could come up with. Also the dropdowns style is a little different from the theme.

Best regards,
Mike

Hi,

The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hey navindesigns,

This CSS is causing that:

#top #wrap_all .all_colors h2 {
  line-height: 20px !important;
}

Check in Quick CSS or under Enfold->Advanced Styling.

Best regards,
Rikard

Hi,

Do you mean the gap between the first and second section on the front page? If so, then that is a section which automatically is being added after a slider. You can remove the padding and minimum height using this CSS:

.content {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

Note that it will apply to all elements with that class.

Best regards,
Rikard

Hi,

Please try this instead:

@media only screen and (max-width: 767px) {
#top fieldset {
  display: contents;
}
}

Best regards,
Rikard

Hi,
Glad that Ismael could help, you are correct that non-touch devices will not encounter touch events, so it should not be an issue. Unless there is anything else with this issue, shall we close this thread? Naturally you can always open a new thread for new issues, but we like to keep each thread on topic. :)

Best regards,
Mike

Hey Georg,

Thanks for reaching out to us. The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hey teresa,

The update to 7.1.3 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,

Thank you for the update.

You can apply a custom css class (e.g “av-tab-section-title-limit”) to the tab sections where you need the modifications, then adjust the selectors in the css rules accordingly. Please check this documentation for more information on how to apply custom css class names to the elements.

— https://kriesi.at/documentation/enfold/add-custom-css/

#top .av-tab-section-title-limit .av-tab-section-tab-title-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

#top .av-tab-section-title-limit .av-tab-section-tab-title-container > * {
    flex: 0 0 calc((100% / 6) - (10px * 5 / 6));
    max-width: calc((1310px - (10px * 5)) / 6);
    box-sizing: border-box;
}

Best regards,
Ismael

Hey!

Thank you for the update.

Please add this to the style block or style element:

.ava-go-back-wrapper {
    position: absolute;
    z-index: 99;
    left: 55%;
    right: auto;
    top: 5px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

We updated the script in the functions.php file — the page should now be scrollable.

function remove_slideshow_swipe_script() { ?>
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth <= 768) {
        var slideshow = document.querySelector('.avia-slideshow');
        if (!slideshow) return;

        slideshow.style.touchAction = 'pan-y';

        let startX = 0;
        let startY = 0;

        slideshow.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
            startY = e.touches[0].clientY;
        }, {passive: true, capture: true});

        slideshow.addEventListener('touchmove', function(e) {
            const dx = Math.abs(e.touches[0].clientX - startX);
            const dy = Math.abs(e.touches[0].clientY - startY);

            if (dx > dy) {
                e.preventDefault();
                e.stopImmediatePropagation();
            }
        }, {passive: false, capture: true});
    }
});
</script>
<?php
}
add_action( 'wp_footer', 'remove_slideshow_swipe_script', 99 );

Best regards,
Ismael

Hi,
Thanks, I added this script to your child theme functions.php file:

function remove_slideshow_swipe_script() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    if (window.innerWidth <= 768) {
        var slideshow = document.querySelector('.avia-slideshow');
        if (slideshow) {
            slideshow.style.touchAction = 'none';
            
            ['touchstart', 'touchmove', 'touchend'].forEach(function(event) {
                slideshow.addEventListener(event, function(e) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                }, {passive: false, capture: true});
            });
        }
    }
});
  </script>
  <?php
}
add_action( 'wp_footer', 'remove_slideshow_swipe_script', 99 );

and it is working for my Android device, with the other script still working, as before if you are using a iPhone you may need to clear the history to fully clear the cache.

Best regards,
Mike

Hey Angelo,

Thank you for the inquiry.

Try to add this code to the functions.php file to insert a go back button inside the header container.

add_action( 'ava_main_header', 'ava_main_header_mod' );
function ava_main_header_mod() {
    ?>
    <div class="ava-go-back-wrapper">
        <a href="javascript:history.back();" class="ava-go-back-button">Go Back</a>
    </div>

    <style>
        .ava-go-back-wrapper {
            display: none;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }
        .ava-go-back-button {
            display: inline-block;
            padding: 8px 16px;
            background-color: #333;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            .ava-go-back-wrapper {
                display: flex;
            }
        }
    </style>

    <script>
        function closeBurgerMenu() {
            const burgerBtn = document.querySelector('.av-burger-menu-main .av-hamburger.av-js-hamburger');
            const overlay = document.querySelector('.av-burger-overlay');
            if (burgerBtn && burgerBtn.classList.contains('is-active')) {
                burgerBtn.classList.remove('is-active');
            }
            if (overlay) {
                overlay.style.display = 'none';
                overlay.style.opacity = '0';
            }
        }

        document.addEventListener('DOMContentLoaded', function() {
            closeBurgerMenu();

            const goBackBtn = document.querySelector('.ava-go-back-button');
            if (goBackBtn) {
                goBackBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    closeBurgerMenu();
                    setTimeout(function() {
                        history.back();
                    }, 50);
                });
            }
        });

        window.addEventListener('pageshow', function(event) {
            if (event.persisted) {
                closeBurgerMenu();
            }
        });
    </script>
    <?php
}

Best regards,
Ismael

Hi,

Sorry for the delay. Since removing the br tags also removes the list items, we used this css in the style.css file to hide the line breaks and display the list as a standard bullet list.

.av-masonry-entry-content ul br {
    display: none;
}

.av-masonry-entry-content ul li {
    padding-left: 10px;
	position: relative;
}

.av-masonry-entry-content ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 1em;
    line-height: 1;
}

Please check the private field for the screenshot.

Best regards,
Ismael