Widget Toggle functions not working, Height for filters issue. Value box require

[harshwe]

Hello Luke Neilson,

1. I come across options under Theme Settings > Product Archive -> Widgets
Whereby it is mentioned about Accordion JS Toggle for Woo Categories Widget. However, I think I am not able to find it working, as intended. Probably I may not be doing the correct way.

Can you please suggest-
1.a. With which exact Widget it will work and how Toggle feature will look like.

1.b. Can you please show me in any of your Live Demo, as how it works and how it looks like. Or a small Video would be great (from using actual Widget to how it will appear and work on frontend)

PS:
I tried, but I found that the whole Category widget is not Toggling in Expand or Collapse state, rather only Main Parent Category [Displaying inside widget] is showing a small Toggle arrow, [to Toggle any existing Child or Sub-categories within it].

And If one have 15-25 Parent categories (or more), then the Widget kept open In-Full, displaying All of the categories (without the inside Scroll bars and limit of height)

This is the location of such option, I am referring regarding feature of Accordion JS

https://i2.paste.pics/F8338.png (for points 1 and 3)

2. How to show the Scroll bars for Woo Product Category Widget also, just like it is displaying for other filters (that are for attributes) that we use on Shop Sidebar. Like for Color, size.
So as to automatically limit them with the Filter widgets height, as well as have Nice inside Scroll.

2.b. Will not Accordion Toggle feature work with other Filter Widgets that are on Sidebar. Like Layered Nav for Colors, Size (attributes).

3. There is another option at the bottom of the same page (Theme Settings) – Height for filters widgets

It is very much difficult to set the exact desire Value, while dragging the slider. Say, if I want to have exact 185 Value (or 196, or 202), but dragging becomes a pain, to achieve exact Value.
It would be very much easier, if an input Value box could also be added at backend in Theme options (in addition to Drag Slider). That way one can enter exact Value very easily, instead of just dragging and just to find and match the exact desired value.

3.b. Also, if the Current Value (showing just beneath), could be shifted to right side (or just few more pixels down, means with some more spacing). Because, while dragging, the Hand icon obstructs the Value, due to which one is not able to see the Live changing Value, easily.

https://i2.paste.pics/F8338.png

URL – https://www.vasangini.com/shop

PS: A Value input box for All other options (not just this area) that are available at various locations in the Theme Settings, would be much appreciable.

Regards

• This topic was modified 3 years, 1 month ago by harshwe.

Hello,

1. The “Toggle function for categories widget” option adds the “arrow” button and functionality for showing hierarchy when you have a lot of categories and subcategories.

https://gyazo.com/bcd80aba111c8400b2048d60fc7dab7e

Here is an example when it is disabled:

https://gyazo.com/9934cbe1bf4e842174810818eee7f002

This option will work with the “Product Categories” widget in Appearance -> Widgets.

https://prnt.sc/21zmugo

Also, the “Show hierarchy” option should be enabled in the “Product Categories” widget.

2. Unfortunately, the “Product category” widget doesn’t have a scroll bar.

2b. It works only for the “Product categories” widget.

3, 3b. Thank you for your suggestion, I will forward it to the team.

Kind Regards

[harshwe]

Hello Luke,

1. Thanks for clarifying. Yes, this is how, it is currently working.

By Accordion JS I had a perception, that it will work for complete Category Widget, as a whole. That is, it will Collapse or Expand the Whole widget, so as to adjust the overall height for Sidebars(in one screen) and to view other Widgets for Attribute filters like Colors, size, in one single screen (by collapsing the whole Category widgets).
Otherwise, what if anyone have Many Parent Categories itself. Other widgets (in Sidebars), moves way at very bottom. And one has to scroll a lot to view the others. But then, the products (displaying at right side), won’t be visible in one Frame or Window.

This is what i was referring to, Accordion to work like this for Widgets in Sidebars. And not just for Parent categories inside of the widget-
https://bit.ly/3xZ5xMW

1.b. How can one have such Accordion style for the Whole Widget (for all sidebar widgets).
As can be seen from above video. That would really be much beneficial. (Specially when someone has many Parent categories and many filter attributes, as well as terms of each)

3. Thank you. I wish team will surely consider some improvements on these.

4. The Category icons are showing up in very small size (18×18) on Shop page. Even though they are of 40×40 (and from Demo, as it is).
However in your demo, they are displaying bigger size, that is 40×40 and Looks very good.
https://i2.paste.pics/F8FFI.png

