Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 18, 2023 at 8:04 pm #1398477
    THP Studio

    Hey Gunter,

    We are having some problems with the shop archive pages when we set under the product category “Fullwidth page banner” From the “Category Styling” dropdown.

    Our issues are:
    – Bread crumbs show on the bottom of image which is different to the rest of the site which displays it at the bottom of the header. We need to get the breadcrumbs up above the image.
    – The image it produces is a parallax image with no source set which displays terribly on most devices. We need it to be a regular image that can use srcset and that we can set a size for.
    – The text is put on top of the image rather than on the page like default archive pages. We need the text to be below the image, like with the default category layout.

    So is there an easy way we can customise this?

    We can see most the code is in the enfold config-woocommerce/config.php file but it seems like a complicated set of functions that all work together rather than just a template file that can be edited. Should we edit this page?

    Can this config.php file be placed in the child theme and customised?

    Or are there hooks we can de-register/register to get it how we want it to look?

    Really appreciate your help

    Tim

    February 20, 2023 at 4:57 pm #1398645
    Günter

    Hey Tim,

    I’ve uploaded a pdf with a screenshot how I see your link.

    Images have scrset and sizes.
    I’m a bit confused.

    If you want to make changes to config-woocommerce/config.php file you should stick to hooks and filters or define the functions you want to modify before our config file is loaded.
    Most of the functions are wraped in

    
