Product category section

Hi,

I am using product category, type Grid and with ‘standard’ design. In Elementor I see in the mobile view the text inside the prodcut ‘square’ with an icon. However on the website I see the name of the category below the square, so this does not match.

Please see examples.

– picture with file name smart select is from website..
– picture with file name schermafbeelding, is from Elementor.

I would like to have the blocks on the website similar to what Elementor is showing. On desktop this is the case but strange enough not on mobile.

many thanks.

Attachments:

You must be logged in to view attached files.

Hello,

Is there any chance that you could give me access to the dashboard area so I can have a look at the settings on your website, please?

Kind Regards

Hello,

Thanks – please see Private section

Hello,

May I disable 3rd party plugins for testing?

Looking forward to collaborating with you!

Kind Regards

Hello,

Which plugins? The website is live so we cannot afford to break things.

Hello,

In this case, please make a copy of the website and move it to the staging platform, so the changes will not affect the production site.

https://www.wpbeginner.com/wp-tutorials/how-to-create-staging-environment-for-a-wordpress-site/

Looking forward to hearing back from you!

Kind Regards

Hello,

I have disabled all plugins except Woodmart and Elementor. Same issue persist. I did this on a staging site.

Hello,

Send me access to the staging site so I can investigate the issue there.

Thank you in advance.

Kind Regards

Hi,

Please see private area for access.

Hello,

Please add the code below into the “Global Custom CSS” area in Theme Settings -> Custom CSS:

body .cat-design-default .wrapp-category {
	overflow: hidden;
}

body .cat-design-default .hover-mask {
	position: absolute;
	inset-inline: 20px;
	bottom: 15px;
	padding: 0 !important;
	text-align: start;
	transition: transform .3s ease;
	transform: translateY(100%) translateZ(0);
}

body .cat-design-default .wd-entities-title {
	position: absolute;
	bottom: 100%;
	inset-inline-start: 0;
}

Clear the cache and recheck the issue.

Kind Regards

You are the best. Case closed and works like a charm.

Hello,

Don’t hesitate to reach out if you have any more questions or concerns. We’re thankful that you took the time to share your concerns with us.

Wish you all the best.

Kind Regards

[Author]

Posts