Due to this, they are barely visible on our site, due to smaller size. And one cannot even predict anything with the image. Please see below-
https://i2.paste.pics/F8FBV.png

a. Why they are automatically showing in such a smaller size.
b. How to fix these, as of now.

Few issues and bugs (probably)-

5. There is an option under Products -> Attributes -> Configure Terms > Editing Term, named as – “Enable swatch. Attribute dropdown will be replaces with swatches” –  https://i2.paste.pics/F7N7O.png

If we enable this, then I wanted to know, where actually it will start displaying swatches instead of Dropdown for attributes (or terms).
At what All different locations, it will affect. Will if affect on the Shop and Category pages (and wherever else Product grid displays) https://i2.paste.pics/F7NGV.png

or here, on the Single product page, as well https://i2.paste.pics/F7NIW.png
Or some other place too.

5.b. I have not enabled Swatch from same above location for Pink color attribute term. Still, it is showing Swatch (and not dropdown), in Shop and Category pages as well as Single product pageshttps://i2.paste.pics/F7NDG.png
As can be seen from above screenshots – https://i2.paste.pics/F7NGV.png

Seems a Bug
6. The terms are showing in “BOLD” (or changes font size), when we check “Enable Swatch” from Attributes -> Configure terms -> Edit terms (WP Dashboard)https://i2.paste.pics/F7N7K.png
However, for those we do not use “Enable Swatch”, the terms remains normal.

Say for, 32, 34, 42.. sizes (we have enabled swatch, hence showing in Bold, or bigger font size)For 36-40, 44-52 sizes, (we have not enabled swatch, hence showing in normal font)
This way, it looks very Odd with different font sizes in Sidebar filters.In the meantime, please suggest how to resolve this.

Can you please get this fixed in an upcoming update. So that it maintains uniformity across.

7.  I selected to show 12 products-per page, at a time , from Theme Settings -> Product Grid -> Pages. As can be seen here-https://i2.paste.pics/F7O61.png
Even after that, it is showing in Odd number (15 products)  on Shop, Category pagesVideo – https://bit.ly/31qZoNG
Can I ask why they are not showing up as mentioned.
Please suggest how to fix this.

8. For Off canvas sidebar for tablet option ( from Product Archives – > Sidebars) I set this to ON. Similarly for Mobile.
When I switch to Tablet and Mobile views from the Browser itself, the Sidebars move to the left side, as an Off-Canvas, correctly.
But clicking on that Off-Canvas Sidebar icon (3 horizontal lines), it shows Black transparent Overlay over the whole window, and does not show up the Sidebar filters.
Clicking anywhere on screen, closes or removes that Black Overlay.

The same is On Mobile View. Although, Off Canvas Sidebar sticks at the extreme left side in Mobile view correctly, but Unfortunately Not working.
Video: https://bit.ly/3omIecA

Please request the team to take a look into it, so that they can fix in next update.
Until then, if there is any solution, please suggest.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

1b. Sorry, but we don’t have such an option for adding accordion style for the whole Widget.

4. You have disabled the count for each category and the images changed their size. To be able to make it bigger, enter the custom code below to the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.wd-nav-product-cat .wd-nav-img {
max-height: 40px;
}

5. The “Enable swatch” option enables the text version of the color swatches. Swatches will reflect in the single and shop pages and other places where you can see swatches.

https://gyazo.com/ce94115b8b821f96e740770cbfe7c1e8

https://gyazo.com/163da9229473deefb29161b78662dc46

https://gyazo.com/c67c660be993902514e144d5ec00b1fb

5b. In order to display the dropdown instead of swatches, you should remove the color from all attribute terms, then you will see the dropdown.

https://prnt.sc/225w7ka

https://gyazo.com/86b867e725afd604efebbf2839292fe2

6. It isn’t a bug, after enabling the “Enable swatch” option the swatches become by product page design.

https://prnt.sc/225yhjx

https://prnt.sc/225yixy

7. I viewed your shop page and there displays 12 products.

https://gyazo.com/d3207c48ba8bd10227341e7ad7fe5143

8. The reason that you see a black window is that you don’t update the page after switching to the mobile version, the code “thinks” that it is a desktop. If you check it on the mobile device you will see the correct work of the canvas sidebar.

