Section of Cat. Desc. not stretching across Width. Is it glitch or Am I missing

[harshwe]

Quick Question
Hello Luke,

I tried to place a Category description using HTML Blocks for one of the Category. As below –
[html_block id="11424"]

I found that the Section (row) is not stretching across the Width for the left side only (Although, stretching on right side correctly). Due to which is breaks and does not looks Good at all. (screenshot below)

While trying to Edit the Section, I tried to use the Xtemos Layout to enable the option – Stretch Section as well as Stretch Section and Content.
And below is what I get the most. Is it some sort of a glitch or Am I missing something.
As, on the right side, it is correctly stretching way across the width. However, on left side, it is not working the same way.
https://i.paste.pics/ca38494420bba39808a0c683aa65ae9c.png
URL – https://www.staging.vasangini.com/product-category/bags/

Please suggest how to fix this.
However, If this cannot be done currently, then I think this is a glitch and shall be taken care of. Can you please forward it to team so as to resolve this in the next upcoming update or release a patch in the meantime.

Because, Leaving only this much of space, does Not looks good .
This way, it is neither aligned properly and nor looks professional.
https://i.paste.pics/36941fe100523258f6b9ea88dec60711.png

Regards

• This topic was modified 2 years ago by harshwe.

Hello,

If you want to stretch the description, you have 2 ways:

1. Build such a page with the description by using the Layouts.

2. Remove the sidebar for the category page: https://prnt.sc/GDskMGrcxux-
Because the stretch for the description calculates based on the main section with the content.

https://monosnap.com/file/A325XfumzjqsptuVwNdQmeEcMkQMLQ

In the meantime, feel free to ask me any questions you may have.

Kind Regards

[harshwe]

Hello Luke,

1. Currently I am not using Layouts, so I am expecting it to work without that also.

2. You suggested –

“stretch for the description calculates based on the main section, with content.”

And to our surprise, the Section that I am referring to is extending beyond that on the Right side.
The only thing is that, It is Not extending the same way, on the Left side. As it can be seen from here
https://i.paste.pics/36941fe100523258f6b9ea88dec60711.png

If that is stretching to extreme right edges (without any content in the main section of respective Category page), then it should have stretched to extreme Left edge also to maintain uniformity.
Please correct me, If I am wrong.

In either case, I think this needs to be updated and resolved. Otherwise, the purpose of using HTML block for Category description at the bottom of Category pages gets defeated.
Specially, when someone uses Stretch Section option and having a BG color for the Section, to make it like a part of the Footer, or match with the color of Footer.

But currently, it is kind of, like as if distorts the overall look. And do not appears good.

Can you please forward it to team so as to resolve this in the next upcoming update or release a patch in the meantime.

Regards

• This reply was modified 2 years ago by harshwe.
• This reply was modified 2 years ago by harshwe.
• This reply was modified 2 years ago by harshwe.
• This reply was modified 2 years ago by harshwe.

Hello,

I have contacted the development team and they confirmed that the description block will not be full width due to the stretch for the description calculates based on the main section with the content. So you can use Layouts or hide the sidebar for the categories then the description area will have the full width. Unfortunately, there is no other way to make it full width.

I sincerely appreciate your understanding in this matter. Please feel free to reach out to me if you have any further questions.

Kind Regards

Hello Luke,

I think, this does not sounds logical to me and not favourable.

The point is that – the Section that I am referring (description using HTML block) to is extending beyond that (content of Main Section) on the Right side.

1. If there is No content here on the right side of Main Section of Category page, then how come the Row (from HTML block) is still stretching to the extreme Right Side. Please refer below
https://i.paste.pics/66b1ae3bfd489076c8e8f1d8df74a8de.png
https://www.staging.vasangini.com/product-category/bags/

Can you please look into this again, and suggest. Isn’t there is something wrong or missing.

2. Can I ask, what you are referring to for the Sidebar. Is it the Filters showing on left side. If so, how can one disable these filters, on the Category or Shop pages.

