Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 12, 2022 at 3:29 pm #1368585
    profumopuntoit

    Hello,

    I am testing with the new option “Main Shop Page Banner” > “Yes, display a banner image”
    and “Enable Banner for product category pages”
    but the banner image appears between header and H1 title, while I want it below the title. Like this it is useless to me
    Please see in private content

    How can I move it?

    I would like also to have some control over the height of the div containing the banner image

    I also tried to add a Shop Description
    Shop Description > Enter a short description or welcome note for your default Shop Page
    but I don’t see it

    Thank you
    Mauro

    October 13, 2022 at 4:55 am #1368663
    Nikko

    Hi profumopuntoit,

    To move the banner, please add this code in functions.php of your child theme:

    function move_banner_below_the_title(){
    ?>
    <script>
        var banner = document.querySelector('#av_product_description');
        var titlebar = document.querySelector('.title_container');
        titlebar.appendChild(banner);
    </script>
    <?php
}
add_action('wp_footer', 'move_banner_below_the_title');

    As for the height, please add this CSS code in Enfold > General Styling > Quick CSS:

    #av_product_description {
    height: 80px;
    min-height: 80px;
}

    Just adjust the values as you see fit.

    Best regards,
    Nikko

    October 13, 2022 at 10:50 am #1368720
    profumopuntoit

    Thank you Nikko,
    I added the code, but nothing has changed

    This approach can also be bad for Cumulative Layout Shift
    Google states:
    —————————
    The most common causes of a poor CLS are:

      Images without dimensions
      Ads, embeds, and iframes without dimensions
      Dynamically injected content

    —————————
    Mauro

    October 15, 2022 at 9:30 am #1368917
    Nikko

    Hi Mauro,

    Can you try adding this code in functions.php (child theme):

    add_action( 'init', 'move_banner', 99 );
function move_banner() {
    remove_action( 'ava_after_main_container', 'avia_woocommerce_shop_banner', 11 );
    add_action( 'woocommerce_before_main_content', 'avia_woocommerce_shop_banner', 12);
}

    Let us know if this helps.

    Best regards,
    Nikko

    October 17, 2022 at 6:26 pm #1369153
    profumopuntoit

    Ok like this, with both codes, it is working, but …
    you have used the existing WooCommerce textarea, meant to add a long description before the products. Now it is not possible anymore to add a single line of text before the products to explain whatever is necessary to explain
    Over the banner you can add just one or maximum two short sentences
    Long descriptions are very important to bring archive pages to a high ranking
    Also, you have used the WooCommerce “Thumbnail” upload to choose or upload the banner
    Again, the problem is that a banner is a panoramic picture that might look ugly in a square thumbnail, when that subcategory is presented in the father category page
    The correct way should be

    • Leave, as they should be, the default WooCommerce fields as they are, they are necessary like this
    • Add back-office facilities to add banners and their titles and descriptions in the edit category page

    Adding a banner is an easy and straightforward thing to do in many themes, and I was expecting this missing functionality since long ago to be added in Enfold too, but as it is now it is not useful for me

    Please see screenshot to understand what I mean

    Thank you anyway
    Mauro

    October 19, 2022 at 2:25 am #1369296
    Nikko

    Hi Mauro,

    Thanks for the screenshot.
    I think I have introduced a problem by adding height.
    Please replace this code in your Quick CSS:

    #av_product_description {
    height: 270px;
    min-height: 270px;
}

    And replace it with:

    #av_product_description {
    min-height: 270px;
}

#av_product_description .av-parallax {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) !important;
}

    Hope this helps.

    Best regards,
    Nikko

    October 19, 2022 at 11:26 am #1369369
    profumopuntoit

    Ok thank you Nikko,
    but this adjustment is just a detail, the big problem is that the long description should go in the white area below the banner
    Over the banner, there should be just one title and one short subtitle, more than that is ugly.
    But the standard place in WooCommerce to write the long description of the product category has been “stolen” by Enfold, so now either you have a banner or you have a long description, and that is not correct
    That text is very important to explain what is that product category and also to bring product category pages to rank high in Google
    Please see screenshot
    Thank you Mauro

    October 19, 2022 at 2:29 pm #1369403
    Nikko

    Hi Mauro,

    I believe the Default setting in the Enfold Category Styling which is shown when you edit a category does what you mentioned (having the long description at the bottom of the banner), the other option is to have fullwidth page banner with the description on top of it.

    Best regards,
    Nikko

    October 25, 2022 at 5:02 pm #1370211
    profumopuntoit

    The problem is that I would like to have both: a short title and subtitle over the image AND a longer text between the banner and the products, not one or the other as it is now because Enfold has “kidnapped” the default WooCommerce description textarea and image upload
    Maybe something can be achieved through some of these hooks, or the corresponding Enfold hooks?

    WooCommerce Visual Hook Guide: Archive / Shop / Cat Pages

    October 25, 2022 at 5:37 pm #1370216
    profumopuntoit

    Another issue is that in non-product category pages, like the homepage for example, the code given above
    <script>
    var banner = document.querySelector(‘#av_product_description’);
    var titlebar = document.querySelector(‘.title_container’);
    titlebar.appendChild(banner);
    </script>

    cause error
    (index):890 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
    at (index):890:18

    November 3, 2022 at 9:30 am #1371187
    Nikko

    Hi profumopuntoit,

    I apologize for the delayed response, the js code is not necessary anymore since the moving the elements is done via WordPress hooks instead of using scripts.
    Please remove this code:

    function move_banner_below_the_title(){
    ?>
    <script>
        var banner = document.querySelector('#av_product_description');
        var titlebar = document.querySelector('.title_container');
        titlebar.appendChild(banner);
    </script>
    <?php
}
add_action('wp_footer', 'move_banner_below_the_title');

    Best regards,
    Nikko

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.