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

[harshwe]

Hello Luke Neilson,

Wanted to know-

1. I found that our site shows Default 404 error page (like below) for any non-existing page or URL.
https://bit.ly/3Hkaval

So I looked at Dashboard > Pages section. But unfortunately I could not find any such existing page, there, with the name 404 or similar.
I also looked at Theme settings > General > Custom 404 page, but None of the page is Pre-selected there too.

1.a. So, just wondering, from where this current 404 page coming or fetching from.
Is this the default 404 page, coming from the Woodmart. Means, is this default one, hard-coded within the Theme itself.

1.b. Cannot we edit this existing Default 404 page.
And do I have to redesign our own 404 page from Scratch.

1.c. If we need to have a custom 404 page for our site, then do we need to create a New page from the Scratch and set it under General > Custom 404 page, to make it appear.
Thereafter, will that default 404 page be replaced with our custom one, then.

2. I found that the Video (Youtube) I am using on below page (in Draft), is not showing-up in Full Width (or bigger), like it used to show earlier.
https://www.vasangini.com/wp-admin/post.php?post=7603&action=edit

Earlier (with previous theme), I was being able to view this Video in Full-Width (full screen sort). (that is, before I switched to Woodmart from previous them)
I tried settings of Row Element of WPBakery and few here and there, but unable to make it view Full Width or Full-Screen.

2.a. How can we make it appear as Full-Width
PS: I do not want to set it as background video and without sound.

2.b. 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.

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

In either case, how can we make it appear Full-Width or Full-Screen, by maintaining the aspect ratio.

Regards

• This topic was modified 2 years, 10 months ago by harshwe.
• This topic was modified 2 years, 10 months ago by harshwe.
• This topic was modified 2 years, 10 months ago by harshwe.
• This topic was modified 2 years, 10 months ago by harshwe.

Hello,

1a,c. It’s the default 404 page that comes from the Woodmart theme by default. It can be changed on your own custom page owing to the “Custom 404 page” option.

https://gyazo.com/0547d3728f943d6a0c0455b70d93e314