Kind Regards

[harshwe]

Hell Luke,

1. I understand.
Just wanted to ask, such feature of Accordion JS style for whole Widget, can be considered in future update.
Looking into below reason and situation-
What if anyone have several Parent Categories itself. Then the other widgets, moves considerably to way bottom, in Sidebar. And visitors have to scroll down a lot to view the others widget filters. And then also , the products (displaying at right side), won’t be visible in one Frame or Window.
For reference (to have accordion for whole widget)-
https://bit.ly/3xZ5xMW

4. `.wd-nav-product-cat .wd-nav-img {
max-height: 40px;
}`
Thanks for sharing, but this breaks the alignment with other categories (that are not having icons)
Please see: https://i2.paste.pics/F8YTU.png

How can we maintain the same alignment or height of Category names (irrespective of having icons or not).
Say, how to Centrally align the categories(without icons), the same way other categories are aligned (with icons), so as to match in same line.

5.b. This is still not clear-

I have not enabled Swatch from same above location for Pink color attribute term. Still, it is showing as Swatch (and not dropdown), in Shop and Category pages as well as Single product pages https://i2.paste.pics/F7NDG.png

I wanted to know, how come it is displaying as swatches, when the checkbox is not enabled, at all.
PS: I do not want the dropdown.

5.c. Most interestingly- This (shown below) is really strange,
https://i2.paste.pics/F90Q2.png

I have Not checked the “Enable Swatch” option (from Product > Attribute > Configure terms > Edit) for any of the color, still it is showing dropdown on one product and swatch for other. How can this be possible.
Similarly, viceversa for Size options (attribute terms). As can be seen from above screenshot.
There is something not going wrong or not working properly, that needs attention.
Can you please take a thorough look and have this resolved.

A possible Solution (just a suggestion) :
If the location of “Enable swatch” option can be changed to “Attribute” name as a whole. Rather than to show for each Term. That way, it will make and enable the Swatch for all terms automatically for that specific attribute (say All color values of the Attribute named as “Color”) And will not conflict with options chosen (in contrary) for other terms

6.

It isn’t a bug, after enabling the “Enable swatch” option the swatches become by product page design.

I think, I am not able to get your point properly. Can you please elaborate it.
In either case, should not the size of font (or style) remains same, whether we choose to “Enable swatch” or not, for all terms.
That way, it will maintain uniformity across.

7.

I viewed your shop page and there displays 12 products.

Yes, now they are displaying 12 products, to me also. Not sure, why so.

Can you please suggest what could be the reason earlier, for that unexpected change. (As it was clear from the video, that something wrong had happened)
And, this may happen again also (probably we may not notice during that time, but our customers may find that, while they browse)

8. Yes, upon refresh, this works in mobile version (when on desktop). Yes, on Mobile it was already working fine.

9. When using Social share from any product page or any other area, the Preview image is not correctly reflecting (the same way it is working while sharing from product pages from your Demos).
Rather, It is showing the preview of your own Default Theme Demo (home page).
Please see below.-
https://paste.pics/edit/F8K4Y
Tot test, One of such product page URL – https://bit.ly/3GgNVyY

Should not it show the preview of the image of the Main product image. And for Pages or Blog posts – the Featured or Main image.

9.b.
Similarly while sharing through Whatsapp or other Social media, it is Not even showing the Preview images, which it intends to show.
What could be causing these issues.

Can you please check and have both of these fixed.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

1, 5c. Thank you for your suggestion, I will forward it to the team.

4. In order to maintain the same alignment or height, please navigate to Theme Settings -> Product Archive -> Page Title -> activate the “Show products count for each category” option, it maintains the same alignment irrespective of having icons or not.

https://prnt.sc/22kt3zz

5b. Because you have indicated color for the attribute term, if each attribute term doesn’t specify a color then the dropdown will appear.

https://prnt.sc/22kusov

5с. Also, for each attribute term, disable the “Enable swatch” option for displaying the attribute dropdown correctly.

https://prnt.sc/22kuyvn

The swatches are enabled on those products that have attributes with a given color.

https://prnt.sc/22kxmbv

6. Here is an example:

The swatches on the product page: https://gyazo.com/2cd732d510ba9c0bb85c873ffce547cb

The swatches on the shop page: https://gyazo.com/278402a63fabeef1cd8cd8f8459f0d6b