There are so many limitations here and there that we come across every now and then. Even when trying to use some common things or with basic approach. It looks like features or options have been added but might not have been tested thoroughly, and not have been made compatible in a better way.
If those can be improved, atleast upon request, that would be more appreciable.

Should not this be improved or code be updated in a way, so that the Section can stretch across the width, making it look uniform and better.

Regards

Hello,

1. It stretched to the right side because there is no sidebar.

2. I suggest you enable the “Off canvas sidebar” option in Theme Settings -> Product archive -> Sidebar.

https://prnt.sc/dDgzgKlci5CB

In order to enable it only for the categories, I suggest you use our theme presets.

https://xtemos.com/docs-topic/theme-settings-presets/

Kind Regards

Hello Luke,

This sounds a better workaround. Thank you for sharing and explaining.

2. Are you sure, that after using Off-Canvas, the Extra Content Description of Categories will stretched towards left and upto extreme edges too. Just thought to make sure, before trying.
By Presets, do you mean to say, that this way, I can only restrict the Off-Canvas to Categories only, or only those Categories, for whom I want to show the Extra Content Description at bottom, by Stretching it to full.

And for Shop and other Categories(where do not require Extra content), I do not have to use Theme Presets, and that will shows up like it is currently showing.

3. I will try to use the Layouts also for Shop Archive. As I am planning to do so. Specially for Single product pages (SPP), in order to adjust things as per the requirement.
If I face any issues with Custom Layouts (for SPP or Shop), then I will let you know.

Before starting, I just wanted to know one thing, can we create Layout for Selected Categories only. Or else, if we use Layouts (custom), then it will Auto-apply to all categories including Shop page.
Is there some way, to do that for specific categories only. Or a separate layout for Shop page, and Separate for Category pages.
Can you please share your experience and suggest

Regards

Hello,

2. Yep, https://prnt.sc/K7umokZMWikr

You can hide the sidebar on the specific categories by using the conditions in theme presets.

https://prnt.sc/DTDECQedX1tB

3. Of course, through the conditions you can create the Layout for the particular category.

https://prnt.sc/w21mWIgjOFXz

Or for the Shop page: https://prnt.sc/j70Kc_HxH43C

Kind Regards

Hello Luke,

As you suggested, On staging site, I tried to create Layout for one of the product Category to test how things are working. Hence, I created and enabled it for “Bags” Category.
https://i.paste.pics/3b242ff508993c1072590e8a85320377.png

After enabling, I found few things Not working, as intended and as they are working by default, that is without the use of Layouts.

I created a Video for better understanding.

1. As per below video, when I clicked on the Shop page link and then click on page numbers at the bottom, it moves correctly till the Top filters position (until below where Category’s names are displaying)
However, when we clicked on Bags Category and then clicked on the pagination, it do not moves upwards the similar way. Rather, it moves down towards footer area. This is very strange.
How can we resolve this.
https://drive.google.com/uc?id=1ZySAv1bCBXkuEfnAZFb0GL8cUDRUxn0j

PS: We want to show the Breadcrumb and Title (of the Category page) at bottom only (to make things a bit clear on Top). So if that requires the Scroll-to-Top code (you previously shared) to be updated, then please let me know. If not, please check what is missing and how to resolve this issue.
Scroll-to-Top code snippet you shared here – https://bit.ly/3UoQ8PL

2. The Extra description that we wrote for the Bags Category is only visible on the first page, When we click or move on to 2nd page of the same category, the description is not visible.

3. In mobile view (for same Bags Category), I cannot see the Side Filter icon (funnel like), upon scrolling further towards bottom.
Do I need to enable it from somewhere just for mobiles. Am I missing something.

Please suggest and resolve

Regards

Hello,

Sorry for the delay.

1. The scroll to top code is working with the Breadcrumbs, or rather the code scrolling to the breadcrumbs section, so in your case when you defined the Breadcrumbs at the bottom, the scroll started to work not well due to the position of the Breadcrumbs.

So you can remove that custom code for the scroll and it will scroll to the top regardless of the position of the Breadcrumbs section.

2. The same behavior on the demo theme: https://woodmart.xtemos.com/product-category/furniture/page/1/ and on the default theme.

