Setting up some features and home page for demo 5

[netmined]

Hi Harry,

We are finishing the set up for our second store on Claue and need your help with some features. With this one, we downloaded all of the demo (except images) and we would like to try setting it up based on the look of Home Page 5.

We have gone through the demo and document and figured many things out ourselves but here is what we still need your help with:

– On the page title, how do we get rid of the grey band of colour behind the title and make it transparent? And how can we change the colour of the page title? Can we do this ourselves without custom CSS code? Please let us know which fields we need to change.

– We have home page 5 loaded from the demo. Below the first main slide, there are three smaller rectangle images and then three larger images below that. Could you please advise what pixel size the smaller and larger images are which you are using in the demo? (we didn’t import the images so we can’t see it)

– Below this, in the ‘Our Products’ section, how do we get the correct products to be visible in the right categories – “Best Seller”, “Featured”, “Sale”? For example, we have a product which we loaded which is in the ‘sale’ category, but it doesn’t appear here. Also, the products ‘featured’ in woocommerce do not appear in the featured section here. And finally, the ‘Top Rated’ product feed is meant to be for the products with the best reviews, right? We set up a product with a 5 star review but it also doesn’t appear there. Can you advise on how to load up the correct product feeds?

– In the blog feed on the home page, we have loaded up a test post however the picture is cut off and smaller than the dummy image containers next to it. Could you please advise what pixel size the container should be? Also, how can we remove the “by Admin” and the date from the blog posts?

– In the footer, we used the code that was loaded up for the social share buttons (FB and Insta) in the demo. How can we make these links open on a new tab? Normally in the past we were able to add some css code to do this ourselves but the code that’s already there is a bit different to what we’re used to.

