How can we make Video appear Full-Width or Screen. Default 404 page and custom

Hello Luke,

1.b. Does that mean, that one cannot directly change or update the default 404 page, coming from Woodmart.
1.c. And once we add our own custom 404 page in provided area, it will replace the default one.

2. I enabled the CSS style, and it worked. Thank you 🙂
2.b. Just wanted to know, Is there only One Element to add and Play Videos named as “Video Player”, that too from WPBakery. Is there any other Video Element too.

2.c. Other than that, Is there any Video Element by Woodmart also. If so, with what name.

3. Recently Viewed products – To be added under Product Grid-Carousel Element

I see that there is a Legacy widget (or probably Woodmart’s own) named as “recently viewed products”.
However, while using the Product Grid-Carousel Element, I could not find the option of “recently viewed products” under dropdown of Data Source field.

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

Would like to request you to please Add this also as an option under Data Source, so that one can use it anywhere on the site. And can even configure further on the basis of available settings under Product Grid-Carousel Element.
(That is, as a Slider, laid-out as horizontally, as like others, with custom image size, and as per needs)

Recently Viewed products feature is in Very high demand and a must-have for ecommerce stores.
That actually helps users or visitors to come back to the product they have viewed earlier, at any point of time. Otherwise, there is no option for them to get back to visited product. This becomes very handy for them, and hence helpful in conversion too.

PS: Visitor may not put every item, they previously visited, in their Wishlist, just to recall them. But recently viewed products resolves such requirements.
And even after closing site or browser, they can come back later to find out the visited product. As those gets stored in cookies.

3.b. In the meantime, can you please suggest how can we show the Recently Viewed products (horizontally , not as default with vertical layout, and not in Sidebar).

Currently what widget does is – Say, if we enter 20 number for product count, then, when in Sidebar, it shows All 20, then use has to scroll down the page a Lot, and the remaining part of page, is empty. Which looks very Odd and unprofessional.
However, that is not the case with Horizontal layout display and within Slider. As that way, visitor will be On Same Screen and Area as well, and can see All of the Recently viewed products, at once. Within the Slider.

Regards

• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

3.a. Thank you. I wish this will surely be considered and added, by the team.

Why Expecting it – As the functionality already exists with the availability of “Recently Viewed” (RVP) widgets, as well as, Woodmart already have the feature to show Products in different ways through Element. The only thing is the team will need to Add this option (RVP) under “Data Source” of Product Grid-Carousel Element, so as to display them horizontally, in the Slider.

3.b. Thank you for sharing the code to Add Scroll to Widget. Much appreciable.

I found that there is a way to show the Recently Viewed Products (RVP) some other area also, as below-
By first creating the New HTML block and adding RVP under Widgetised Element, and then by using it under “Extra Content options” while editing Single product page.
However, the same issue arises there also, That the RVP shows vertically, with this method also.

3.c. So with the approach of HTML block, one of the point gets resolved by showing RVP as “After content” or as Prefooter.
The only thing is now, how can we display them horizontally here now.

There must be some way to show the products in horizontal layout or position (side-by-side), instead of vertical layout (one next and downwards to another one)
Can you please suggest.

Thereafter, with the similar custom CSS (that you shared earlier), we can then show them as and under Slider.

4. Scroll to Top button-

a. How can we have mouse-hover color (for arrow) and BG color for Scroll to top button like below.
https://bit.ly/3qMmuH5 (for Reference- it is from Flatsome theme)
And how can we change the colors of Arrow and white BG, without Mouse-hover, that is in idle state.

b. We need to have a colored border around button also, like above.
https://i2.paste.pics/FJRGN.png

c. How can I place it on the position, somewhere there, as shown below-
https://i2.paste.pics/FJRCJ.png

d. And how can we have the BG color with bit Transparency (so the content behind is visible, if at all it overlaps, once we place it to new location, as asked in point 4.C).
And with 100% opacity while user Mouse-hover on the button

Regards

• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

3. Great !! Thank you 🙂
Will wait, to see that Live

3.c. I have displayed on one of the product page. Also, added Custom CSS to enable scroll bar (that you shared), just for reference.
Product URL – https://bit.ly/3t0x5AT

