Return to previous page

Add the New Feature On Website………..

This topic has 8 replies, 2 voices, and was last updated 2 months, 3 weeks ago ago by Jack Richardson

Bagwani

Participant

August 16, 2024 at 18:51

Hello team,

I hope you guys are very well. I need a feature on my website similar to what I’m sending you in a video. Can you watch the video and guide me on how to create something like this on my website?

I want to create three sections on a page: Grocery, Beauty, and Ghee. For example, if someone clicks on Grocery, it should show 3-4 categories under Grocery. Similarly, if they click on Beauty, it should display categories related to Beauty. Clicking on any of these categories should take them to a page with more detailed options.

Can you guide me on how to create this? Please provide some points on how to implement it or any videos that show how to build this feature so I can design it myself.

Your help would be greatly appreciated.

Regards,
BAGWANI

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#410494 Copied Theme version: 9.3.17

7 Answers

Jack Richardson

Support staff

August 19, 2024 at 07:17

Dear @Bagwani,

I hope this message finds you well. We would like to guide you through the process of creating a separated static block using Elementor for your product categories.

1. Begin by constructing a static block with Elementor. Within this block, please incorporate the ‘Product Categories’ element, which can be found here: https://prnt.sc/YeLSw9JI3Jdr.

2. In the widget settings, navigate to the ‘Query Settings’ and specify the categories you wish to display.

3. This procedure can be replicated two additional times, each with different categories selected for various tabs.

4. On your page, add a ‘General Tabs’ element. You can then either:
– Insert the shortcode of the previously created static block in the content section, as illustrated here: https://prnt.sc/11p8hKRN8QEe.
– Alternatively, select the required static block directly from the list, as shown here: https://prnt.sc/TnnQidUgqVkF and https://prnt.sc/8PbsxVLLs-YM.

We trust these steps will assist you in setting up your page as desired. Should you require any further assistance, please do not hesitate to contact us.

Best Regards,
Jack Richardson
The 8Theme Team

#410669 Copied

Bagwani

Participant

August 28, 2024 at 17:20

Hello Team,

Thanks for your help and guidance. With your help, I created this feature, and it’s working well on desktop.

However, there’s a problem: it’s not displaying correctly on mobile. I want it to appear horizontally on mobile just like it does on desktop.

I’m sending screenshots of both the mobile and desktop versions, as well as a screenshot and video of an ideal website that looks how I want it to.

Could you please tell me if I need to add custom CSS or enable a specific option to achieve this?

If you can, please provide a screenshot or video showing how to make these adjustments.

Once again Thanks for helping.

Regards,
BAGWANI

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#412062 Copied

Jack Richardson

Support staff

August 29, 2024 at 07:05

Hello @Bagwani
Could you please, provide us the url of the page where you see the issue ? It can be solved by the custom CSS improves for the tabs element.
Kind regards, Jack Richardson

#412103 Copied

Bagwani

Participant

August 29, 2024 at 07:14

Hello Dear Team,

I had told you that you should search for the “Demo Page” by going to the pages section.

I am sending you a screenshot and a link.

Please check them.

Thank you.

Regards,
BAGWANI

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#412105 Copied
Jack Richardson

Support staff

August 29, 2024 at 08:40
Dear @Bagwani,

We hope this message finds you well. We have noticed that you are currently utilizing the default Elementor widget named “Tabs” on your site. We would like to inform you that our standard support policy does not typically include additional customization for default widgets, as these fall outside our scope of support.

However, on this occasion, we are making an exception to assist you further. We are providing you with a CSS snippet that you can use to achieve your desired customization:
```
@media only screen and (max-width: 768px) { 
    selector .elementor-tabs .elementor-tabs-wrapper {
    display: flex;
    }
}

selector .elementor-tab-mobile-title {
    display: none;
}
```
You can view the expected results on mobile devices by following this link: https://prnt.sc/57-V-PqcGh0w.

Don’t forget to clear the caches on your web-site in your Cloudflare and other cache plugins installed.

Should you require further customization, please submit your request through our dedicated customization panel at the following URL: https://www.8theme.com/account/#etheme_customization_panel.

Thank you for your attention to this matter. We appreciate your understanding and look forward to continuing to support your endeavors.

Best Regards,
Jack Richardson
The 8Theme Team
#412139 Copied
Bagwani

Participant

August 29, 2024 at 10:38

Hello Dear Team,

Thanks for the code, but both versions are showing up.

The existing mobile headline is still appearing along with the new code you provided. This creates a problem with duplication and confusion.

I need the vertical version to be removed when viewing horizontally, otherwise, the double content will be confusing.

Please check if there might be any missing code causing this issue.

Also, let me know if using custom IDs or classes could help fix this problem.

Thanks for helping.

Regards,
BAGWANI

Files is visible for topic creator and
support staff only.

#412168 Copied

Jack Richardson

Support staff

August 29, 2024 at 14:37

Hello @Bagwani

Could you please, check now ?
We resaved the page you modified and cleared all caches.

Kind regards, Jack Richardson

#412214 Copied
Tagged: advanced website feature, best selling woocommerce themes, boost woocommerce performance, ecommerce theme improvement, new feature addition, online store upgrade, website enhancement
Viewing 8 results - 1 through 8 (of 8 total)