When creating/editing a custom single product template all shows well. However, when viewing on front end:
(1) Product image gallery - thumbnails are distorted
(2) The Add to Basket button overlaps the quantity selector, so you cannot use the up and down arrows.
URL: hidden link
Hi, I see the problems you are describing, and I am able to replicate the distorted thumbnail issue in my local site test with the Kadence theme active. I am still trying to replicate the problem with the overlap in the quantity input selector, and I will give you another update shortly.
For a temporary fix, try adding the following CSS to your template's CSS editor panel:
.woocommerce.single-product div.product .wooviews-product-image ol.flex-control-nav.flex-control-thumbs li
{
display:grid;
height:auto;
}
.woocommerce.single-product div.product .wooviews-product-image ol.flex-control-nav.flex-control-thumbs li:first-child {
width: auto;
}
@media screen and (min-width: 576px) {
.single-product .kadence-cart-button-large.woocommerce div.product form.cart div.quantity {
width: auto;
}
}
Okay after a bit more investigating I was able to replicate the overlap problem. It seems that the problem occurs for variable products, but not for simple products. I also see that a CSS solution may not be required, after all. Instead of this code...
@media screen and (min-width: 576px) {
.single-product .kadence-cart-button-large.woocommerce div.product form.cart div.quantity {
width: auto;
}
}
...you can delete this part of the code snippet and work around the problem by going to wp-admin > Appearance > Customize > WooCommerce > Single Product Layout. Scroll down to Product Elements section and toggle open the Add to Cart section. If you choose the "normal" size here, the quantity input overlap problem is no longer visible on the front-end of the site. In my local tests, it does not seem to impact the size of the button at desktop resolutions.
I am escalating these issues to my 2nd tier support team for further investigation, and I will keep you up-to-date here as I receive additional information. Let me know if the suggested workarounds do not seem to be working in your site, and I can take a closer look.
Thanks Christian! Your workarounds worked 😀
Great! I'll keep you posted here as I get more information from my 2nd tier support team.
After some discussion with the team, our developers informed me that we most likely will not change the software to resolve minor display issues like this specific to the Kadence theme's WooCommerce features. We recommend keeping these CSS workarounds in place for now. If this suggestion changes, I will update the ticket here but I suspect the CSS workarounds will be required for the foreseeable future.
Thanks Christian.
The product images being distorted is not actually Kadence but WooCommerce
Also I only switched to using Kadence as Toolset said they were working with them! oh well!