Workflow : I created New sidebar. Added RVP widget inside it (with 3 products, as of now in RVP list). Then I created New HTML block [html_block id="7665"]. Added Widgetised Sidebar Element. Then selected that Newly created Sidebar, under it
https://i2.paste.pics/FK138.png

Then selected same HTML block under Extra Content, and choose Pre-footer as position, for testing purpose. (while editing above product)
https://i2.paste.pics/FK15S.png

3.d So, this is how it currently looks on page. And also shows, what and how we are looking for it, to appear.
https://i2.paste.pics/FK1GJ.png

How can we display them Horizontally (Side-by-side, like in Slider View). And in similar pattern, with Prev-Next Arrows. So as to maintain uniformity across.

4.a,b. Thank you. These worked.

I think below ones got skipped somehow-
c. How can I place it on the position, somewhere there, as shown below-
https://i2.paste.pics/FJRCJ.png

d. And how can we have the BG color with bit Transparency (so the content behind is visible, if at all it overlaps, once we place it to new location, as asked in point 4.C).
And with 100% opacity while user Mouse-hover on the button

Regards

• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

3.d. I again Test RVP and it is working on the site.
Here it is –
https://watch.screencastify.com/v/t0hO4M8RLr8OgkBYeJYx
Please try to check again.

PS: Try by logging into once as an Admin. (I just checked and found it is not working as Visitor or Guest. Not sure, why. This could be some another issue)

e. Can you please suggest the reason on this also, as why RVP is not working for Guest or visitor.
However, I didn’t tried after logging-in as a Subscriber or as a Customer.

4.c. Thank you for updating the code for Right and Bottom in Scroll To Top 🙂
Will check that, and let you know.

4.d. Oh, Great. Was not aware of those 2 extra numbers in the Hex value, that were added at the beginning. Will check that too. Thank you 🙂

5. On the checkout page-
a. How to show BG color behind Selected Variation and Qty of products on the Cart and Checkout page, as explained below. For the reason- https://i2.paste.pics/FKEAS.png

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

And also for reason, So as to make them stand-out, as well as easier to read for customers, with better visibility.
For reference-https://i2.paste.pics/FKEPF.png

b. How can we adjust Title besides thumb image on Checkout page, like below-https://i2.paste.pics/FKEJ4.png

c. With Variation and Qty. to be in the next line (Next line after Title, and not in the same line)

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

3.d. I added custom CSS and update the scroll code also, but there seems something wrong.
The image is getting smaller and smaller, when I update the number of RVP to show from 3 products to 12 (under Legacy Widget).
Rather than activating Slider, the moment we enter more than 6 products in the RVP widget.
When enabled 6 products in RVP widget – https://i2.paste.pics/FM5EH.png
When enabled 6 products in RVP widget – https://i2.paste.pics/FM5EE.png

In a nutshell–
We want the user to view 6 products At-a-time, on a Screen, and once user views more, Scroll bar gets activated. Total RVP the user can view, is the one that we actually set in the Widget, that is 12.

3.e. OK.

3.f. How can we Hide the Title and Ratings of products. We just want the price to be Enabled or shown below images in the RVP list

3.g. You suggested –

Also, add this custom CSS to the “Custom CSS for desktop” area

Wanted to know, what will happen for mobile. And why you suggested only for Desktop.
Does that mean, I need to have below code in Global CSS area, and remaining on Desktop area only.

.widget_recently_viewed_products {
    overflow-x: scroll;
    width: 100%;
    max-width: 1200px;    
}

5.a. How can we have slight padding for BG color around Qty. So that BG color expands outside of the edges of the price from all sides.

5b.

Sorry, but it cannot be changed because…

OK.

5.c. How can atleast this be done-
To show Product’s Variation and Qty. to be in the next line (Next line after Title, and not in the same line of Title)
So as to have them separated apart from the Title, and look bit cleaner.

Regards

• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

3.d.

Please, replace the code for horizontal scroll…

I updated the code, it then worked. (However, initially it did not worked after updating the code, but somehow, later-on, it worked.) Not sure why. Thanks 🙂

3.f.

If you want to use horizontal RVP on mobile…

I will check after logging into mobile as Admin. However, it is showing as working using Inspect tool (Mobile).