2. You have disabled CSS styles of the video element in the WPBakery CSS generator (https://prnt.sc/25t2epg) so enable it and check the issue.

The CSS styles of elements that you are using must be enabled in the WPBakery generator before using them.

Kind Regards

[harshwe]

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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

1b,c. Yes, you are right.

2. You are welcome!

2b,c. There is only one video element, unfortunately.

3. It makes sense, our team will consider it.

3b. Recently Viewed products can be shown only in the widget areas (https://prnt.sc/25zkglq), sorry.

Here is a custom code for adding scroll for the widget.

.widget_recently_viewed_products {
    position: relative;
    overflow-y: scroll;
    height: 100% ;
    max-height: 350px;
}

https://gyazo.com/59d79d71e7d65abdae15ec595b4f3877

Kind Regards

[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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

[Luke Nielsen]

Hello,

3. We will add the “Recently viewed products” element to the page builder in our future updates.

3c. First of all, display it somewhere and send me a link then I will try all my best to help you.

4. Custom CSS for changing the “Scroll to top” button.

.scrollToTop {
    right: 170px;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e1eced9c;
    border: 2px solid #938989d9;
}

.scrollToTop:hover {
    color: #fff;
    background-color: #4d83d3;
}

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.

[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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

3d. I checked your recently viewed products on the single page and unfortunately, on my side it doesn’t work (see below video).

https://monosnap.com/file/296i7PgtEZl4bOOz4QcblDlObChf8n

4. Use “right” and “bottom” values to change the position of the “scroll to top” button.

https://monosnap.com/file/t4NwIOMCzczfmDH4XtVc6BXg5yO7l5

https://monosnap.com/file/3wwmvIEYDnQ1CX8PX91ZAqcnQ071v5

d. I have already added a bit of transparency and 100% opacity while the user mouse hover.
You can change it via the “background-color” in .scrollToTop:hover, .scrollToTop selectors.

https://monosnap.com/file/vnPjdZn1J5oGLIkc80VSDw4bpDWDUv

Kind Regards

[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, 10 months ago by harshwe.

[Luke Nielsen]

Hello,

3d. Yes, it works via the admin panel. Also, add this custom CSS to the “Custom CSS for desktop” area.

.widget_recently_viewed_products .product_list_widget {
    display: flex;
    margin-bottom: 15px;
}

.widget_recently_viewed_products .product_list_widget>li .widget-product-wrap {
    display: block;
}

.widget_recently_viewed_products .product_list_widget>li img {
    min-width: auto;
    max-width: 100%;
    margin-bottom: 20px;
}

.widget_recently_viewed_products .product_list_widget>li {
    width: 100%;
    max-width: 200px;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    border-right: 1px solid rgba(119,119,119,0.2);
    padding-right: 15px;
    padding-left: 15px;
}

.widget_recently_viewed_products .product_list_widget>li:first-child {
    margin-left: -15px;
}

Unfortunately, our structure doesn’t allow us to add the carousel with an arrow for the Recently viewed products so please, remove older custom CSS code for scroll and replace it with this one.

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

e. The reason is that the widget is cached for the visitors, you can also check on the default theme and you will see the same.

5a. The HTML structure allows us to set the color only for the quantity of the products.

.checkout-order-review .product-quantity {
    background-color: #d9988987;
    border-radius: 2px;
}

https://gyazo.com/9578945426742c6585ac4b71a6484e05

5b. Sorry, but it cannot be changed because all will break.

https://gyazo.com/e8dad93fca506a66b6ae7870c6a29485

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.

[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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

[Luke Nielsen]

Hello,

3d. Please, replace the code for horizontal scroll with this one.

.single-product .widget_recently_viewed_products {
    width: 100%;
    max-width: 1200px;
    overflow: auto;
}

.single-product .widget_recently_viewed_products .widget-product-wrap {
    width: 170px;
}

https://gyazo.com/88f639cf73af9706060f7d3688a2343c

3g,f. If you want to use horizontal RVP on mobile then move that code (the code that makes RVP horizontal + scroll ) to the global area.

Here is a code for hiding the title.

.single-product .widget_recently_viewed_products .wd-entities-title {
    display: none;
}

https://gyazo.com/3ade9e64ae3c8b42cd3fc9754e7c6330

Or you can restrict characters by the below code.

.single-product .widget_recently_viewed_products .wd-entities-title {
    overflow: hidden;
}

https://gyazo.com/b5b78caae7fa2e92d5ed0cf891f42e66

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

https://prnt.sc/26d4nrk

5a. Please, try to add this box-shadow: 0px 0px 5px 1px #f3390edb; css property to the “.checkout-order-review .product-quantity” selector.

https://gyazo.com/b93e343818a65639a7e4c861842b463a

5c. Unfortunately, we cannot separate them because in the structure of HTML they are together in one HTML element.

https://monosnap.com/file/sE2X2zsG5XccnOQ7PoaxjovQysFwk3

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.
• This reply was modified 2 years, 10 months ago by Luke Nielsen.

[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, 10 months ago by harshwe.

[Luke Nielsen]

Hello,

3g. Yes, it’s the correct code for disabling titles.

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

The below code is for restricting the line.

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

https://gyazo.com/7205f9545c6c75feb96d0e258f739b8f

3d. We are truly sorry for the inconvenience you experienced. I have updated that code and now it should work well. So please replace the code.

https://gyazo.com/320faeedbf50134ec41cbc15af2f0225

3h. It seems that the RVP element doesn’t have the stars rating, you can check the video below.

https://monosnap.com/file/FGVErALXvmUMweBHpi5mlKI5eZOXdM

5a. Please, replace the old code with this one.

.checkout-order-review .product-quantity {
    background-color: #d9988987;
    border-radius: 2px;
    padding: 2px;
}

https://gyazo.com/a389d2b1cee00cd187da278912396108

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.

[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, 10 months ago by harshwe.

Hello,

3g, 5a. You are welcome!

3d. The horizontal scroll will appear when you have in the RVP more than 6 products.

https://gyazo.com/032d392f3a564deb7822a2cec61bbac7

On the mobile, it appears when you have more than 2-3 products in the RVP.

https://gyazo.com/65b8d13a1d87fd19d061fe935e47f7cc

Kind Regards

[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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

[Luke Nielsen]

Hello,

3d. Maybe this RVP doesn’t work properly with the horizontal scroll, could you try to disable all custom CSS that makes RVP horizontal and check how it works.

6. Unfortunately, I don’t have access to watch this video.

https://gyazo.com/6e6172e75329c9b8ba97944f752a88f4

c. Here is a code for disabling redirection to the wishlist page.

.product-grid-item .wd-wishlist-btn .added {
    pointer-events: none;
}

https://gyazo.com/553d0d8d197df72f1d40f922a0a4de5f

c, 6d.Unfortunately, at the moment we don’t have such an opportunity to change the event of the “Wishlist” button.

6c. We have the “Save button state after adding to the list” option which saves the “Browse Wishlist” button for added products to the “Wishlist” in Theme Settings -> Shop -> Wishlist. Also, read the description about this option.

https://gyazo.com/69a797ed68a3f7723186d87d0acae40d

https://gyazo.com/7452bff76fab7a44cc7a6f2dded6851d

7,7b. I have forwarded your suggestion to the team. They will consider it.

Kind Regards

• This reply was modified 2 years, 10 months ago by Luke Nielsen.

[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, 10 months ago by harshwe.

Hello,

6. Sorry, but there’s currently no way to do that, we appreciate you taking the time to let us know what you’re looking for.

From all of these, you can change the “Added” icon on the heart (Color-Filled Heart).

.wd-action-btn>a.added:before {
    content: '\f004';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

https://gyazo.com/6496f742d2ae6ce2f12d37b2e25ec580

7,7b. Yes, of course, I will send it to the team with the video.

If there’s anything else we can do, please get in touch.

Thanks for sticking with us!

Kind Regards

[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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

6.6a. In order to paint the heart icon in the red color, you should just add the color: red; value to the above code.

https://monosnap.com/file/eS0xfCMNgPWTafqNozESJa8Zi0zd05

https://monosnap.com/file/IIJ87MymjXVQRpiSFqCWiWw7aIPZUP

Here is a code for using your own icon from the Dashboard -> Media.

.wd-action-btn>a.added:before {
    content: ' ';
    background-image: url('https://www.vasangini.com/wp-content/uploads/2021/12/Wishlist-heart-svgrepo-com-3-25x25-4th.svg');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;
}

https://gyazo.com/70db5e39fed47d646022785bbddf65fb

Please, create another topic for questions about the Performance. It will be taken by another specialist who knows about it more than me.

Kind Regards

[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, 10 months ago by harshwe.

Hello,

I am terribly sorry for the delay.

9. The below code for hiding the thumbnails, also add it to the “Custom CSS for mobile” area.

.single-product .product-image-summary .thumbnails {
    display: none !important;
}

https://gyazo.com/f3ce3c8521a08a799c46ba02074c1b31

9a. All positions of the thumbnails you can find in Theme Settings -> Single product -> Images.

https://gyazo.com/5514e2e53ddc6f8f0524957c1ab7235e

It is still impossible to change them in any other way, unfortunately.

10. Try to use the “Align” options for Justify content.

https://monosnap.com/file/wvDQ51gOvAzTOGq1C0Id0U5JuTlVAa

Of course, I will send your proposal to the team.

11. The code for showing background color for Meta Tag, Categories.

.single-product .tagged_as a,
.single-product .posted_in a {
    padding: 4px;
    border-radius: 5px;
    background-color: rgba(0,0,0,.02);
}

.single-product  .tagged_as a:hover,
.single-product .posted_in a:hover {
    background-color: rgba(0,0,0,.06);
}

https://gyazo.com/5c3f587663f1fdd4f32cb69a8d0ed1a9

12, 12b. Sorry, but there’s currently no way to do that, we appreciate you taking the time to let us know what you’re looking for.

If there’s anything else we can do, please get in touch.

Cheers,
Kind Regards

[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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

[Luke Nielsen]

Hello,

9a. You’re right, it can be changed via custom code, so you can check it.

.single-product .woocommerce-product-gallery {
    flex-direction: row-reverse;
}

.single-product .product-images .product-labels {
    right: 145px;
}

https://gyazo.com/f9fbc07f23245dc6f4d101afe93d792b

10. Sorry, but we don’t have such plans for adding the “justified text” option.

11. It’s my pleasure!

12. I have already sent it to the team.

12b. Here is a custom code for changing the position of the extra content for the “prefooter” option, paste this code to the functions.php file in your child theme.

add_action('wp', function () {
    $extra_position = get_post_meta( get_the_ID(), '_woodmart_extra_position', true );
    
    if ( $extra_position == 'prefooter' ) {
        remove_action( 'woodmart_woocommerce_after_sidebar', 'woodmart_product_extra_content', 30 );
        add_action( 'woocommerce_after_single_product_summary', 'woodmart_product_extra_content', 15 );
    }
}, 2000);

https://monosnap.com/file/IOqj4z9Ua5858h78MLGRcvviZaC2up

https://monosnap.com/file/RstG8MpXQRarZZHEKGR9oEJN8cZOte

Cheers,
Kind Regards

• This reply was modified 2 years, 9 months ago by Luke Nielsen.

[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, 10 months ago by harshwe.
• This reply was modified 2 years, 10 months ago by harshwe.

Hello,

9a. I rewrote it, so you can check the above code again.

https://gyazo.com/30004c51c4620c7f8fb1c9d7868cca47

10.

.wd-list .list-content {
    text-align: justify;
}

12b. It seems that the indent comes also from the “widgetised” element by default so the below code fixes the issue.

.wpb_widgetised_column.wpb_content_element,
.single-product .product-extra-content {
    margin-bottom: 0;
}

https://gyazo.com/3abaa2e2caeb86c3d1d762f42f9ef6a3

13. We have the “Save button state after adding to the list” option which saves the “Browse Wishlist” button for added products to the “Wishlist” in Theme Settings -> Shop -> Wishlist.

https://gyazo.com/73714dcb6be7d45736762f0b98b09500

https://monosnap.com/file/whsf7vs5Fh5winWD6KXamidBhMYL5T

14. You can change this space with help of the below code, choose the “margin-bottom” value that suits you.

.single-product .website-wrapper .whb-header {
	margin-bottom: 30px;
}

https://gyazo.com/27df7d808d5fa1c05729c72734939493

Kind Regards

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

[Luke Nielsen]

Hello,

9a. Here is a code for displaying labels from the left side.

.single-product .woocommerce-product-gallery {
    flex-direction: row-reverse;
}

.single-product .product-images .product-labels {
    right: auto;
    left: -14px;
}

https://gyazo.com/1a6fd94f32de2ca3e71ffcc9103694d3

9b. Enter this CSS to the “Custom CSS for desktop” area.

12b. In order to reduce spaces for the desktop and laptop, enter the below code accordingly to “Custom CSS for desktop” and “Custom CSS for tablet” areas.

.single-product-page>div:not(:last-child) {
    margin-bottom: 20px;
}

.single-product .product-tabs-wrapper {
    padding-bottom: 20px;
}

https://gyazo.com/23ccfc5161fe281b7f84c1cd04d35c05

Hence the below code enter into the “Custom CSS for mobile” field.

.single-product-page>div:not(:last-child) {
    margin-bottom: 10px;
}

.single-product .product-tabs-wrapper {
    padding-bottom: 10px;
}

13. In your case you have a cache plugin that will always cache the product page therefore the button will always be the same.

https://monosnap.com/file/3FH3xE63IqAY9YNFY8tiSXGnRCYXbL

14. The above code you can use for the desktop (also if you want a bit less indent from below you can reduce the margin-bottom value), so here is the code that you can use for the mobile devices (enter it to the “Custom CSS for mobile” field).

.single-product .website-wrapper .whb-header {
	margin-bottom: 35px;
}

https://gyazo.com/ff06818d1ebc8bbd2d8c2d76b494bdca

Kind Regards

• This reply was modified 2 years, 9 months ago by Luke Nielsen.
• This reply was modified 2 years, 9 months ago by Luke Nielsen.

[Author]

Posts