Requirement — simpler product gallery for mobile
I want to remove the thumbnail slider for product gallery for WooCommerce single product template in the mobile version and add input radio input buttons like in the slider element. The default element for product gallery has no such options.
1st option — hide thumbnail slider from product gallery
I can hide the thumbnail slider div and add an input field as absolutely positioned on the gallery, but I don’t know how to dynamically calculate the number of images and work the JavaScript for input buttons.
2nd option — hide product gallery and use slider with query loop
Alternatively, I tried to hide the whole gallery and add a nestable slider element to query the images. I added an image element in one slide. In the query loop, I used Post type: Media and in the image element {post_id} as dynamic data. This shows all the images in the media library as slides.
Issue — unable to dynamically add post id
To filter the images for current product, I added {post_id} in the Child of: input but it did not work. If I add the post id for the product as a number, it works properly. How can I grab the post id of the product used for populate content in the template and input it into the Child of: field.
What to do
Which of the two methods above would be easier and which one better for page speed? Is Bricks planning something related to this or am I missing something that already exists?