3.g. For Disabling Title or restricting it, both codes seems not working. I have left them in Global Custom CSS area, as it is. Can you please check at your end also. And suggest the code to Hide Title and limit or restrict it also.

PS: I had already added the below code ealier (prior to your response), on my own, to disable Title in RVP widget, probably due to this, it was reflecting as hidden, to you also.

.widget_recently_viewed_products .product_list_widget>li .wd-entities-title {
	display: none;
}

Can you please suggest is this the correct one, or the one you shared is more refined.
We want to restrict or Hide the title everywhere (for RVP)

3.d Update:
The Main code you shared here for RVP slider here, in your post response 344598 is breaking and affecting other areas too.

I come across, that it is getting applied on other Non-required areas too. Like on other widgets on sidebar (You may also like, .. and all other widgets)
Also, it is affecting on Cart Sidebar. And increasing the size of images a lot. Please see here-
https://i2.paste.pics/FMXYW.png

I think code is for All widgets and not just for RVP widget. Can you please share the updated code, so as to affect only the RVP Widget

3.h.

The product stars can be hidden via WooCommerce -> Settings -> Products -> Product ratings…

Yes, we are aware of this. But, how can we hide Star rating, only for RVP widget slider. We want to keep them intact at other places like, Shop, Archive and single Product pages.

5.a.

Please, try to add this box-shadow: 0px 0px 5px 1px #f3390edb; …

I tried, but unfortunately, this does not looks good. I think padding will solve our purpose.
How can we have slight padding for BG color around Qty. So that BG color expands outside of the edges of the price from all sides.

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

3.g. This below one seems the correct one. Thank you for updating the code.

.widget_recently_viewed_products .product_list_widget>li .wd-entities-title {
    overflow: hidden;
    max-height: 22px;
}

3.d.

We are truly sorry for the inconvenience…

Yes, I replaced the code, and is working now. Thank you for updating the previous one also 🙂
However, only problem is that slider is not showing up at all, on Desktop. I tried using Inspect tool on Chrome and check for mobile width, it shows Slider. However, No Slider on Desktop itself (Also, did not checked on actual mobile device, so far).

PS: I have added the Custom CSS in Global CSS area. Can you please check, as why the Slider is not activating or showing up on Desktop.
Can you please try to replicate at your end too. Probably I am missing something.

3.h. You are right, stars are not showing in RVP.

5.a. Yes, this one worked. Thank you 🙂

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

3d.

The horizontal scroll will appear when you have in the RVP more than 6 products…

I tried clicking more than 8 products also, but unfortunately, it kept showing only last 6 visited products in the RVP slider. I think I am missing something. Can you please check and suggest.

Wishlist–
6. How can we make Wishlist feature to work like, as shown in below video (from another wordpress theme)-
https://watch.screencastify.com/v/AkR2fs6WyTYomfeIE5dt

a. Means, when a visitor clicks on the Wishlist heart icon (heart outline), it should changed to Color-Filled Heart, rather than a Tick with “Browse Wishlist” text. (as shown in the video)

b. We do not want to display Browse wishlist text and action on each product in Shop Grid and Archive pages. Rather than that either the Tip text to be as – “Wishlisted” or just nothing (that is No mouse hover Tip, once an item has been wishlisted). A color-filled heart could be sufficient.

c. We do not want visitors to be redirected to the actual Wishlist page, once they click the Heart icon again on the product that has already been Wishlisted

So, what we are looking for is – Clicking back on Heart icon again, (either from Single product page or from the Shop or Archive pages) it should actually remove the product from the Wishlist (as can be seen from video). And this is an ideal working action for Wishlist behave like, and way better approach.

As that way they can remove any product or multiple products from the Wishlist, by being on the Shop or Archive page itself. And we are not forcing them to visit to the Wishlist page first, just in order to remove the selected products from their wishlist.

As, a Color-filled heart icon itself is a Good-Sign that the product has already been wishlisted. And is a Distinguishable factor too.

PS: If visitor wants, they can look into their Wishlist by simply clicking the icon showing at the Top Menu bar (from Header). As this is the ideal position and way in order for wishlist to act or work.
And majority of ecommerce sites shows Wishlist (as above Video) and actions on Shop Grid works the same way as shown.

