WooCommerce Website Mobile View Overflow Issue - woocommerce

I have a wooCommerce site + elementor.
For mobile view when a user selects an input field the screen overflows and causes the below issue:
Screenshot:
Video link: https://streamable.com/dtf3if
I tried adding to the
-section: Overflow: hidden
-body: Overflow: hidden
-input field: Overflow: hidden
but so far no luck.
Any suggestions on how would be able to fix this?
website = https://richtercaterers.com/checkout (you would need to add an item into your cart -> then click "proceed to checkout") and this issue only appears on mobile view)
Thank you!

Related

Mobile menu not clickable when submenu is expanded

I’m working on a website for a client and use the Neve theme. I setup the basics (still have to make most pages), but I noticed the mobile menu isn’t clickable when the submenu is expanded. I can’t figure out why this happened, it worked before.
On desktop the menu works like it should.
Website: https://www.by-denn.nl/
After you click to open submenu on mobile, some div with class ".nav-clickaway-overlay" shows up. Just add this in your style.css
.nav-clickaway-overlay { z-index: 0 !important; }
I had the same problem on the pages or post when the function of "Remove unused CSS" of my WP Rocket plugin was active, once I deactivate this function the menu returned to work.
I hope this was helpful.
It is important to check page by page because even if you disable the function in the administration, it can sometimes still be connected to the page or post with the error.

Wordpress Mobile view Sidebar

Good day,enter image description here
I'm building an ecommerce website on wordpress
I have a sidebar on my products page but when on mobile view, the sidebar is seen after all the contents on the website.
Is there any way I can make a button that will be sticky and when its clicked the side bar will show on mobile view
I want it to lool like what's in the picture or the link below enter link description here
I'm using astra theme
Thank you...
Maybe u can inspect your browser (right click - inspect) and check your properties in elements when you click the "sidebar" html tag.
On the right side you will finde the Sytles properties where you can try out your changes.
I guess you have to adjust the width.
Edit: If you work with elementor you have the possibility to add css code in the tab "additional css".

Images not displaying on WooCommerce single product page

I'm facing a situation in my shop page.
https://www.soygorrion.com.ar
Images are not displaying in the single product page of WooCommerce. I can see the thumbnails, but when I click in the product to see it the image does not display.
Example: https://www.soygorrion.com.ar/tienda/bolsos/ombu/
I tried to regenerate thumbnails but it doesn't work. Also I'm able to see the images on the Multimedia page and open them from their link with no problem.
Can someone give me a hint? When I inspect the element from chrome I see that the image URL links are written this way
data-default="[{"large":["https:\/\/www.soygorrion.com.ar\/wp-content\/uploads\/2019\/12\/Pin_Paco-650x650.jpg",650,650,true],"single":
Edit: also I tried to deactivate plugins to see if that was the problem.
thank you!
Okay, the problem was this CSS code:
div.noo-woo-images-wrap {
display: block;
}
display was set to none.

Sticky CTA Bottom Button Only On Mobile to Wordpress Website All Pages

I am planning to add a button which will be sticked to bottom of the screen, centered, only on mobile to my wordpress web site but ı must to insert this button to all pages on my website. I don't want it to show on desktop or any other devices.
Can someone help me about this.Because ıdont want call now button plugin.I want to use this without plugin.
All help is appreciated. Thank you very much!
You can add button HTML with class name in a widget and call widget code in the footer. Then you can add a media query to button class to display in mobile.

How can I change the background color on my ecwid photos?

Hello Im working with ecwid the shopping cart program , Iv uploaded some photos of my products and categories and cant seem to customize the background using css. Everytime I enter a css code for an element , nothing happens
I have tried this:
.ecwid-responsive table.ecwid-productBrowser-subcategories-mainTable
{ background-color: black}
please go here to see exactly what Im referring to my website
When I add background: red to the element.style {} in the developer tools (right click > Inspect Element), when I have selected .ecwid-productBrowser-productsGrid-mainTable, it works without a problem.
The table you are trying to target (.ecwid-productBrowser-subcategories-mainTable) is a style of display: none, so it's not visible AND it's the wrong table to target (at least on this page).
This is Daria, Ecwid Customer Care Team. I checked your website and as I see, you added "png" images to your category thumbnails. In order to change the background color for these thumbnails you need to add the following code to your active CSS theme in your Ecwid control panel>Settings>Design:
table.ecwid-productBrowser-subcategories-mainTable img {
background-color: black !important;
}
Then click "Save” (Ctrl+S) and reload the storefront page.
Please, see the screenshot to know how category thumbnails look with this code: http://take.ms/U5oNA Hope, this helps.
Also, if you have any issues with your Ecwid store, you can always contact us directly via email or live chat. You can see all available ways of how you can get help from Ecwid support if you go to your Ecwid Control panel and Click “Get help” link in the right upper corner.
Thank you!

Resources