As you can see the swatches maintain uniformity with the product page.

7. It seems cookies were saved on your site showing 15 products and after you selected 12 products from the tools panel, they were overwritten.

https://monosnap.com/file/VFKhWNK37QVBac2i76TqnH6Zpb9BFa

9, 9b. Here is an article on how to fix the issue with the image:

https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/

Kind Regards

[harshwe]

Hell Luke,

4. You suggested –

In order to maintain the same alignment or height, please navigate to Theme Settings -> Product Archive -> Page Title -> activate the “Show products count..

As I already mentioned, I do not want to show Product count. In this case, how can I maintain the alignment of Category names (with others) displaying in Title area of Shop and Categories pages.

5.c. I think I may not be able to ask my point properly. Please read this point again and check below also-

For just Black and Red terms. On one product, it is showing as swatch (or box). And on another product it is showing dropdown for same attribute terms (Black, red)
Please refer this – https://i2.paste.pics/F90Q2.png

Why so ? Something is seriously not working properly or not maintaining uniformity. Probably the code needs to be refined in order, so as not to create such confusions. I already suggested a solution earlier-

If the location of “Enable swatch” option can be switched from “Configure Terms” (each individiual term) and re-located to Edit “Attribute” name (Globally for whole attribute)…..

7. Yesterday, again, the products started showing in number 15 (instead of 12).
Now this is something driving us crazy.
Video – https://bit.ly/3GyNAaY (created again)

We have not at all changed the options for Products per page (since then), and Per page variation.
And now it cannot be the cookie issue. As we have already set that option once, earlier.
This require some sort of attention and needs to be fixed.
Can you please try to replicate again, at your end also.

9. First of all, point is, why it is showing the default image (300×250 px only) like of Home page of Demo.
Also, why will one use 3rd Party SEO plugin to resolve the image preview related issue. When it is primarily related to theme. Why one is require to set the image for each product manually in SEO plugins.

Secondly, we are not using Cache plugin (so far, since installation). So this cannot be related to that also.

Finally, the image size (by facebook) is just the recommendation, and Not Mandatory to use.
On Facebook itself it shows up the correct image. By using same image for Same product, when we directly Add a post directly from within the Facebook Wall (even if the image is not of recommended size). It even shows the image preview as well as the image on post, after posting also, correctly.

Warning to be fixed : `Inferred Property
The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags`
The Og:image property seems missing, due to which it is taking default image, as a preview for each product.
Please refer –
https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fwww.vasangini.com%2Fproduct%2F2-pc-lot-pink-medallion-tapestries-bohemian-hippie-bedspread-mandala-tapestry-beach-throw-free-ship-us%2F

9.b. And similarly, the image is Not at all showing while Sharing through Whatsapp. And that has no relation with recommended image size. And no such need of 3rd party plugin too.
That means, there is really something, that might be going wrong

Please fix the image preview while sharing on both of these.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

4. We don’t have such functionality for making the page title’s images bigger and saving the alignment. So in this case, you should upload images for all your categories, then the alignment will be equal.

5c. The attribute dropdown is enabled when you don’t have any color for each attribute’s terms, also the “Enable swatch” option must be disabled.

In your case, for the “Black Porto Men Shoes” product for each product color attribute you have disabled it.

https://prnt.sc/22sb9n7

https://gyazo.com/9c013cc6991c4f70901342f6430f7dee

For the “Black ears” product are enabled swatches because the “blue” attribute has the color.

https://prnt.sc/22sc6yl

https://gyazo.com/425062fec58c4cd17157895023b58d1f

Please, clear the color for the “Blue” attribute and check the issue.

Also, disable the “Enable swatch” option for the “Large” attribute, then it will be replaced on the dropdown.

https://gyazo.com/d186e476b941e60905015df1c49a97b6

7. You should enable the number of products for the products grid from the loop tool that is situated above the products.

https://gyazo.com/ed303b0147a717a7df15dee782079cef

After that, it will work correctly.

9, 9b. The preview shows the first image of the site that comes from the main menu.

https://prnt.sc/22shqp9

You need to replace the first image with a new image of your site or better delete all images and upload only for your site.

The issue with the “og:image” is not related to our theme, to be able to check whether it is related to our theme, check the issue on some default WordPress theme. The fix for it is described in the article that I mentioned above.

Kind Regards

[harshwe]