PS2: There are times, visitors may put any item into wishlist by mistake (or in hurry, or found better product) and simply wants to remove those product from the Wishlist, then they can do that by clicking back the icon again. This way, it will be a very quick process for them, and they can do At-once from the page, while shopping and looking for other products that they need to put in their wishlist.

6.c. In addition to that, there seems an issue in the Wishlist. We tried to replicate by following below steps-

We click the Heart icon on any product to put it into wishlist (from Shop or any Grid or Archive page or Single Product), then when we click Refresh (browser), then the Heart icon on the same product resets back, and shows “Add to Wishlist” again (and not the Text Browse WL)

This happened for both Logged-in users and as Visitors. We tried by browsing other pages, and then visited or come back to Shop again, and found the same behaviour.
Although when we check the dedicated Wishlist page, we found the items are Present there in the page, and shown as Wishlisted too.

PS: We have already added Wishlist URL inside Cache Plugin (LS Cache plugin- Cache > Excludes > Do Not Cache URIs section)
Can you please check that also, whether we did enter the correct way in Litespeed Cache plugin.

6.d. How can we show Wishlisted items on the Wishlist page, with both the options available as Grid and the List View for the visitors to select from and view the list according to their needs.

7. The author (of the theme, as in above video), uses their own Wishlist module, hence it works extremely fast. You can try to find on your own by visiting the page. Action on Click and Results are too fast. (shown in video)

We come across that, on the other hand, The YITH Wishlist module is very slow and I think although Woodmart has integrated the Wishlist feature (do not require 3rd party plugin), but still probably using the same YITH wishlist module code.
Please correct me if I am wrong.

7.b. If not, or In either case, can you please check how the Betheme Developers have integrated the wishlist module code in their theme. And can you please forward this to the Dev team, so that they can also take a look and try to implement something like that. So in order to make it work pretty much Fast like that. Can you and team update the existing code of wishlist, in the future update.

Regards

• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.

Hello,

3.d. I look further and found that it was set as 6 products only in RVP widget settings. Hence, was not showing more than that. However, the moment I set to 8 or more, it then started showing scroll bar, and even more products, that we had set in widget.

6. I tried to recreate the link of the same and then tested in incognito mode of browser too to verify further, and it is now working.

Please check now. You should be able to view now-
https://watch.screencastify.com/v/AkR2fs6WyTYomfeIE5dt

Alternatively, you can directly check on this site (Betheme’s Woo theme)-
https://bit.ly/32fwNv4

PS: From this site, please try to put any item into Wishlist from the shop page, and click-back the heart icon again to see how it works. It instantly reacts and removes that item from wishlist. Number immediately gets updated too.
Similarly, you can check by going to the Wishlist page, and then try to remove any item from the Wishlist. All works instantly, without even Ajax Dull screen (Greyed-out, until result)

6. How can we make Wishlist feature to work like, as shown in above video-
a. Means, when a visitor clicks on the Wishlist heart icon (heart outline), it should changed to Color-Filled Heart, rather than just a Tick (as shown in the video)

Also, can you please find a possibility on this below one. And share the solution.
So, what we are looking for is – Clicking back on Heart icon again, (either from Single product page or from the Shop or Archive pages) it should actually remove the product from the Wishlist (as can be seen from video). And this is an ideal working action for Wishlist behave like, and way better approach.
Whether by snippet code or some other way. This is what is really required.

6.c. I will check by using that option. And let you know how it works. And whether it resolves the purpose or not.

7, 7.b. As you were not able to view that video, hence, probably forwarding it to team may not work either. Even they might also have not been able to view and understand about our suggestion.
Hence, if you could see the video now (I refreshed the link), then could you please share our suggestions (in 7, 7b), to the Dev team.
Or else, you can also share the direct link of site (mentioned above). So that they can try to replicate at their end, and can plan accordingly.

Regards

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

6,6.a.

..you can change the “Added” icon on the heart (Color-Filled Heart)…

Yes, this shows color-filled heart.
Is there any FA number to show it in Red colored
How can we use our own Heart icon (color-filled) instead of Font Awesome. Can you please suggest the code for that also.

7,7b (including 6) – I hope team will surely consider this and bring some better solution on Wishlist.
I hope you might now have been able to see the Video too.

Speed Results, looking only for Mobile (A kind request – Please read this thoroughly and suggest)

