Product page tabs

Hi
I want Product page tabs to be all closed by default.
In the image attached, you will find that description tab is opened by default. And it has a huge gap even it has no content.
1- How to make it fit only entered content with no such huge blank space?
2- How to make it close by default when loading page?

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the funtctions.php of the child theme:

setTimeout(function() {
    var $tab = jQuery('.basel-tab-wrapper').find('a.active');
        $tab.siblings('.wc-tab').hide();
      $tab.removeClass('active');
}, 10);

Remove the gaps in the text http://prntscr.com/pb8i09 to get rid of the blank spaces.

Best Regards

Hi ELise,
Thanks for reply
As for gaps I don’t know what adds them. I upload all product data by excel. I don’t know why they appear. And only in description. I’ll contact Wp All Import for it

About that Auto-Collapse the code is not working It gave me error and didn’t work. Frpleaced that error with correction they gave me and gane me a new one, replaced it and gave a third
Please check image and advice

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Sorry for confusing, add the snippet to the Custom JS section in Theme Settings on Document ready.

Best Regards

Hi Elise
Works fine now
Thanks a lot

Please check that video here that explains page margins on mobile. How to make all margins the same because they are not equal and right is not like left. related product margins are different than product info tabs and images margins.

https://www.loom.com/share/5c15f61829e04f86a1c7a62fc1116f82

How to solve that?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.rtl .product-design-compact .basel-scroll-content {
    padding-left: 0;
    padding-right: 0;
}

Best Regards

Hi ELise
Thanks a lot for the code
Code is working fine on mobile
But on desktop it is cutting content and arrows from left. This issue appears only in rtl Arabic only. In English it works fine. I tried to remove “rtl” from the code and it didn’t work
https://www.loom.com/share/ddb472ef29e546688e1b04ef09714dfe

Update:
This issue appears in some products and doesn’t in others

Hello,

Please provide a few products URL with the problem.

Best Regards

Hi
Here it is
https://riversworld.net/ar/shop/%d9%86%d8%b3%d8%a7%d8%a1/%d9%81%d8%b3%d8%a7%d8%aa%d9%8a%d9%86-%d9%86%d8%b3%d8%a7%d8%a1/%d9%81%d8%b3%d8%aa%d8%a7%d9%86-%d9%86%d8%b3%d8%a7%d8%a6%d9%8a-%d9%82%d8%b5%d9%8a%d8%b1-%d8%a7%d8%ae%d8%b6%d8%b1-%d9%83%d9%85-%d9%82%d8%b5%d9%8a%d8%b1/

Hi
Have a look here also please
https://www.loom.com/share/02dac954ba68414d915e3a8f5cf89b99
Some filters are displayed cut partially fro right in Arabic. In the morning it was colors and fabrics. Now it’s fabrics only

Hello,

I do not see the problem on the product page https://prnt.sc/pc5uzr

As for the filters add colors into each attribute item and check.

Best Regards

Hi
Please have a look here for more explanation
https://www.loom.com/share/d4948044ad234192bf5b8cb089357bb6

Hello,

Move the provided below code from Global to Mobile field of the Theme Settings > Custom CSS.

Best Regards

Hi Elise
it works fine now on all devices

Is there a way to fix this filters issue that I have explained earlier?

Hi
Another issue here for size guides. They appear normally in some places and disappear from others.
Check here please
https://www.loom.com/share/60a1e134d9554f748bcdb3797349079b

Hello,

Please describe the problem in the words, video and screens are good as a piece of additional information showing where and how. Which filters do you have the problem? They are in Arabic I do not understand the problem.

If the size guide has been created and assigned to a category but does not appear in the product page, it is necessary to check if it has not been hidden in the product page https://prnt.sc/pcdul7

Best Regards

Hi
The problem is mentioned in words previously.
Fabric attributes in Arabic are not displayed as they should. You will find that their beginnings are cut. This issue doesn’t occur in En only Ar.

As for size guides I’ll check products. But all products are uploaded via excel sheet with same parameters. But I’ll check them anyway

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body.rtl .sidebar-inner .basel-woocommerce-layered-nav .has-scrollbar .swatches-display-list>li {
    padding-right: 15px; 
}

Correct the errors in the CSS as all the further code would not work. https://prnt.sc/pchfc6

Best Regards

Thanks a lot, Elise for the code. It works fine now

As for the last part you mentioned I didn’t notice any errors in the code. If there is, please specify it to me and tell me how to fix it.

Thanks 🙂

Hello,

The correct style is padding-bottom

Best Regards

[Author]

Posts