Hello-
I’ve searched everywhere I can to figure this out, but there are certain detailed issues I’m still running into.
OVERVIEW: I’m trying to create a “Quick View” modal for each of the products in my shop archive page. While I still have styling and other tweaks to make, there are specific challenges that I want to make sure I can figure out before taking a bunch of time to build something that won’t work in the end.
PROBLEM 1. Some native elements don’t work correctly in the modal: I wanted to have a simple product display for the quick view modal, but when I try to use certain elements like the Product Image Gallery element, it doesn’t work properly at all. I also have custom CSS for the Add to Cart Form that isn’t working either (although it works just fine on the Single Product Layout page).
REQUEST 1: Can you help be figure out why the custom CSS for the Add to Cart Form is not working correctly? And… is there any chance that the functionality for Variable Products has been updated to allow custom builds of the form that are more detailed than simply using the “Add to Cart Form” and then having to style it via CSS?
This is how I want the form to look.
I copied the CSS into the form in the Modal and only SOME of the code seems to be working and I don’t know why.
PROBLEM 2. Troubleshooting a Custom Slider: After struggling with the native elements not working, I decided to try to build a custom slider based on this video that I found linked from the forum by one of your team members (Cornerstone gallery slider using native elements) AND based on this post from the forum regarding using Loopers to grab WooCommerce Gallery Images (Looper Provider with WooCommerce Product gallery).
REQUEST 2: The query string given in the forum post above only pulls in the gallery images without the featured image. I tried adding the featured image meta to the looper provider, but when I do that, the FIRST gallery image disappears. Is there a way to query BOTH the featured image and the gallery images that I’m missing?
I will send a secure note with the login credentials of the stagging site I’m building this on. When you log in, you will need to navigate to the Shop archive page and click on the Quick View Modal to see what I’m working on.
REQUEST 3: If I wrap the whole row in a DIV and add the custom attribute “data-x-slide-context”, would I be able to include the variations selector as a controlling element of the top slider (where the selection of a variation shows the image of that variation in the slider)? If so, what query would pull in the variation images?