8. After testing so many times since last 50 days or so (since Theme installation and after every few days), I found that the Speed Results are pretty much decent for us, in terms of our Hosting speed and Server Response times. And also better, if we compare our site with that of Woodmarts own Demo site (as in Speed Optimization Guide – SOG), in below page-

https://bit.ly/3fKcdpN
with Woodmart’s Demo site URL – https://bit.ly/3qOB4z3
Our site – http://www.vasangini.com (using same Demo – Home Decor)

We tested Home page, both ours and yours demo (as in SOG) side-by-side, with GTMetrix (GTM), webpagetest.org (WPT), and Google Speed Insights (GSI), many a times (few of these results shown below)

We found that Results are comparatively better for our site (compared to Woodmarts own Demo site as mentioned in SOG), in terms of TTFB, fully loaded time, Performance (as per GTM results), Server Response Time, FCP, Speed Index (as in WPT results).
Even with GSI, the Desktop results are also 98-99 for our site.

The only difference is for Mobile results (as per Google Speed Insights – GSI). And this is what we are only concern about. And wanted to know further.

Workflow, Process, Testing
We tried every possibility and gone through each option as suggested in your SOG page too, as below-
1. Checked Server response time (most of the time, ours is better and tested many a times)
Brotli enabled too (Advance compression)

2. Theme Settings > Done, and as suggested. Light bootstrap enabled, Disabled Gutenburg styles, Not using any Google fonts, Lazy loading (from LS Cache plugin), Init Carousel Enabled, WPBakery – disabled unnecessary options, AJAX dropdown ON for menus

3. Images > Home page, as-it-is as imported from the Demo named – Home Decor. Including Sliders too. Infact, almost whole data on site, as it is, like Demo
NOT using Rev Slider., and is removed.

4. Using LS Cache plugin (which we found much better than even WP Rocket – this is just our view) on Lite Speed Servers. Hence much compatible and supporting. Including Brotli compression
and Powerful configuration on Cloud Shared hosting, with below config-
40 GB SSD Storage
6 Cores CPU
6 GB RAM
All recommended settings Enabled, with Deferred JS

5. CDN – Although it is NOT enabled in your own same Demo, but we have Enabled in ours (and can be seen from below reports).

PS: We are Not using any 3rd Party plugin so far (since Woodmart installation) and just the default ones, atleast as of now.
NO additional products (just 8-10, or so, for working and testing purposes)
NO additional pages, except a one or two.
NO additional posts

After following each and every recommendation-

We found that Server Response time in Waterfall (as per Webpagetest), in Your demo site (as in SOG) is almost double or more, in comparison to ours. And All other results of our site seems pretty decent and better, in comparison too. So regarding Hosting and Servers, our site is hosted with, this comes out as satisfactory. And so their overall performance too.
The same can be seen and verified from the below results too

WPT.org results–
Woodmart Demo- Home Decor (as in SOG)-
https://bit.ly/3qQP7V4
https://bit.ly/3KqDTyh

Vasangini (ours)
https://bit.ly/3FP1tRC
https://bit.ly/3rDfYmH

GTMetrix Results
Woodmart (SOG)
https://bit.ly/3GScK58
https://bit.ly/33QDILL

Vasangini
https://bit.ly/33QE0SR
https://bit.ly/3Aj9Un2

Now important one (Regarding Google Page speed warnings)-
We are Not using Font Awesome icons in Menus, as suggested
Not using Google fonts at all. Using Custom fonts
Disabled Gutenberg styles
Using Woodmart Slider (as in same Demo). Rev Slider deleted. Even this was set prior to Deleting too- Slider Revolution -> Globals -> Include libraries globally -> OFF.

Point and Query is –
1. Why we are still getting the jquery related result in Eliminate Render blocking resources. When we have completely removed Rev Slider. Below is what showing –
https://www.vasangini.com/wp-includes/js/jquery/jquery.min.js?ver=3.6.0
What this file is for. As suggested in SOG page, this can be eliminated by disabling Rev Slider. But this is still showing up in Google PSI results). And we have already Deleted or removed that.
How to get this removed further.

