Return to previous page

Scrollable Section Which Is Sticky on Single Product Page

This topic has 19 replies, 2 voices, and was last updated 1 years, 2 months ago ago by Rose Tyler

ecommercedev

Participant

September 20, 2023 at 00:33

Hi, I am trying to configure the sticky section in my Single Product Page Builder to behave like described below:

Here is how to reproduce what I need:
1. go to website: https://berrybenka.com/clothing/bottoms/282436/ivira-pocket-pants-blue?trc_sale=clothing+women . Don’t scroll just yet. stay on top of the page.
2. click on ‘Rincian Ukuran & Fit’ tab so it opens. Notice the tab height is much more than visible area in sticky right column.
3. now try to scroll down.
– you can see that sticky right column scrolls a little to reveal content of ‘Rincian Ukuran & Fit’ tab
– when we arrive at the very end of ‘Rincian Ukuran & Fit tab the whole sticky right column behaves just like usual sticky container.

I tried with overylow-y for right column but it did not work. Setting scrollable content on tab component is not a solution either. Is there any way to make whole sticky section scrollable like in page above?

#367929 Copied Theme version: 9.1.14

18 Answers

Rose Tyler

Support staff

September 20, 2023 at 07:15

Hello, Ecommercedev,

Thank you for contacting us and for using XStore.

Please provide URL of product from site that uses XStore.

Kind Regards,
8theme team

#367952 Copied

ecommercedev

Participant

September 20, 2023 at 16:13

Sure, here are access details

Please contact administrator
for this information.

#368037 Copied
Rose Tyler

Support staff

September 21, 2023 at 09:18
Hello, Ecommercedev,

Please try to use the next custom CSS code:
```
@media only screen and (min-width: 993px) {
    .element-rVLMz.et_column {
        max-height: 80vh;
        overflow: auto;
    }
}
```
Kind Regards,
8theme team
#368103 Copied
ecommercedev

Participant

September 21, 2023 at 13:25

Hi,
Thanks a lot for looking into the issue! This custom css code does solve the issue with scrolling content. However, it does not work just yet as expected.

When you scroll the right side section (using either mouse or trackpad) it scroll beautifully as expected. However once the right section reaches the end it will not scroll gallery as it did before. To scroll gallery I must move my mouse coursor somewhere outside of product tabs, i.e. over gallery section.

But using keyboard up/down arrows it works just as it should! So we are almost there!

#368161 Copied

Rose Tyler

Support staff

September 21, 2023 at 13:42

Hello, Ecommercedev,

We regret to inform you that there is no superior solution available at this time.

Kind Regards,
8theme team

#368166 Copied

ecommercedev

Participant

September 21, 2023 at 22:09

OK, I see. So forget the complex use case I have for advanced scrolling behavior.

I have rolled back the custom CSS you provided me.

Now I open a product tab on single product page which is quite long. This provokes 2 issues:
– The content of the tab when I scroll all the way down through gallery overlaps with whatever static blocks are below (see screenshot). This happens on both firefox and chrome.
– Because of the above I cannot access/open any other tabs which are pushed off the viewport.

How can I fix that? Enabling ‘Scrollable Content’ to ON does not fix the issue, nor playing with ‘Content Max Height’.

Please contact administrator
for this information.

#368201 Copied

Rose Tyler

Support staff

September 22, 2023 at 07:57

Hello, Ecommercedev,

From what we have understood, the issue can only be resolved by disabling the sticky section. This is because, as we understand it, you want the sticky to function differently when a tab is opened, and to be fixed at the bottom rather than at the top.

Kind Regards,
8theme team

#368218 Copied

ecommercedev

Participant

September 22, 2023 at 21:59

Is it going to be fixed anytime soon? Can you provide me JS fix I could implement on my own risk for the website? I believe its js/modules/ethemeElementorStickyColumn.min.js that is responsbile for this behavior.

#368248 Copied

ecommercedev

Participant

September 23, 2023 at 10:12

This is a basic functionality of your theme that does not work. It is not any customization that is needed here. Please fix it.

https://ibb.co/B4BJGJK

#368306 Copied
Rose Tyler

Support staff

September 23, 2023 at 16:02
Hello, Ecommercedev,

Our reply time may vary depending on the number of requests and is up to 24 hours Monday-Friday and up to 48 hours on weekends. But is usually faster than that. Our developers team will be available after the weekend only.

We have already provided the custom CSS code. Currently, there is no superior solution available. We kindly request you to utilize the custom code or deactivate the sticky option.
We always strive to provide the best possible assistance, however, there are rare instances where a solution is not available, unfortunately.
```
@media only screen and (min-width: 993px) {
    .element-rVLMz.et_column {
        max-height: 80vh;
        overflow: auto;
    }
}
```
Kind Regards,
8theme team

Please contact administrator
for this information.
#368348 Copied
ecommercedev

Participant

September 24, 2023 at 02:21

Nah, I wasn’t rushing you. I was just frustrated it doesnt work and I have no idea how to fix it.

The custom CSS is not really usable in production due to forementioned issues I talked few messages above.

Is there any chance you can assign me some dev I can cooperate with? I believe it could be fixed with some JS snippet to the js/modules/ethemeElementorStickyColumn.min.js file. I mean it for sure would be much easier & faster if you can help me rather than doing the fix on my own.

#368365 Copied

Rose Tyler

Support staff

September 25, 2023 at 10:49

Hello, Ecommercedev,

We appreciate your efforts in confirming the issue, this information is valuable to our ongoing research into the matter.

Our team is committed to finding a resolution, and we will continue to work diligently to identify the root cause and develop a solution. In the meantime, we ask for your patience and understanding.

If you have any further insights or observations that could aid our research, please do not hesitate to share them. Your cooperation is greatly appreciated.

Thank you for your understanding as we strive to resolve this issue.

Kind Regards,
8theme team

#368462 Copied

ecommercedev

Participant

September 26, 2023 at 01:51

Thank you for looking into the issue.

When it can be expected that this task will be worked on? I just need to know if it is days, weeks or months in the backlog?

This will help me to prioritize my work.

Thanks.

#368527 Copied

Rose Tyler

Support staff

September 26, 2023 at 07:49

Hello, Ecommercedev,

Thank you for your response.

We are currently working on a global update, in which there is a possibility that your issue will be resolved (as you will be able to switch to a new single builder elementor and it will work better). The exact timelines are unknown, unfortunately, it could range from a few weeks to 2 months.

Kind Regards,
8theme team

#368553 Copied

ecommercedev

Participant

September 26, 2023 at 14:18

Thanks for explanation and being transparent in that matter.

#368614 Copied

Rose Tyler

Support staff

September 26, 2023 at 15:02

Hello, Ecommercedev,

Thank you for understanding.

Kind Regards,
8theme team

#368620 Copied

ecommercedev

Participant

September 29, 2023 at 01:21

Hi Rose,

Could you give me the unminified file for xstore/js/modules/single-product-builder.min.js? That would help. I have tight deadline so it would help me a lot to fix the issue

#368843 Copied

Rose Tyler

Support staff

September 29, 2023 at 08:04

Hello, Ecommercedev,

We added the file to the Private Content area.

Kind Regards,
8theme team

Please contact administrator
for this information.

#368858 Copied
Tagged: advanced woocommerce features, interactive single product page, product page enhancement, sticky scrollable section, user-friendly woocommerce themes, woocommerce single product, wordpress themes
Viewing 19 results - 1 through 19 (of 19 total)