Sidebar Icon in Mobile View icon dots replace

Good day.
I urgently need your help. I have found a solution to create variants using an algorithm. These are displayed as a sidebar on the single product site. In the mobile view, the sidebar is folded up and the customer does not know that he can see the variants there. Only 3 points can be seen, sometimes customers click on them and sometimes they don’t. Instead of these 3 points, I would like to add an icon that makes the sidebar understandable to the customer that there are variants to be seen there. How can I put this icon there?

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.woodmart-sticky-sidebar-opener:not(.shop-sidebar-opener)::after {
	font-size: 20px;
	content: "";
	background: url(' ') no-repeat;
	background-size: contain;
	height: 50px;
	width: 50px;
	margin-top: 8px;
}

Add the URL of the icon you want to use in the URL.

Regard’s.
Xtemos Studio.

You are great !!!
Look how beautiful it is now. I have adjusted it a little with some distance 🙂

I have another question about category menu. The mega menu is loaded with ajax for me, so that the page is generally loaded faster. However, it always takes about 4 seconds until the menu is visible. How can I solve this? Check out the video: https://www.awesomescreenshot.com/video/1068106?key=863e31eda4c177dd21d2fc5de47e2e30
Has that to do with the picture, or why is it loading like that? These are just links and nothing else 🙂

Thank you for your great support!

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

In general, our theme is already optimized and doesn’t have too many resources to make your website slow. Most likely, your website performance suffers from the content you have added to your website. It may happen in case of too many plugins, large not optimized images, or other resources. So we suggest you remove unnecessary plugins, install some kind of JS & CSS optimizing plugins like Better WordPress Minify and a caching plugin like WP Super Cache. Also, you can use the GTmetrix tool to see what makes your website slow and optimize these parts of your website.

Best Regards.

OK thanks.

Would it be possible to increase the width of the sidebar for mobile? I have thumbnail for variants that have 2 columns on desktop. (Far right) In the mobile sidebar it only shows one column and that doesn’t look nice. Either the thumbnails have to be larger there, or the sidebar has to be larger in width. Can you create a CSS for me? or a css to make the thumbnails in the mobile sidebar smaller so that there are two columns again?
Example:

Many thanks for your help:-)

“Can I run Elementor and WPBB in parallel to gradually design the pages into elementor, or do I have to do everything all over again in one go?”

Hello,

You are Most Welcome. Using CSS for this could disturb the layout for the title and other things. If you still want the CSS then try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.yarpp-thumbnails-horizontal .yarpp-thumbnail > img {
width: 100px;
}

.yarpp-thumbnails-horizontal .yarpp-thumbnail {
width: 113px;
}

.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
width: 100px;
}

Sorry, you cannot copy the content created with WPBakery to Elementor or Elementor content to WPBakery you have to create them again.

Best Regards.

Ok thanks, but it doesn’t work. There are no changes, not even if I delete the cache.

Can I maybe just change the size of the sidebar, i.e. shrink it so it looks better?

Hello,

To set the width Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.offcanvas-sidebar-mobile .sidebar-container.single-product-sidebar {
width: 250px;
}

Regard’s.
Xtemos Studio.

[Author]

Posts