Custom WooCommerce Slider Using Loopers

[fletcher_austin]

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?

[ruenel]

Hey @fletcher_austin,

Thanks for writing in!

1.) Can you please share the custom CSS that you have added to the pages so we can check why it is not working? Where did you apply the CSS? You might need to force to apply it by utilizing the CSS Specificity.

• CSS Specificity (w3schools.com)

2.) You can use the first slide as a static slide. This slide will be displayed when a featured image exists. You have to use the conditions to be able to show/hide the slide. The second slide will be your looper Consumer.

3.) Yes, absolutely. Just make sure to use the data-x-slide-goto on the variation images so it goes to the corresponding slide.

Hope this helps.

[fletcher_austin]

1. I have tried placing the custom CSS into different places to see if it helps. Everywhere I try it has the same effect.

This is the custom CSS that’s used on the main Product Page that I copied into my Quick View Modal:

// Product Data
// ======================================

.woocommerce div.product form.cart .variations th {
vertical-align: middle;
}

.woocommerce div.product form.cart .variations {
margin-bottom: 3em;
}

.woocommerce div.product form.cart .variations label {
font-family: “Share Tech Mono”;
color: #1e1b17;
}

.variations_form .variations select {
border: 1px solid #41403d;
height: 40px;
border-radius: 2px;
padding: 0 10px;
width: auto;
background: url(…/images/arrow_down.png) no-repeat calc(100% - 10px);
font-family: “Share Tech Mono”;
color: #1e1b17;
font-size: .9em;
}

.woocommerce div.product form.cart .variations select {
min-width: auto;
}

.variations_form .variations .value {
position: relative;
}

.reset_variations {
color:#c3a682;
font-family: “Share Tech Mono”;
}

.reset_variations:hover {
color: #1e1b17;
}

.woocommerce div.product span.price {
color: #1e1b17;
font-size: 1em;
font-family: “Share Tech Mono”;
}

.woocommerce div.product span.price del {
opacity: 1;
}

.woocommerce div.product span.price ins {
color:#c3a682;
}

.woocommerce div.product .stock {
color: #1e1b17;
font-family: “Share Tech Mono”;
}

input[type=“number”]::-webkit-outer-spin-button,
input[type=“number”]::-webkit-inner-spin-button {
transform: rotate(90deg) translate(0px,40px);
height: 100px;
opacity:0;
}

.quantity {
position: relative;
}

.quantity:after {
content: “+”;
position: absolute;
right: 0px;
height: 100%;
pointer-events: none;
color: #1e1b17;
border: 1px solid #41403d;
padding-top: 12px;
width:30px;
text-align: center;
font-size:1em;
}

.quantity:before {
content: “-”;
position: absolute;
left: 0px;
height: 100%;
color: #1e1b17;
border: 1px solid #41403d;
padding-top: 13px;
width: 30px;
text-align: center;
font-size:1em;
}

.woocommerce .quantity .qty {
width: 100px;
padding-left: 15px;
font-family: “Share Tech Mono”;
height: 45px;
border: 1px solid #41403d;
color: #1e1b17;
font-size: 1em;
}

.woocommerce div.product form.cart .button {
background-color: #41403d;
border-color: #41403d;
color: #ffffff;
font-size: 13px;
height: 45px;
line-height: 41px;
letter-spacing: 0px;
padding: 0 20px;
border-radius: 2px;
text-transform: uppercase;
margin-left: 1em;
margin-right: 1em;
}

.woocommerce div.product form.cart .button:hover {
background-color: #c3a682;
}

2. Brilliant idea! Works great! Thank you.

3. I figured out as much after posting the request. I’m working on some other issues with that particular functionality that I may post a separate request for.

Any ideas why the Product Gallery element doesn’t work in the Modal?

Thank you for your help!

[ruenel]

Hey @fletcher_austin,

Can you please share the URL where you have inserted the custom CSS and where we can find the Product Gallery Modal?

Thanks.

[fletcher_austin]

Ok… so I have created a customized solution from top to bottom for the different elements of the product pages. I have figured out almost everything but why the main slider will only allow for the selection of the last variation.

Using a ‘data-x-slide-goto’ attribute, I’ve figured out how to use variation images and the variation selector and have the main slider update the image based on selecting a variation. But it will only show the last variation image even though all of the variation images have been populated in the slider (you can see they are being dynamically pulled into the slider if you use the navigation arrows to find them). I’ve tried different values for the attribute to tie into the looper, but i can’t seem to find the right one to allow for each variation to be seen in the slider.

Here is the test page I’m working with:

https://staging6.gentlemenscompany.com/product/slim-single-torch-lighter/

When you click on any of the variations, only the last one shows up in the main slider, even though all the images are being pulled into the main slider.

The credentials previously shared should still work to get into the site.

Thank you

[fletcher_austin]

After messing around with how many images were in each ‘slide’, I’ve at least figured out that when I use the ‘index’ looper, the issue seems like a numbering issue. If I only have 2 images looping in before the variation images, when I click on the variation images, they kind of work. You can tell that it’s pointing to image #1, then #2, then #3 as so on… but with the slider having other sources for it’s first to slides, it puts those in place of #1 and #2 before it will let you select any of the variation images.

I’ve tried everything I can think of to get the ‘goto’ to point to the proper image index number, but I can’t seem to sort it out.

[ruenel]

Hello @fletcher_austin,

How about placing the featured image last? Reversing the order of the images is probably not the best idea. We will look for other resolution for this one.

Thanks.

[fletcher_austin]

That still runs into the fact that if there is a single ‘slide’ that has dynamically populated content via looper consumer (thus creating more than 1 ‘slide’ within the slide itself) the multi-slide custom attributes doesn’t know how to point to the next ‘slide’ without first going through all of the dynamically populated slides that are hidden within the previous ‘slide’ that contains the looper consumer.

It seems like allowing the slides to be given an ID or a Class that the data-x-slide-goto attribute can point to would be a potential solution for this… as long as additional slides were able to be populated within that ID or class. Given that the {{dc:looper:index}} filter works for populating the images, I imagine the looper would need to be able to ‘wrap’ an index inside of an ID or class… So you could give a slide an ID, and then point the ‘goto’ function to that ID. And then that ID would have a nested index of images.

Anyway… For now, unless I’m missing something, it looks like the data-x-slide-goto function only really works with a maximum of 1 dynamically populated ‘slide’. Should I just give up on this for now then?

Thanks for your help! I understand if this isn’t possible right now… but I feel like the ability to more easily customize product pages within Pro (especially for variable products) is something the community would get great benefit from. I’m trying to unlock it for myself as I build a lot of ecommerce sites and need the flexibility to change designs that the current customization doesn’t really offer.

[fletcher_austin]

I ended up creating my own solutions using custom JS. The indexing of images that are dynamically populated using loopers is definitely an issue that could be improved upon for future theme updates, but I was able to get it done on my own. I basically just had each ‘slide’ in the main slider do the indexing after all of the images were loaded… and then i used custom classing to ‘point’ those images to the proper parent ‘slide’ in the main slider. Adding those two bits of function allowed me to have 3 different dynamically populated batches of images that all point to each other in different ways. It’s a little complicated to get everything pointing in the right direction, but the actual coding of it wasn’t that difficult if the themeco team has any interest in adding this type of flexibility to the sliders.

[marc_a]

@fletcher_austin,

We’re glad that you’re able to find an alternative option to make it work.