– Below the social shares in the footer, we have set up a widget to display reviews. Currently it displays a thumbnail of the product as well as the name of the product and user. We need it to display just the comment (or a part of it if it is too long), no picture and the number of stars. How can we tweak it to do this? (we did try the comments widget but this did not display the number of stars and still also showed the name of the user

– For some reason, the shop page now displays two menus on top – the home menu as well as a separate categories menu. Why is this and how can we remove this?

– How do we remove the SKU and categories tags from the product listings?

– We need to tweak the name of the “Delivery and Return” box on the product detail page – it should read “Delivery and Returns” – how/where can we change this? (we don’t care what it’s called in the back end, just to change it to be correct on the front end)

– On the backend, there are two blog pages created – both with WP Page Builder. Why are there two and what’s the difference between them? (It seems that the ‘Blog’ page is the normal default one which also feeds into the home page blog feed. So what is the ‘Blog standard’ page for and where does it show up?

– Instagram feed. We would like to be able to set this up as per the new rules which you published. We want to set it up on the home page and also on the sidebar. Do we need to download Elementor to be able to make that new instagram feed plugin work? Basically, we just want to be able get our feed displayed in exactly the same way as the demo. Could you please let us know if there are some specific pixel or height/width requirements for this?

– And finally, we noticed that in the demo, WP Page Builder was also used even for pages which had basic text only – no special columns or anything else. So we know for future when we need to create text only pages, any reason why you created this through Page Builder rather than just direct in WordPress?

Many thanks in advance for your help, much appreciate it.

[Harry]

Hi,

1. It now only use Custom CSS to change color please add below code

.page-head::before {
	background: none;
}
.page-head h1 {color: #fff;}

and change #fff to your color

2. On demo 5 the big image is 1920 x 650 and 3 small images are 600×400

3. Please change order of product to Acsending https://prnt.sc/shyapq

4. please add thumbnail size for blog section https://prnt.sc/shybww and add custom code to remove date
and author

.post-info span {display: none;}

5. Please add code

target=”_blank” to next to href link https://prnt.sc/shye4w don’t use css for it

6. I’m sorry the widget not support show only comment

7, Please go to Widgets > WooCommerce Categories Menu Sidebar and remove widget

8. Please add custom CSS code

.product_meta {
	display: none;
}

9. Please use plugin Loco > Theme > Claue > create new language English-US and change the text as you want http://support.janstudio.net/forums/topic/theme-translation/

10. We recommend use Blog normal without page builder we create the Blog Standard only for demo

11. You don’t need element, just copy short code and insert to any editor.

12. If you use just title and text don’t use PageBuilder just use Classic Editor. When we create demo we duplicate content and edit not build from scratch.

Btw, please split your questions to 3-4 questions per reply. We tired to check a long list of question because we have to scroll more time to check your question and sometimes we will miss your one of all.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you very much for your help and replies. And we are really sorry about including so many questions on the one request – we will split it up in the future as you’ve requested.

We’ve applied the fixes and here is the follow up from them:

3. We’ve changed the order to ascending, cleared the cache but unfortunately it didn’t work. The same incorrect products are still showing up. Actually for some of the categories, the same demo products are showing up. The sale one has non sale products, the top rated one is missing the product with the review etc etc… Would you be able to let us know how to fix this?

Also, for some reason, we now have a big white space on the home page between the “New Arrivals” section and the “From Our Collection” section. Do you know why this is and how we can remove it?

4. We have added the thumbnail size as you advised, cleared the cache, but the size did not change and it is still smaller than the demo size. The original photo is 800 x 720 so it is definitely big enough. Could you advise how to get this fixed to have the photos the same size as the demo?

5. Thank you for this code but this one didn’t work. It looks like it might be the code for the email but this one does already open in a new pop up. We need the facebook and instagram to open in the new tab. Would you mind taking a look and sending us the code for that?

6. Thank you for letting us know. Is there any way we can remove the picture from the review?

9. Thank you for this tip, we will try the plugin. Once we change the title that we need to change, do we have to keep the Loco plugin active so that the change appears on the front end or can we remove the plugin and the new title will still appear?

Many thanks again for your replies, much appreciate it.

 

 

 

[Harry]

Hi,

3. I help you setup by change order by “Menu Order” i just save and update it now ok

4. I see the image size changed https://prnt.sc/siwe5a

5. I help you correct the code

6. Please add code

.woocommerce.widget_recent_reviews .product_list_widget li img {display: none}

9. You still have to keep plugin active.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you for taking a look and for the fixes.

3. The products which display are now better but some of it is still incorrect. For example, the Women’s Dark Brown Retro Wooden Sunglasses we just did a test 5 star review and it should be showing up in “Top Rated” but it isn’t there. Also, there are still non sale products showing up in the Sale section. We checked and there are enough demo sale products loaded so they should be showing up on that view.

4. Yes, we had changed the image size but it didn’t seem to help this picture we loaded – it was still in a smaller box compared to the demo ones next to it. But we think we have found the right size – it should be something like 570 x 370. It seemed to fix the issue of this picture.

5. Thank you! 🙂

6. Thank you again! 🙂

We still have that big white space on the home page between the “New Arrivals” section and the “From Our Collection” section. Do you know how we can get rid of this?

Many thanks in advance!

[Harry]

3. Please try add review on some product and sale price for some product because they will show full 4 products

7. Please try clear cache because i check on my computer it work well https://prnt.sc/sj48cu

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

(1) regarding the product display on the home page in the Best Sellers, Top Rated, Sale and Featured categories, we changed all of the demo products except for one to draft and removed them from public view so we could test what displays here in this section. We also added an extra review to one of our own products which we have already loaded on the site. But we are still getting problems with the product display in this section.

The Top Rated section now shows 4 products but 3 of them do not have any review at all (out of the 4 which are showing up, only the sunglasses have a review). And the other product which we loaded up a review for – the Messenger Canvas Bag – should be appearing there but it isn’t.  Could you please let us know how to fix this?

(2) Also, if there are no sales in the store, how do we control what displays in the Best Seller section? At the moment, there are no sales and the Best Seller and Top Rated sections both show almost the same products. Could you please let us know if there is some way we can set up what products display in this Best Seller section?

(3) Still on the front page, we have noticed that the middle product in the box display under the slider (between the “Lookbook” and “Up to 70%” is missing the countdown timer and product name label which is on the demo. The product name and price now appears separately below the box. Could you please let us know how to fix this and get it to look like the demo with the timer and the rest?

(4) And still on the front page, we have now been able to set up the Instagram feed as per your instructions but for some reason, it doesn’t appear on mobile. How can we fix this?

With the Insta feed, we also tried setting it up in the Claue Instagram Feed widget in the Primary Sidebar  (this is set up to display on individual product detail page). We have entered all the details correct (it says that the id is incorrect but this is not true, it is the same set up as for the front page feed), but the feed still does not display. We can get it to display in the sidebar in the other instagram feed widget from Smash Balloon plugin but the display on this insta feed widget is not good – it shows exactly the same as the front page, all 8 pictures and very small. So we would like to set up the Claue insta feed widget which allows control over how many images you can show in the same way as it is in the demo. Could you help us do that?

Thank you kindly for all your help.

 

[Harry]

Hi Netmind,

1. This issue of WooCommerce they will show amount of product you set. If you only review for one product and set show 10 products it will show 1 review product + 9 normal products without review

2. It now WooCommerce get normal product to section (Best seller, sale, top rated) when your site live it will get real product with best seller and sale, top rated.

3. Please edit the product you want show countdown sale and set schedule https://prnt.sc/slglgu

4. Please use shortcode

[instagram-feed num=4 cols=4]

and change 4 as amount of image and column you want to show.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you very much for your replies and fixes. Here are our responses:

1. We understand that if it is set up to show 4 products and for example there are only 3 on sale, then it will show some extra other product. But actually, sometimes this is happening and other times it is not. Sometimes it displays one way, other times another way, and there are bugs in what is showing up. All four of the categories are set up to display 4 products each and the products which we have loaded with the photos are the real ones for our store. Here are the issues:

– The Sale display shows only 3 products, not 4. It shows the only two products on sale plus one demo product we kept for another reason.

– The Featured display also shows only the one product which we marked as Featured. It does not show anything else

– The Top Rated display is showing 4 products but it is missing of the products where we added a review – the  “Women’s Burgundy Canvas Messenger Bag”. Why is this one not appearing when we only have two products with reviews?

So the Top Rated and Best Sellers sections always show 4 products but the Sale and Featured sections show less than 4 products if there are less than that number of products in that category.

Could you please advise us how to fix these issues?

2. Thank you for your reply but we this that the Best Sellers section is some kind of random order even after the sales in the store are made by the customer. We have another live Woocommerce Claue store and some of the products which appear in the Best Seller section do not have the most sales.

Our question was, do you know if there is some way we can control what products to display in the Best Seller section?

3. Thank you very much, this worked. 🙂

4. Not sure what you did but thank you, we can see the instagram feed in the mobile now.  But we also asked about setting up why the Claue Instagram Feed widget wasn’t working when we had it set up in the Primary Sidebar and now we notice that it has been completely removed and also even the widget option for the Claue Instagram Feed has been removed. Did you do that? And why? We liked the Claue feed much better than this one.

The new widget has also created a big white space in the sidebar after it and before the next widget “Recent Posts”. Could you please advise how we can fix this?

Many thanks in advance.

[Harry]

Hi,

1. This issue of WooCommerce i still not understand why it not show 2 rated products. For best seller please try edit product and change number of total sale to check https://prnt.sc/slv2qt

2. You can control by put number of total sale for the products you want to show in Best Seller

4. We have to remove old Instagram widget because Instagram use new API to generate Instagram Feed if use our old code when the site have more user view the API limit and it can’t show the feed and show error text.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you for your replies. Here are ours:

1. So how do we fix the problem of the Top Rated products list not showing all the top rated products? Right now, this list is useless to us if it is showing up products without reviews and is missing products with reviews and we have no way of controlling it. Could you please investigate and let us know how to fix this? I am sure that other stores using Claue will have this same problem so if we can get this fixed, it will benefit you as well as the other Claue owners since you will be able to fix a known bug in the theme.

2. Thank you very much for this tip, we will try it out. 🙂

3. That’s a real shame. Your widget was nicer than this one from Smash Balloon. Any plans for you to create your own again with the new Instagram api?

Also, with this new widget, we have a big white space after the widget and before the next one – the “Recent Posts”. You can see it when you load up any product page. It is not visible on mobile, just on Chrome, Edge etc. Could you please advise us how to remove it?

Many thanks in advance once again.

 

 

[Harry]

Hi,

1. it work when i use shortcode

[top_rated_products columns="4" limit="4"]

3. We try implement new API for our widget but not success. I’m sorry for it.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you for your quick reply, again, much appreciate it.

Here are our replies:

1. Thank you very much, this fixed it! 🙂

3. Sorry to hear that about your widget. You forgot to reply to our question about the extra white space we have now with this widget. Could you please let us know how we can remove it? Here was the original question: With this new widget, we have a big white space after the widget and before the next one – the “Recent Posts”. You can see it when you load up any product page. It is not visible on mobile, just on Chrome, Edge etc. Could you please advise us how to remove it?

Thank you very much once again.

[Harry]

3. Please change shortcode of instagram widget to

[instagram-feed num=6 cols=2 showfollow=false height=402]

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you very much for getting back to us so quickly and for the snippet.

The snippet worked and got rid of the extra white space when it was with the 6 images you specified in it but 6 images is too much for us in the feed. When we reduced it to 4 across 2 columns, the white space at the bottom returned. Would you mind taking a look and letting us know how we can remove it? Is there some solution where we can remove the extra white space no matter how many images are in the feed?

Many thanks again for your help!

 

 

[Harry]

Hi,

please change number of height and down the number 402 to fit your site.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you very much for that. 🙂 We’ve played around with the number to make sure that it also displays properly on mobile. At 335 it seems to do that. But there is still a little bit of padding between this widget and the next one under it on desktop (not on mobile). Is it possible that this instagram feed widget has some bigger envelope or padding default setting on desktop which is causing this?

[Harry]

Hi,

The configure on desktop will affect to all all devices.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you for your reply. We agree, we can see that the desktop configuration affects the mobile. But is there some kind of bigger padding setting around this widget for the desktop? We want to be able to remove some of the extra white space just in the desktop. Is there a different way we can remove it apart from the code snippet which you already sent us?

Thank you kindly for your help.

[Harry]

Hi,

Please go to Instagram Feed > Settings > Customize and change padding to 0 https://prnt.sc/snje15

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you for your reply. We just checked and it is already set to 0 so this is not what is causing the issue.

Anything else you can think of which might be able to fix it?

[Harry]

Can you take a screenshot where has the issue. i’m not clear this.

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you for your reply, here is a screenshot:

http://prnt.sc/sntxnb

You can see the bigger white space below the instagram feed widget (top right of the page) and the standard white space below the next widget (further below that).

It is the extra white space which we want to remove. We used the snippet you already sent us and got it to the lowest number possible without having the instagram feed pictures cut off on mobile, so now it needs something else to remove the rest of the white space.

Thank you once again.

[Harry]

Hi,

Please change height to 275 and add below code to claue > theme Option > general layout > custom CSS

@media only screen and (max-width: 640px) {
#sb_instagram.sbi_width_resp {
	height: 335px !important;
}}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Thank you for this code snippet. We had to change the height to 340px for our site but it has worked and the extra white is gone. Thank you very much, we really appreciate your help! 🙂

[netmined]

Hi Harry,

Apologies for this message. We noticed that the white space on the home page which we asked you about earlier on this thread is there again. It appears after New Arrivals and before From Our Collection. Here is a screenshot:

http://prnt.sc/sxd58d

It seems to have become bigger and it also appears on the mobile. Just to make sure that it wasn’t just a caching problem, we had someone in another country load the page and the space also appeared.

Could you please let us know what is causing this? The space seems to have been there for quite a while now.

Many thanks in advance for your reply, we appreciate it.

[netmined]

Hi Harry,

We haven’t heard back from you regarding our query. It’s one which we flagged to you around a month ago but we haven’t heard back.

Would you mind taking a look and letting us know how to fix this issue? Many thanks in advance for your help, much appreciate it.

[Harry]

Hi Netmind,

Sorry because we miss your reply.

I just edit products element and edit slider setting and save. it now the space removed.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Hi Harry,

Many thanks for taking a look and doing the tweaks, we appreciate it.

We just cleared all our caches including Siteground and took a look but the change is not showing up everywhere. We even tested it on a remote proxy server. In most browsers including mobile the space is there. For us it shows without the space on the browser we use to make the changes but everywhere else it is still there (it will probably be the same for you). On the proxy servers, the space was almost always there. We tested it from US, Canada and Japan, always there.

Do you know what is causing this and how to fix it?

[Harry]

Hi,

I see the issue because your site has not enough 12 products but on slider of products you set show 12 products.

It now your site has 7 products. Please change per page to 7 https://prnt.sc/t4pqil

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Harry, you’re a genius! That was definitely the issue. All fixed now. Thank you, really appreciate it! 🙂

[Harry]

You’re welcome! Have a great day!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[netmined]

Thank you and you too!

[Author]

Posts