3. Could you please send me a screenshot for a better understanding?

Kind Regards

[harshwe]

Hello Luke,

1. Yes, that is why I already wrote that I want to use Breadcrumbs at bottom (to make it clean)
https://i.paste.pics/4cb9ba9eff4353e09a9f4d94eaf39612.png
You shared the Scroll-to-top code here https://prnt.sc/Cv9PIuFacqxH
In this topic – https://bit.ly/3GxN0Mu according to move it as per desire location

So, if we remove this code, will Not this Scroll again to the very top of the page (which ofcourse we do not want)
So, how can we have to Scroll To Top but till the area where Product Grid starts on Shop or Category page (or just nearby where Top filter shows). As shown below-
https://i.paste.pics/851197ce6ba4fdb451bbc48f3e195a5f.png
PS: Or at any nearby location, but ofcourse Not till the very top of the Page (where Main Nav menu Search and Top header shows)

Helpful: You suggested here, that by changing the Class, we can adjust the Scroll-to-Top location
https://bit.ly/3Xo7Sg0

3. This is what I was referring to-
https://i.paste.pics/3ab640045fdea54a30a1d804fc27154c.png

Which element or widget requires to be adjusted (in Elementor), while creating Layouts for the Bags Category in order to show the Side filters on this Category page.
From where and how to set or adjust to make them visible on mobiles.

Regards

• This reply was modified 1 year, 11 months ago by harshwe.

Hello,

1. Replace the old code with the below one and recheck the issue.

if ( ! function_exists('wd_change_link') ) {
    function wd_change_link() {
        return '.shop-content-area ';
    }

    add_filter('woodmart_ajax_scroll_class', 'wd_change_link');
}

2. Enable the “Sticky” option for the “Edit Off canvas column button” element so as a result, you will have such a button.

https://monosnap.com/file/hzg8UrZnM0MuqGFMDVmBFN75aJrRFo

Let us know if you have any questions, we will be happy to help.

Kind Regards

[harshwe]

Bit Important:
A kind request: If you could please answer bit quickly, as these days we have to wait for around 4-5 days, to receive responses. With weekends, It almost kills a week. We need to Design and Add ALL category details for each category by converting them to Layouts.

Hello Luke,

Thank you for the updated code.
1. This works, however not upto the area which we are looking for.
Currently with your recent code, it is moving way upto the area where Main menus are displaying (partly). And we do not want to show the Title area as well (beneath Main menu). That is area with Black BG having sub-category names inside it. As shown below-
https://i.paste.pics/1330691f1da5a9890b333b6e955e6cb0.png
Can you please suggest what Class is assigned for that bottom area (shown in above screenshot). So that Scroll-To-Top can move only upto this location (or slightly nearby).

Screenshots for 1. b, c, d attached below
1.b. While using layouts, it is missing the Backwards (Left side) arrow, which actually help users to return back to parent category. How can we have it, while using Layouts. Is it a bug, or am I missing something.
1.c. How can we reduce the Height (or width) of the Black BG that is for Category Title area. Inside which sub-category menu names are displaying.
1.d. Similarly how to reduce the height or gap in between filters and from where the Product grid starts.
All, as shown below-
https://i.paste.pics/33d1a37a2bdd50161c1df52619a47e90.png

Regards

• This reply was modified 1 year, 11 months ago by harshwe.
• This reply was modified 1 year, 11 months ago by harshwe.
• This reply was modified 1 year, 11 months ago by harshwe.
• This reply was modified 1 year, 11 months ago by harshwe.

Hello,

1. Ok, could you please try the below one?

if ( ! function_exists('wd_change_link') ) {
    function wd_change_link() {
        return '.shop-loop-head ';
    }

    add_filter('woodmart_ajax_scroll_class', 'wd_change_link');
}

1b. Back arrow appears when you use the Title there.

1c. There is already the padding: 0;, there is nowhere less.

https://monosnap.com/file/JbEKac48LiWWAlkT4pZmr17CqYj3Mk

1d.

.woocommerce-shop .shop-loop-head {
    margin-bottom: 5px;
}