Hello Luke,

I tried using F12 and found that it began to work, as can be seen in Live change, with below rule.
https://i2.paste.pics/FAIDW.png
Can you please suggest exactly what CSS i need to use, in order to maintain such alignment.
PS: Here, icons are not added for all Categories, and size is already Large, still maintaining the alignment, as can be seen from Dev too, F12

5. I think option provided under, and for each attribute, is what creating so much of confusion and not maintaining uniformity across.

That is why I suggested the solution earlier also-
If the location of “Enable swatch” option can be switched from “Configure Terms” (each individiual term) and re-located to Edit “Attribute” name....

This will definitely eliminate all such issues and maintain uniformity across.
Would highly appreciate, if team could update this option accordingly.

7. Point is, there is No option of 15, on Top of product grid as well, then how come they suddenly started showing 15 products (when I had not set any such option of 15). I have already set them as 12,18,24,30..

In addition to that, 1-2 days ago, it suddenly started showing 10 products, even though everything was set, as same, that is 12.
Please check below-
https://bit.ly/3lYS8zw

Although it then again started showing 12 products in Grid, but something kept changing automatically. And from above video, it is clear, that there is definitely something going wrong. And it needs to be resolved. If you could please inform the team, to take a further look into it.

7.b. You suggested – “….Enable the number of products for the products grid from the loop tool”
Can I ask, what is Loop tool and what it refers here. Also, the numbers 12,18,24.. are already defined in Theme settings (products per page variation). And the same can be seen from both the Videos that I shared.
Can you please suggest and clarify.

9., 9.b. In either case, can you please suggest, that how, one of your below demo is correctly showing the Main image of each product page while sharing. Even though there is No SEO plugin and No og:image while looking at Page source, of this Woodmart demo.
https://woocommerce-625997-2033187.cloudwaysapps.com/product/panton-tunior-chair/

I could not find any of the OG: meta data for this Demo (in page source), still images showing up while sharing
Can you please clarify on it with details.

Also, If this is working without SEO or 3rd party plugin, then how can we make it work in our site also, without the need of 3rd party plugin or the article you shared below-
https://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/

Regards

• This reply was modified 3 years, 1 month ago by harshwe.
• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

To be able to align category items, please try to use this custom CSS code.

.wd-nav-product-cat {
    align-items: center;
}

5. I will send your suggestions to the developer team.

7, 7b. The reason is that you have on the site saved cookies that show 15 products, in this case, it can be overwritten owing to using the loop tool.

https://monosnap.com/file/QwtdWDWm0mClVyDY6IhhdBpGcesjB4

The loop tool can overwrite cookies. In your video, you have not activated the number of the grid from the loop tool so you have 15 products on the grid, if you select 12 products from the loop tool it will overwrite it and save.

https://monosnap.com/file/YQXLv5wv2Yqqa7jECqTtLh7ommRYo8

https://monosnap.com/file/Wc9Mw3rXKRNOWCoLghDYPVODkm6wxa

9. On our demo site it was fixed by means of the “Yoast SEO” plugin.

https://gyazo.com/e3bb0f88f3e7a0fbd1904fb1f25d6be7

Kind Regards

[harshwe]

Hello Luke,

4. Yes, I already found that same CSS earlier.
Thanks a lot for sharing.

7. I think cookie could not be the reason, in this case. As, it then started showing only 10 products. As I mentioned earlier also,
Around 1-2 days ago, it suddenly started showing 10 products, even though everything was set, as same, that is 12.
Please check below-
https://bit.ly/3lYS8zw

If cookie has once stored 15 products earlier, how come it change back to 12, then again to 15, then to 12, then 10 (new count), and again back to 12..keeps changing, so on so forth.
What is the logic behind this.

As Most importantly, I never changed or switched back to 15 or 10 products per page or page variations options. Since beginning of theme installation, I updated to 12 products per page, as well as same page variations to show. (12, 18, 24, 30)

And, why will One (visitor) ever come to know about that, and keep changing accordingly. If we have already set 12 (at both places), it should show the same to all visitors.

PS: Now, this is blowing away my mind. While replying on this thread, I just checked and found that, it is now again showing 15 (instead of 10, then back to 12..). What is really going on behind the scenes.

Why there will be additional need to click on Grid of loop tool again and again, so as to match the result of numbers with backend. Even though those have been set once and way earlier, at the backend. And surprisingly, the display number kept changing on its own, every now and then.

