Theme issues

[Sprado]

Hello,

I have some issue with my site I hope you can help me fix it.

1- When I add a product to cart, the pop-up displays draft products in you might also like, this awful, it shouldn’t display any of my draft products at all. “screenshot”

2- Breadcrumb is not aligned with the page width or layout, it takes the whole width of the page, it should be aligned with the top bar and menu elements. “screenshot”

3- I disabled the image zoom and now when I click on the image it opens up with a black background which is contrasting with the product image, I managed to make the background white but I couldn’t make the arrows black, can you help with the code please. “screenshot”

4- the product page layout is set to accordion, but there is a weird behavior when I open the first one which is the description and scroll down to open the next tab, It opens the tab but doesn’t show the beginning of the content, it shows the end of it.
“I recorded a video for it”

https://monosnap.com/file/9xDKjWV1edJDe38520Rfl3HnBAP7Kb

Please check the screenshots and video to understand my issues.
I hope you assist me with my issues

Kind regards

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Sorry for late reply.

1. Please download file and replace in themes/claue/core/libraries/vendors/woocommerce/init.php

2. Please add below code to Claue > Theme Option > General Layout > Custom CSS

.woocommerce-breadcrumb {
	width: 1170px;
	margin: 0 auto;
max-width: 100%;
}

3. Please add below code

.pswp__button--arrow--left, 
.pswp__button--arrow--right {
	margin-top: -25px;
	width: 50px;
	height: 50px;
}
.pswp__ui--idle .pswp__button--arrow--left, 
.pswp__ui--idle .pswp__button--arrow--right {
	opacity: 1;
}

button.pswp__button, button.pswp__button:hover, 
button.pswp__button--arrow--left::before, 
button.pswp__button--arrow--right::before {
	background-color: #333 !important;
}
.pswp__button--arrow--left::before {
	left: 10px;
}
.pswp__button--arrow--right::before {
	right: 10px;
}
.pswp__button--arrow--left {
	left: 15px;
}
.pswp__button--arrow--right {
	right: 15px;
}

4. I checked on your site and on my local it still work well http://take.ms/aKWCF

Did you fix this?

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

[Sprado]

Hello Harry,

Thank you for responding to my ticket.

1- You didn’t share the file to download, I don’t see any files attached.

2- Breadcrumb looks much better now.

3- I added the code but it changed the background behind the arrows,  not the color of the arrows.
and it is not aligned with the arrow, it is above it. (screenshots)
plus if you check on mobile you will see the arrows and its background hiding the image. (screenshots)
A simple black arrow will be perfect if you can help with that.

4- No I didn’t fix it, in order to see it, you have to visit a product with a description and don’t collapse the tab but scroll down the content and open the next tab like I showed in the video.
because a normal user will open to read the content and scroll down all the way till next tab.
here is a link https://www.cabreet.com/product/apple-iphone-8/

I hope you follow up with me.

Kind regards

 

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

1. Sorry i forgot attach file, please try download again

3. I have to change background of button because can’t change background image of button. It use image for more icons (zoom, close, next, prev). They don’t use font. Please add more code

.pswp__button--arrow--left:before, 
.pswp__button--arrow--right:before {
    top: 10px;
}

4. I check it still work well http://take.ms/eaoeD

It issue still there please un-minify JS

Kind regards

Attachments:

You must be logged in to view attached files.

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

[Sprado]

Hi Harry,

1- It works well now.
will you include this change in the next update so it doesn’t override this modification?

3- I added the code and it is fine.
I hope you reconsider the design in the future because the black background doesn’t match the product background, and all the products have a white background.

4- I disabled the minification for js files but still doesn’t fix it.
you test it wrong and I explained how to test it in the comment and the video.
If you are a user you will open the tab and read the content all the way down and then open the next tab.
but what you did you toggled the tab open and close in a second, nobody does that.
Please visit the product again as I showed in the video and pretend that you going through the content until the next tab then click to open.

Thank you

[Harry]

Hi,

1. Yes, it will included for the next update.

3- This code is core of WooCommerce, you only can customize by upload image to your site. not in theme

4- When it close above tab the content of above tab will collapse. For long content we recommend use tab. The accordion use jQuery library, and it same as our theme, it not a bug, please check at https://jqueryui.com/accordion/ to compare http://take.ms/XmJV4

Kind regards

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

[Sprado]

Hi,

 

3- Sorry, I didn’t know that I thought it is your design styles

4- Ok I will use the tabs but the problem with tabs, the heading is small and it is easy to lose when you scroll down the content, then user don’t know that there are another tabs.
maybe I will try to add a sticky menu for the tabs so when the user scrolls down, he can see that he is reading the description and can click on other tabs.

Thank you very much for the help.

Best regards

[Sprado]

I am sorry to bother you again.

I tried to add this code to make the tabs sticky but it didn’t work.

.wc-tabs {
position: sticky;
position: -webkit-sticky;
top: 60px;
}

 

Do you have a solution for that

[Harry]

Hi,

Sorry for late reply.

I need more time to find solution.

Please add below code

.single-product #jas-wrapper {
	overflow-x: initial;
}

Kind regards

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

[Sprado]

Hi Harry,

I added the code and caused problem to the site layout, after 3 days of investigation I found the cause it is  overflow-x: initial;

when I added this code the layout on mobile is bad, the menu is shortened and any overlay is not clickable sometimes for example when you click on the menu and try to click on navigation.

Can you test this code please, it looks normal on desktop but mobile is different story.

 

Kind regards

[Harry]

Hi Sprado,

Please change code to

@media only screen and (min-width: 1025px) {
.single-product #jas-wrapper {
	overflow-x: initial;
}}

The sticky it only can’t work when don’t have overflow on layout so it only can work on desktop

Kind regards

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

[Sprado]

Hi Harry,

 

Thanks for providing the code.

Unfortunately, it is not helpful because the sticky is important in the mobile version more than desktop, in mobile the user gonna scroll a lot to get to what he wants, plus I doubt that it is clear that there are other tabs, so people gonna miss it.

I hope you find a solution for this because so far the tabs and the accordions are not helping and the functionality is bad.

Please just consider finding a solution, it would have worked best with the sticky element but the parent has overflow: hidden; make it impossible to work around it.

Thank you

 

[Harry]

Hi,

It have better way is use javascript because css sticky it now still limit. Please contact this team https://bit.ly/2Loo6ke who can help you.

Kind regards

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

[Sprado]

Thank you for recommending the service.
for now, I will try to find a solution or the code snippet that might make it work.

Thank you for the help Harry

[Harry]

Hi,

Please share me know if you find a solution.

Thanks

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

[Sprado]

sure I will let you know.

Thanks a lot for everything.

 

Good Luck

[Author]

Posts