Kind Regards

[harshwe]

Hello Luke,

1. This one is Not working, I had already tried that earlier. After using this Code, it stays at the same bottom position upon clicking pagination link.
Can you please suggest what Class is assigned for that bottom area (shown in below screenshot). So that Scroll-To-Top can move only upto this location Where “Order By“, and ” Products per page” filters are showing (or slightly nearby).
As shown below-
https://i.paste.pics/1330691f1da5a9890b333b6e955e6cb0.png
Please share the updated code that works for here.

1.b. Can I ask which Title you are referring to. Is to Woocommerce Title. If so, I already added this, but it shows the Name rather than arrow, and that too at the Top of Category names and not Inline and at left side. (I had already set it to Inline).
https://i.paste.pics/e03ae1e846894fbb9a84383dc283b3c4.png

If not The Woo title, then which Element and how. Please suggest

1. c) I think you are bit mistaken on this.
You tested on and showed the screenshot for the Shop page. And we had set the condition of the Layout just for the Bags Category, and we had mentioned about the same earlier that the Conditions for Layouts is currently set Enabled for Bags category only.
So, when you enter into the Bags Category, you will find lot of space at Top and Bottom of Sub-Category names (within inside the black BG). Can you please check the Bags Category of the Live site and compare it to the Bags Category of the Staging site. You will find the differences as mentioned in the point 1 c)

Please check how it appears on Live site (Bags Category)-
https://i.paste.pics/a0331400ae23f3ea74712da0ae65b220.png
And how it appears on Staging site (Bags Category)-
https://i.paste.pics/6badd4aba2b3703035585e5772c63497.png

Can you please make the Bags Category page of the staging site (using the Layouts), like how it is appearing on the Live site (without using Layouts). We will then set the Conditions of the Layout to be Enabled for other Categories or for the whole Shop.
We have already prepared the Layout and adjusted most of the things. What is left and required is-
1 – Back to Top to work as mentioned above
1 b) c) as requested and shown in screenshots above

You have the credentials of Staging site.
PS: We need to show Breadcrumb and Category Extra description at Bottom (as they are currently on Staging site)

Regards

• This reply was modified 1 year, 11 months ago by harshwe.
• This reply was modified 1 year, 11 months ago by harshwe.

Hello,

1. In case, if you use the Layouts, please add this custom-shop-loop-headCSS class to the element to which it will scroll.

https://prnt.sc/LGNGZrZchoKX

Then use the below code with the updated class.

if ( ! function_exists('wd_change_link') ) {
    function wd_change_link() {
        return '.custom-shop-loop-head ';
    }

    add_filter('woodmart_ajax_scroll_class', 'wd_change_link');
}

1c.I have set the padding for the column and the gap started to be as on the live site.

https://prnt.sc/S69LY99dSyKg

As for the arrow, you are using the “Product categories” element that doesn’t have such arrow.

https://prnt.sc/GF5SBN9-DbEK

You need to use an appropriate element – “Page title”.

https://prnt.sc/2rl47A1GQvKO

Kind Regards

[harshwe]

Hello Luke,

1. Thank you for the updated code and CSS class. This worked 🙂
However, works only one-way (that is, from bottom to top only). That is when we click the page numbers it scrolls-up correctly at Top upto the desire place, due to the CSS Class shared by you. But, what is not working is-
a). When we click on Shop link (from Main Nav Menu) then click on Bags Category, then it is supposed to smoothly Scroll down automatically a bit, as well, up to the area Where “Order By“, and ” Products per page” filters are showing.
And this part is not working. You can replicate the same behaviour that is working on Live site.
So, how can we make this also work, when using Layouts

1.c) Thank you.

1. b Regarding arrow, you suggested – “You need to use an appropriate element – “Page title”
https://prnt.sc/2rl47A1GQvKO

But this shows BG image, as well as occupying broader width for the whole Title area.