if( ! function_exists( 'xxxx' ) )
{
......
}

    To modify the complete file is not recommended as it might change at any time, when we find a bug or extend WC support.

    Best regards,
    Günter

    February 20, 2023 at 5:42 pm #1398648
    THP Studio

    Hey Gunter,

    I get a 403 Forbidden when trying to download the PDF.

    Please see private field.

    Thanks

    • This reply was modified 1 year, 9 months ago by THP Studio.
    February 21, 2023 at 4:54 pm #1398797
    Günter

    Hi,

    Thanks for clarify. I did not check that it is the shop banner.

    For the layout of the banner check function avia_woocommerce_parallax_banner in the config file.

    And/or action ava_after_main_container and the 2 handlers
    avia_woocommerce_big_cat_banner
    avia_woocommerce_shop_banner

    Breadcrumb:

    You probably will need to modify:

    action woocommerce_before_main_content – handler avia_woocommerce_before_main_content

    and create your own breadcrumbs using action ava_after_main_container before shop banner
    using function avia_title()

    I hope this helps you.

    Best regards,
    Günter

    October 31, 2023 at 2:13 am #1424191
    THP Studio

    Hi Gunter,

    Circling back to this one, sorry for the long delay on it. We’ve tried to make this work ourselves, but really feel that improving this in core Enfold would be the better option if at all possible.

    Most ecommerce stores now have a banner image on their category pages, and while Enfold has this ability I really hope it could be improved. My suggestion is the following…

    1. Leave the current functionality in place for sites that already have it so as not to break anything
    2. Provide an option in the Enfold Shop settings to toggle the existing parallax effect on or off
    3. Provide an option in the Enfold Shop settings to toggle the ability to have text over the image on or off. If this is set to off, the image should no longer be loaded as a background image, but rather a normal image with full srcset abilities to improve performance, and the ability to select an image size from the usual drop down list of registered image sizes. Also, if this option is set to off, the text is output below the image on the page as normal.
    4. Provide an option in the Enfold Shop settings to change the position of where this image is displayed on the front end. Currently it displays above the breadcrumb bar, but this is unusual functionality as any page built with the ALB will always put content below the breadcrumb bar. So an option to place the image below the breadcrumb bar (but still full width) would be perfect.

    These settings would need to affect not just the single Shop banner image, but also the category banner images as well (that are added via editing the categories themselves).

    I hope that makes sense Gunter, thanks as always for considering improvements

    Kind regards

    Tim

    • This reply was modified 1 year ago by THP Studio.
    • This reply was modified 1 year ago by THP Studio.
    • This reply was modified 1 year ago by THP Studio.
    November 9, 2023 at 2:27 pm #1425123
    Günter

    Hi Tim,

    Sorry for the late reply.

    Thank you for your suggestions. We appreciate your inspirations.

    I added it to our feature request repo (https://github.com/KriesiMedia/Enfold-Feature-Requests/issues/80), so I do not forget it.

    But I cannot give an ETA for it at the moment.

    Best regards,
    Günter

    November 15, 2023 at 9:47 pm #1425710
    THP Studio

    Hi Gunter,

    Thanks for adding it to the to-do list.

    Really hope it can be one of the more urgent things so we can make our shop fronts look and perform really nicely.

    Thanks for all your work.

    Regards

    Tim.

    July 19, 2024 at 3:09 am #1462447
    THP Studio

    Hi Gunter,

    I’m continuing this here as it’s probably more appropriate, but our last communication on it was in this thread:

    Sale badge for variable products

    First of all, thanks so much again for working on the category banner images for Woocommerce categories, it’s a big win for our clients.

    However I think I have found two bugs (unless I’m missing something). This is on the latest 6.0.2 version.

    1. In the Theme > Shop Options section I enabled a Shop Banner Image, tested it on the front end, noticed a problem (which is point #2), and then removed the image from these settings and resaved the theme options. However now, even though no image at all is set in the theme options, each category is pulling in the most recently uploaded image on the website and using that as the banner for each category that doesn’t have an individual image set for it. See private #1 for examples.

    2. It seems that the images selected are hardcoded to load in at 1500×1500 for some reason? I am loading up panoramic images but they keep just displaying as 1500×1500 regardless. Even in the Shop Banner Image section in Theme Options I have the option when selecting an image to choose it’s size (which I don’t seem to have for individual categories) but even this one loads in square. See #2 in private for example.

    Thanks Gunter for your work on this, hopefully these quirks aren’t too painful to work out.

    Tim.

    • This reply was modified 4 months, 1 week ago by THP Studio.
    • This reply was modified 4 months, 1 week ago by THP Studio.
    July 19, 2024 at 12:21 pm #1462487
    Günter

    Hi Tim,

    Theme option:

    Did you enable “Display responsive banner image …” and for uploaded image you have to select the desired size in media library.

    There is filter ‘avf_woocommerce_default_banner_image_size’ (..\config-woocommerce\config.php line 1694) – you can return a registered image size

    I cannot reproduce the problem with the categories.

    Do you have a staging site where I can see it – and with backend access to check option settings and theme editor ?

    Best regards,
    Günter

    July 20, 2024 at 5:16 am #1462525
    THP Studio

    Hi Gunter,

    Thanks for the quick reply. Please see private for details.

    Yes that option is selected in the theme options, but as outlined in point 1 it didn’t work. Now there’s no image set (as you’ll see in the backend) yet the most recently uploaded image in the media library displays for all categories.

    Look forward to seeing what you find out, thanks for the assistance.

    Regards

    Tim

    July 22, 2024 at 2:00 pm #1462675
    Günter

    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

    July 30, 2024 at 3:06 am #1463280
    THP Studio

    Hi Gunter,

    Thanks for looking it over and getting back to me.

    Yes it is a fairly heavily customised site, and the 0’s that are being returned are a result of us just using a standard WP function to allow the uploaded images to retain their initial ratio’s on upload and not get cropped at all.

    We did some further testing and found that using your ‘avf_woocommerce_default_banner_image_size’ filter we can successfully return another image size and have it display correctly. For some reason returning the default Enfold size isn’t working correctly for us, but it may be something to do with how we are altering that size in our functions file. So don’t know the root cause of that one, but we can successfully work around it so that is fine.

    However, after some more testing it seems the other issue is in fact a bug. Here are our steps to reproduce it:

    1. Set a shop banner image in Enfold settings and then save it (settings used are “Responsive banner image with description below” and also have enabled Banner for product category pages toggle). This loads fine on the front end.

    2. Now remove the banner image from the back end (don’t change the Banner for product category pages toggle) and save it. On the front end now any Woo category that DOESN’T have it’s own unique banner image set shows the last uploaded image from the media library. My developer noted that it seems to be occurring due to the code around this area:

    Caused by around line 1730:

    // find attachment id – remove width and height
    $full = preg_replace(‘/-\d+[Xx]\d+\./’, “.”, $bg );
    $att_id = attachment_url_to_postid( esc_url( $full ) );`

    $bg is blank and then $full is blank.

    Then attachment_url_to_postid returns the last image uploaded.`

    Hope that helps in debugging that issue.

    Thanks again

    Tim

    August 5, 2024 at 5:58 pm #1463858
    Günter

    Hi Tim,

    thank you very much for locating the issue. I added a check for empty $bg and then skipping the output.

    https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_6_0_2/config-woocommerce/config.php

    Around line 1733:

    
				if( trim( $bg ) == '' )
				{
					return '';
				}

    Hope this fixes it.

    Best regards,
    Günter

    August 6, 2024 at 6:44 am #1463911
    THP Studio

    Hi Gunter,

    Excellent, thanks for adding a fix for that, much appreciated.

    Regards

    Tim

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘WooCommerce Category Styling’ is closed to new replies.