koemig

Hi @sandipmondal ,

it is a problem on the product pages. An example page: https://holz-tiere.de/produkt/kette-eichhoernchen/

On the main pages holz-tiere.de | https://holz-tiere.de/ohrringe/ | https://holz-tiere.de/ohrstecker/ i can swipe up and down on every area of the screen, including the images. But if you click on any of the products, you will see it doesn’t work in the image area of the Product gallery.

Thank You for getting back to me and have a nice weekend!

PS. There is also a forum thread i opened: https://ww.wp.xz.cn/support/topic/product-gallery-beta-mobile-handling/#post-18459288

• This reply was modified 1 year ago by koemig.

Hi @sandipmondal

Unfortunatly the initial problem i had with the Product Gallery (Beta) – Vertical Swiping in the image area doesn’t work – remains unsolved. Support on the thread offered further help but the issue got marked as resolved and no one got back to me since. I sent in a feature request aswell. I am not sure what’s the way to go from here.

Hi @doublezed2

Thank You for your response.
I posted a request as suggested:

https://woocommerce.com/feature-request/optimization-woocommerce-product-gallery-beta-for-mobile/

I thank you for your work 🙂

Best regards.

Hi @shahzeenfarooq –
First off thank you for your quick response – i appreciate it very much!

I’ve tried using pictures with the same resolution – the result was the same: the arrows are outside the pictures border. After that i activated the option to cut the picture into square dimensions. The grey placeholder is square aswell.

The arrow was now inside most of the pictures but not all. Some odd ones were still rectangular.
It seems it doesn’t like rectangular pictures 🙂

For the adding the code solution i have to ask your advice. I am an absolute beginner and have only been using the visual editor for now. This is the code for the Product Gallery Beta:

<!-- wp:template-part {"slug":"header","theme":"twentytwentyfour"} /-->

<!-- wp:group {"tagName":"main","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"400px"}} -->
<main class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group"><!-- wp:woocommerce/product-gallery {"hoverZoom":false,"lock":{"move":false,"remove":false},"className":"wc-block-product-gallery\u002d\u002dhas-next-previous-buttons-outside-image"} -->
<div class="wp-block-woocommerce-product-gallery wc-block-product-gallery wc-block-product-gallery--has-next-previous-buttons-outside-image"><!-- wp:group {"metadata":{"name":"Gallery Area"},"style":{"spacing":{"blockGap":"0"},"border":{"width":"0px","style":"none","radius":"0px"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group" style="border-style:none;border-width:0px;border-radius:0px"><!-- wp:group {"lock":{"move":false,"remove":false},"metadata":{"name":"Large Image and Navigation"},"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"padding":{"top":"0","bottom":"0"},"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0"><!-- wp:woocommerce/product-gallery-large-image {"lock":{"move":false,"remove":false}} -->
<div class="wp-block-woocommerce-product-gallery-large-image wc-block-product-gallery-large-image__inner-blocks"><!-- wp:woocommerce/product-gallery-large-image-next-previous {"lock":{"move":false,"remove":false},"layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
<div class="wp-block-woocommerce-product-gallery-large-image-next-previous"></div>
<!-- /wp:woocommerce/product-gallery-large-image-next-previous -->

<!-- wp:woocommerce/product-sale-badge {"isDescendentOfSingleProductTemplate":true,"lock":{"move":false,"remove":false},"align":"right","style":{"spacing":{"margin":{"top":"4px","right":"4px","bottom":"4px","left":"4px"}}}} /--></div>
<!-- /wp:woocommerce/product-gallery-large-image -->

<!-- wp:post-title {"textAlign":"center","level":1,"fontSize":"x-large","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->

<!-- wp:woocommerce/product-price {"isDescendentOfSingleProductTemplate":true,"fontSize":"large","style":{"spacing":{"padding":{"right":"0","left":"0"},"margin":{"right":"0","left":"0"}}}} /-->

<!-- wp:woocommerce/add-to-cart-form {"quantitySelectorStyle":"stepper"} /-->

<!-- wp:woocommerce/product-details {"align":"center","className":"is-style-minimal"} /-->

<!-- wp:post-excerpt {"excerptLength":100,"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->

<!-- wp:woocommerce/product-meta -->
<div class="wp-block-woocommerce-product-meta"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:woocommerce/product-sku {"isDescendentOfSingleProductTemplate":true} /-->

<!-- wp:post-terms {"term":"product_cat","prefix":"Category: "} /-->

<!-- wp:post-terms {"term":"product_tag","prefix":"Tags: "} /--></div>
<!-- /wp:group -->

<!-- wp:post-terms {"term":"product_brand","prefix":"Brands: "} /--></div>
<!-- /wp:woocommerce/product-meta --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:woocommerce/product-gallery --></div>
<!-- /wp:group --></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"twentytwentyfour"} /-->

Where do i put your code snippet in there? I’ve been trying to add it via the block indivdual html but it only shows on my website as a text. Sorry for the mess – i hope you can help me 🙂