We select this below Layout, and have not added anything from our side for Shop or Page Title, as this is how we require to match with the Layout on our Live site.
https://i.paste.pics/598497d2b1fb05bb824035e6b9af1c78.png
In a nutshell, how we want this is –
i) To show backwards arrow pointing to left (as in Live site)
ii) To display just the Category names (in Page Title area) with Narrow width (as in Live site)
That is without the BG image and without broader Title area

How it appears on Live site – https://i.paste.pics/6979f2cd072d8798ad41bf06403f3fe1.png

Hence, as i requested earlier also –

Can you please make the Bags Category page of the staging site (that is using the Layouts), like how it is appearing on the Live site (that is not using Layouts). We can then set the Conditions of the Layout to be Enabled for other Categories as per our needs

Tip (Could be Helpful) :
If you remember we used a custom Preset on Live site to achieve such Shop or Page Title area [ as mentioned in ii) above]
https://i.paste.pics/fa78501ec6ad13fd1185916c517dd134.png
If it requires something to achieve something like that, while using the Layouts also, then please suggest.
Although the same preset is available on staging site also.

Regards

• This reply was modified 1 year, 11 months ago by harshwe.
• This reply was modified 1 year, 11 months ago by harshwe.
• This reply was modified 1 year, 11 months ago by harshwe.

Hello,

Sorry for the delay.

1. Sorry to say that, in such cases, it will not work properly throughout the site.

1b. In the Layout builder, for the “Page title” you can remove the padding and it will have the appearance as you have on the live site.

https://monosnap.com/file/UbdycSUgYDyTX4jepZdywvXXhgBAG5

https://monosnap.com/file/cEtzciNGz9faaUc7TuGFG4thCOIbbE

Kind Regards

Hello Luke,

I am disappointed
1. I could not understand why this is not possible. As this is the default behaviour and should work. If this is working without Layouts, why the same is Not working With the Layouts. What is the point then in using Layouts. The purpose gets defeated, isn’t it.
Clicking on any menu name from Main menu should smoothly scroll to the designated area in Shop and Archive page.
I wonder, why it is advertised that the Layouts is fully compatible and works the same way, as in default shop (which is without Layouts). Not only the default things, but one can achieve even more with the Layouts. But in reality, it is not getting achieved the standard structure.

I am really disappointed. As many things are Not working using the Layouts and as intended. One has to adapt and do so many workarounds to make things work, even the standard ones.

I would request you to please discuss with the Core dev team, I strongly believe there must be some option to achieve that default functionality using the Layouts as well.
If this is currently not available, then please forward it to team, so that they can resolve this technical issue, so as to make this available in next update.

PS: I was OK without using the Layouts, but then the Extra description is Not working. Because the section is not spreading across the whole width (if you remember, we asked this earlier). There are so many limitations here and there, that is scratching our minds and brings frustration, even to achieve basic things, sometimes.

1.b) I understand that I can set the Padding, but what would happen with the BG image, in case if we use the Page Title at that place. May be I am not getting your point correctly.

A kind request:
Can you please make the Bags Category page of the staging site (that is using the Layouts), like how it is appearing on the Live site (that is not using Layouts). We can then set the Conditions of the Layout to be Enabled for other Categories as per our needs.
You have the credentials and you have the permission to achieve that on staging site, as well.

Tip (Could be Helpful) :
If you remember you suggested a custom Preset on Live site to achieve such Shop or Page Title area [ as mentioned in ii) above]
https://i.paste.pics/fa78501ec6ad13fd1185916c517dd134.png
If it requires something to achieve something like that, while using the Layouts also, then please suggest.
Although the same preset is available on staging site also, but not affecting the Bags category the same way. I mean the way it is affecting and working on the Live site.

Regards

Hello,

1. Please remove the old custom code and paste the below.

if ( ! function_exists('wd_change_link') ) {
    function wd_change_link($classes) {
		if ( function_exists('woodmart_is_shop_archive') && woodmart_is_shop_archive()) {
			return '.wd-products-per-page';
		}
		return $classes;
    }

    add_filter('woodmart_ajax_scroll_class', 'wd_change_link');
}

So try to use this one, otherwise, such scroll will not work either as it is or as per default, unfortunately.

Kind Regards

[Author]

Posts