9. As far as I can see, this below Demo seems not using the Yoast plugin, still images showing up while sharing, correctly from this demo.
https://woocommerce-625997-2033187.cloudwaysapps.com

I could not find any of the OG:image or other meta data for this Demo (through view page-source), nor presence of Yoast

Please check this-
https://bit.ly/3EWNg5F

Can you please clarify on it with details.

Also, If it is working without SEO or 3rd party plugin in this Woodmart’s Demo, then how can we make it work in our site also, the same way.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.
• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

7. I have checked your site on the incognito page, and it works fine.

https://monosnap.com/file/TNLMA8pnfArr5SXMbtYKLzFx08uxAp

9. On our official demo site – https://woodmart.xtemos.com/ we are using the “Yoast” plugin. As you can see below on the video it works well.

https://monosnap.com/file/vWJ6to88gZzOmFog8aRicdK4k1zhIX

Facebook gets the first picture of the site on preview, if you don’t have the ajax dropdown then Facebook will get the first image from the dropdown.

https://prnt.sc/234ngcb

Please, navigate to Appearance -> Menus -> enable ajax for each dropdown.

https://prnt.sc/234ni5o

Kind Regards

[harshwe]

Hello Luke,

7. You suggested-

I have checked your site on the incognito page, …

Due to this, can we force customer to view site in Incognito mode, every now and then, if things don’t work well, as intended, and normally.
We are not using any Cache Plugin so far. I think, the code is prepared in a way to store cookies this way, resulting in such changes.

The major point is, when the shop, once started showing 12 products (earlier from 15, already by clearing cookies from the Browser, or overridden), then why the Shop again started showing 15 products, automatically. And then again, 12 products, then 10, then again 15.. and keeps going on..

How can it keep changing the numbers (when no-change is being made at backend). Even if the cookie role comes into play, numbers should not change and get updated this way. Please correct me, If I am wrong.
Isn’t it is something that requires developer’s team attention. To check with the code, specially related to cookie and saving of files in browser.

9. I am not sure, what makes you ignoring the link that I had earlier shared you couple of times earlier, and asking about that.

As, even this below one is also an official Demo, and advertised for Speed results.
https://woocommerce-625997-2033187.cloudwaysapps.com

As far as I can see, this below Demo seems not using the Yoast plugin, still images showing up while sharing, correctly from this demo.
I could not find any of the OG:image or other meta data for this Demo (through view page-source), nor presence of Yoast

Please check this-
https://bit.ly/3EWNg5F
Still it works well, and showing correct images while sharing. Then, how come, this is getting possible, here.

Can you please clarify on it with details.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.

Hello,

7. When you check the page via incognito, the page doesn’t have any cookies, cache, etc. so it’s a better way to check the page on some errors.

Here is the video on which I check the issue on the page by default:

https://monosnap.com/file/JHNX3QbrE2DURvSW4Sgigcmlvm639K

