Woocommerce Country dropdown menu not working

Hi

I’ve got 1 x item in our online shop themahojos.com/shop

A buyer from the USA pointed out that the country drop down menu is not working (see screenshot)

I’ve noticed this custom CSS:
/push privmary div to front/
div#primary {
position: relative !important;
z-index: 9999999 !important;
}

`When I remove this CSS the dropdown menu works as normal on a laptop. But, on a mobile you cannot select anything from the /shop page.

Also, on the product page (https://themahojos.com/product/two-wheels-to-chamonix-767-miles-of-blood-sweat-and-gears/) there appears to be a blank box next to ‘choose an option’ and the lines run over the right column content.

I’m confused - are you able to provide a solution?

Hi there

the first problem, please remove code and let me check it on mobile
the second problem can be fixed by this css code:

.woocommerce .variations .label {
    display: block;
    color: black;
    white-space: initial;
}

Let me know results

Hi - thanks for the new CSS code. That fixes the issue on laptop for both shop pages and product pages and the drop down country menu.

But…On mobile…the only way to click through to the product from the shop page is to hit the green ‘sale’ button. Clicking on the item and clicking on the ‘select options’ button does not take you into the product details page.

When you go into the product details page on the item, the ‘choose an option’ for delivery options drop down menu does not work.

Hope you can help further!

Hey there

ok, please try this code now:

aside#secondary {
display: flex;
}

media=“only screen and (max-width: 768px)” {
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
width: 100%;
}
}

Thankyou so much - it has fixed the issue! Really appreciate your help with this.

Thanks!

Hi, there

I will close this case now, Feel free to contact us again if you have other questions

Thanks!