2. If every result of our site is comparatively better with these 3 of the major Testing sites, then why ONLY for mobile (as per Google PSI), the result is not as good as it is for your same Demo site (as in SOG)
I found that, for this specific demo (as mentioned in SOG), a Separate Home page is prepared and added for Mobiles, by your team. Please correct me If I am wrong.
Other than that, I think there are few other settings and changes have been made, by team, just for Mobile devices. Am I correct. Is that so.

I wanted to know about those settings and changes specifically. So that we can try by implementing those too. If there is anything else also, then please let me know.

PS: We had already enabled DOM optimization for Mobile in Theme settings > Performance

Overall, how can we improve the results (Home page) just for Mobiles to be shown through Google Page Speed Insight testing. Please help on this.

What else is required, and what is missing from our side, in order to bring the results equal or atleast similar to what is showing for your Demo site (as in SOG).
Yours is showing 90-98 for Mobiles, while Ours shows 62-86 for Mobiles

We only want similar results once on Home page, thereafter we can make further changes according to needs, and will not by worrying about Speed related results. As that would have already been seen and checked by using the same Demo for our site.
We need to get assured just once, regarding speed results for Mobiles through Google PSI

Most Important:
With that said and above request, we do not mean to say or inform, that Woodmart Theme is slow. By no means, we want to convey this. So far, speed from the Woodmart Theme seems pretty decent and much reasonable.
Also, we are Not comparing with any other site or Theme. Nor we want to.

We are just looking at the results of Woodmart’s own Demo site (Home decor, as in SOG link) through Google PSI, and wants to get the desire and similar results with that same Demo, that we are using on our Domain. And that too only concern about results for Mobile devices

Please suggest

Regards

• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

6,6a. Thank you. Will try code for custom icon
Thank you for sharing the video too 🙂

8. OK. As per your suggestion, I have created a New Topic. I wish the concern person will surely go through each point and details that I have posted and surely look into the concern properly and suggest with the best possible solution.
Although I think, I may not get the solution as expected. That is why I prefer to ask you, as I used to get proper response from your side. Also you read the concerns thoroughly and properly, and try to answer with each possibility and best outcome.
Anyways, let’s hope for the best.

Few quick questions–
9. On Single product page, how can we hide the image thumbnails (shown below or besides Main image), just for Mobiles (Means, to be somewhat like what we see in Quick View box, that is without thumbnails)

9.a. On desktops, Tablets – How can we show the image thumbnails on right side of Main image on Single product page. (That is between Short Summary and Main image).

10. How to Justify Text for “Contents” to be used under Woodmarts List Element. I could not find the option to do that.
PS: I could use shortcut keys for other areas like Small description (Alt+Shift+J), but this seems not working in Content for List element. Please suggest.
Also, please ask the team to make this option enabled for List and other elements, or atleast a shortcode could be accepted until then.

11. How to Hide Reviews, just for Shop, Archive pages including Product Grid-Carousel elements
We only want Reviews to be shown on Single product page.

11.b. How can we show background color for Meta Tag – Values, on Single product page, like below-
https://i2.paste.pics/FRBT9.png
URL – https://bit.ly/3rKaKpg
And how to change text color of Tag Values, and mouse-hover colors and mouse-hover BG color
Similarly, color for Meta-Categories – Values on Single product page.

12. How can we show Extra Content Block (separate for each Single product page) in two locations at a time. That is Before as well as After Content. Or After content and Prefooter.

12.b. How can we show Extra Content block Above Related products section on Single product page.
Currently, it show “After” Related products slider or section (even if we choose Prefooter option)

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello Luke,

9. Thank you. Will try that.

9.a. Unfortunately, none of those (as below) have option to show thumbnails at right side (vertical) on Desktops.
https://gyazo.com/5514e2e53ddc6f8f0524957c1ab7235e

I come across below code, that shows the thumbnails at right side (vertical) on Single product page, but with a slight issue.

.woocommerce-product-gallery--with-images.align-items-start{
    flex-direction: row-reverse;
}

Can you please share the updated refine code. As with this above code, it shows the Labels (Sale, New), on thumbnails, rather than Main image

PS: In addition to this, We can then have extra code for labels to be intact (or stay on their original position), that is on Main image. Or probably some other way.