9. On your demo (https://woocommerce-625997-2033187.cloudwaysapps.com) you have enabled the ajax dropdown for the Main menu items (https://prnt.sc/23q8wbu), on the default site (https://www.vasangini.com/) you don’t have it.

I have mentioned above that Facebook gets the first picture of the site on the preview, so when you have the default dropdown (not ajax dropdown) Facebook gets the first image from here.

https://prnt.sc/23q7f6q

Please, navigate to Appearance -> Menus -> enable ajax dropdown for each main menu item and check the issue with the preview image.

https://prnt.sc/234ni5o

Kind Regards

[harshwe]

Hello Luke,

7. I understand that, it is showing correctly in Incognito mode. And agrees that too.

Point is – There is possibility, that we can change the products per page number, after a month or two (even, after it is Live for All). And then, customers may not get the desire results, thereafter. And practically, we can not kept asking every one to clear cookies or browse in Incognito mode. I hope you are getting my point.

Another point is – In either case, even if the cookies had been there. I really wonder, as how come the number of products (showing in Grid), kept changing, every now and then. Even when we have Set the numbers once from backend, that is to 12.
How come they keep switching the display numbers from 12 to 15, to 12 again, then 10, then 15, and keeps going on so on. According to Cookie storage also, the number should remains static. Whether it is 15 or 12, but should not kept rotating. And not at all, 10

Finally, there must be some time limit for the expiry of cookies. Can I ask what is the time period. So that the new Value of product count or number takes the precedence (automatically), once after the cookie expires.

9. Let me try to clarify again. You suggested –

“On your demo (https://woocommerce-6…..”

First of all, this is not our Demo, but it is your own Demo (Woodmart’s own, hosted with Cloudways and probably for showing Speed results purposes..).
Also, you suggested-

on the default site (https://www.vasangini.com/) you don’t have it.

We have already enabled Ajax dropdown on our site around 4-5 days back.
We did that, after your last reply dated 15th Dec 21. And since then, it is now not picking the very first image. You were right, and that is clear now.

However, the only concern, is that, now it is showing incorrect product’s images, while sharing. Means, it is picking up some other products’ Main image, while sharing. And not, its own Main image.
Please try to replicate at your end also, and suggest what could be the reason now.
And how can we resolve that.

And hence, this point still remains – As far as I can see, that same Demo (yours own) seems not using the Yoast plugin, still images showing up while sharing, correctly from this demo.
I could not find any of the OG:image or other meta data for this Demo (through view page-source), nor presence of Yoast
Please check this-
https://bit.ly/3EWNg5F
Still it works well, and showing correct images while sharing. Then, how come, this is getting possible, here. And how can we achieve the same.

Regards

• This reply was modified 3 years, 1 month ago by harshwe.
• This reply was modified 3 years, 1 month ago by harshwe.
• This reply was modified 3 years, 1 month ago by harshwe.

[Luke Nielsen]

Hello,

7. Each customer can choose how many products to show on the page using the loop tool above the products, also it can overwrite cookies.

https://monosnap.com/file/b0Q4rEjtJrkWGkNb1sUZdA2buZoEHZ

9. The Facebook preview also shows the first image on the page, in this case, on the product page the first image comes from the preview navigation.

https://monosnap.com/file/mP0XrEyAuxvpmI6dt9G5Y407rKXBI6

Please, try to change the position of the preview navigation and check the issue, navigate to Theme Settings -> Single product -> Show / Hide elements -> for the “Position” field select the “Product Summary” option.

https://prnt.sc/245lsg0

In general, the best way to show the correct image of the product on the preview is to use the “Yoast” plugin which allows you to choose one image that Facebook will be shown.

Kind Regards

• This reply was modified 3 years ago by Luke Nielsen.

Hello Luke,

9. I got this point of yours –

“The Facebook preview also shows the first image on the page, in this case, on the product page the first image comes from the preview navigation.”

As per your suggestion, I followed the steps and navigate to Theme Settings -> Single product -> Show / Hide elements -> for the “Position” field, and selected the “Product Summary” option.

a. However, it is still picking up the incorrect image (same one from the Navigation)
b. So, then, I tried by completely Disabling this option “Products navigation – Display Prev-Next”..
And click Save settings and check by sharing again. But unfortunately, this again shows the same incorrect image.

Even though the Navigation images do not exists any more, thereafter.
PS: I tried by Hard Refresh (Ctrl+F5), and by clearing Cache too.

Please check below-
https://watch.screencastify.com/v/3TSFQOFhJo9z89BhA2pI

Can you please try to replicate the same at your end also. By First Changing the Position option to Product Summary. And then also by Disabling the Navigation images option.

And then, check by Sharing the product pages randomly, after each of the above steps.

c. Point is, in your demo (https://woocommerce-625997-2033187.cloudwaysapps.com/), while showing Navigation link and images in Product Summary area, the images are being correctly displayed while sharing.
Why not, is is similarly happening in our case. (with everything same and NO 3rd party plugin too)
That too, after disabling the Nav images completely. Should not it work the same way, as it is in your Demo, and as it should supposed to show.

PS: I will use Yoast later-on, but wanted to resolve this thing first. Atleast in such case.
As Woodmart’s same Demo is not using the Yoast plugin, still images showing up correct images, while sharing.

Regards

Hello,

9. After disabling product navigation the preview works well, I have checked it (see below video).

https://monosnap.com/file/93aUF5PIMgcBSfhtD4VutN6GLDnUUo

So try to enable the “Default” option for the “Position” field and check the issue again.

https://prnt.sc/24bl029

Kind Regards

[harshwe]

Hello Luke,

Yes, I see that with Products Navigation (prev-next) set to OFF, the preview shows correctly while sharing, with Position as Product Summary.

9.a.b,
So, as per your suggestion I tried switching to Default option from Breadcrumbs.
But, first of all, point is, both the Default as well as the Product Summary options are working exactly the same way. And showing Nav links inside of the Product Summary itself.

https://i2.paste.pics/FG4IG.png

Secondly, Still, I tried with Default Position, and set Products Nav (prev-next) to ON, but then it started showing Incorrect images while sharing.
I tried the same by switching to Products Summary and let Prod Nav to ON, still it shows Incorrect images.

PS: We always tested on different products, while switching. Because, it then showed correct images for those we have already clicked to Share once (while Prod Nav was set to OFF), and when they have already shown correct images Once.
And everytime by clicking “Empty Entire Cache” from LS Cache plugin too, with every change.

Finally, images correctly displaying only, when we set Prod Nav (prev-next) to OFF, and whether the position is “Default” or “Product Summary”, or Below Header.

Hence, It is concluded that, if we set Prod Nav (prev-next) to ON, then it will show Incorrect images (images will then gets populated from Prev-next) while sharing.
https://i2.paste.pics/FG4IG.png

So, Point again stands the same, as how come, images are being correctly displayed while sharing, in your demo (https://woocommerce-625997-2033187.cloudwaysapps.com/).
Interestingly, With Product Navigation (prev-next) option set to ON.

Wondering, Why not, is is similarly happening in our case.
There might be something that needs to be resolved. And probably creating issues.

You can try to replicate with Prod Nav (prev-next) set to ON (on our site), and tried by sharing on completely different products (not the ones you already tested on and have already clicked once to share, earlier)

Regards

• This reply was modified 3 years ago by harshwe.

Hello,

9a,b. I have tested the preview image on other products, it works correctly even when you have “Prev/Next” buttons enabled. Please see the below video.

https://monosnap.com/file/r8yyW8hbSt9rn1f9Q0gBN9Z05S3CRi

Also, the issue with the image preview is not related to our theme because this functionality (that gets the first image) comes from Facebook.

Kind Regards

[harshwe]

Hello Luke,

9.a,b. OK. Thank you. But wondering, why this is still not working correctly on our site. Anyways, Will try to use Yoast, later-on.
(Probably you might have clicked and tested on those products earlier also, once by setting the Products Nav (prev-next) to OFF. Because, I found that after setting Prod Nav back to ON, and while sharing again, the preview image on those same products, then gets fetched correctly)

Yes, I understand, that the issue should definitely not with the Theme, as your own Demo (on Cloudways), is already showing image-preview correctly while sharing, without even having Yoast activated. That’s why looking to find out the possibility, as why it is not working on our site, and for what reason. And how can we overcome this situation.

Just wanted to know, does that mean, that the preview image will also work correctly, if we set the Breadcrumbs Navigation Position to “Below Header”
Or else, it will only work, if we set it to “Products Summary” or Default only.

I think one of the ticket might have got skipped somehow. Can you please check on this one –
https://bit.ly/3qywNyE

Having this direct post link- 342382

Regards

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

Hello,

In our case, the preview image displays correctly because the Breadcrumbs Navigation is “Below Header”. I don’t even know what else the problem might be, unfortunately.

I have already answered it (https://xtemos.com/forums/topic/html-block-in-empty-cart-not-working-margin-below-short-desc-on-product-page/#post-342382).

Kind Regards

[harshwe]

Hello Luke,

9.a,b.

In our case, the preview image displays correctly because the Breadcrumbs Navigation is “Below Header”.

I think, in your site, It is showing in Product’s Summary area, and not below Header.

https://i2.paste.pics/FJD3S.png
Your Demo URL- https://woocommerce-625997-2033187.cloudwaysapps.com/product/smart-watches-wood-edition/

That is why, I asked this earlier-
Just wanted to know, does that mean, that the preview image will also work correctly, if we set the Breadcrumbs Navigation Position to “Below Header”
Or else, it will only work, if we set it to “Products Summary” or Default only.

Yes, I viewed that. Thanks for your response on that Post

Regards

• This reply was modified 3 years ago by harshwe.

Hello,

9. Oh, sorry for my mistake, you are right. It is shown in the Product’s Summary area.

Most likely it will work only with “Products Summary” or “Default” options.

Kind Regards

[Author]

Posts