10. As per below screenshot, that shows for Left, Center and right alignments. But there is NO option for Justify alignment of text. (Neither in any of other Woodmart Element, there is any option of Justify Text)
https://monosnap.com/file/wvDQ51gOvAzTOGq1C0Id0U5JuTlVAa

Can you please share the custom CSS for that. In order to justify text for Content of the List Element

11. Thank you 🙂

12.b. I think there must be some way, to show Extra Content block Above Related products section on the Single product page. As this only requires to show above the Related products section.
Probably by Code snippet or some other way. Can you please suggest.

12, 12.b. Can you please forward this to team, so that they can consider it.
So that the Extra Content Block (separate for each Single product page) can be shown in two locations At-a-time. That is Before as well as After Content. Or After content and Prefooter, or Before and Prefooter.
Also, as requested in 12 b.

Regards

• This reply was modified 2 years, 3 months ago by harshwe.
• This reply was modified 2 years, 3 months ago by harshwe.
• This reply was modified 2 years, 3 months ago by harshwe.

Hello Luke,

9.a.

it can be changed via custom code…

As per this code and your SShot, the labels are moved to left side. But originally, they are actually showing at right side of Main Image on Product page.

Please see below-
https://i2.paste.pics/FSKW3.png
Can you please share the revised code, in order to keep displaying the Labels at same right side position.

PS: Also, with this code and in your SShot, the labels are slightly indented towards right side, and are Not showing from the Edge of the left side of Main image. However, originally, Labels start to show from the extreme right edge (or infact with even few more pixels) of Main image.

10. OH. OK. But can you please share the Custom CSS, to align the contents inside the Woodmart’s List element with Justification.

12. Thank you for sharing with the team.

12.b.

Here is a custom code for changing the position of the extra content…

After adding this code, there is a huge space after Extra Content area (It could also be due to spacing after whole Product Tabs Wrapper). As can be seen here-

https://i2.paste.pics/FSKU0.png
So, how can we reduce this space.

PS: It seems there is a different spacing for mobiles, as compared to desktop. Please suggest separately for both.

13. The Wishlist is not working properly. I tried to Wishlist an item from the Shop page (as Guest user). Then I Refresh the page, I found that the Wishlisted items gets reset too. Means they were Not showing as Wishlisted anymore on Grid or Shop page. No sign whatsoever.
PS: However, they are still there and can be seen on the Main Wishlist page. Please try to replicate as Guest user (or in incognito mode)
https://watch.screencastify.com/v/CRMmnOMWq2z12ETd8LLf

Please suggest to resolve this issue.

14. There is a spacing above product image and details on Single product page. How can we reduce that.
https://i2.paste.pics/FSLLV.png
PS: The spacing is different for mobiles. So how can we reduce the spacing, separately for each device.

Regards

• This reply was modified 2 years, 3 months ago by harshwe.
• This reply was modified 2 years, 3 months ago by harshwe.

Hello Luke,

9.a. Thank you for updating the code.
Can you please share that previous code also, just in case, if I decide or need to show the Labels at left side, in future.
b. Also, should I enter this CSS for Desktop area or Global area of CSS.

10. Yes, this worked. Thank you 🙂

12.b. Yes, this worked. Thank you 🙂
However, there is still some extra space left below Extra content block. Probably coming from Tabs-Wrapper area or block, as can be seen from below.
Can you please share what CSS will work to reduce the space further (separately for Desktop and Mobile).
Currently, it is showing 40 for desktop and 25 for Mobiles (each for padding and margin), as can be seen here-

https://i2.paste.pics/FU8K8.png
Mobile – https://i2.paste.pics/FU8KO.png

We want to further reduce 20 px for Desktops (and laptops), and 10px for Mobiles, coming from Tabs-wrapper. And Just on Single product page.

13.

We have the “Save button state…

I already had that option Enabled (set it to ON), as suggested by you earlier (on some other post).
As I mentioned earlier, this is ONLY for Guest users or Visitors. For Logged-In users, it is correctly showing as Saved State. How can we have it work for Guest users or visitors also.

14.

You can change this space with…

After adding the CSS,
This still leaves lot of space for desktop.
https://i2.paste.pics/FU9L2.png

And leaves just few pixels of space left for mobiles.
Can you please share the CSS separately for both the Desktops and Mobiles, as both have different spacing.

Regards