Add arrows to Product Gallery

Support
#1

Hi,

  • Is there a way to add the next/prev arrows to the Product Gallery?
  • I wonder if we can use new X Slider to pull the images from a product and make it gallery instead of using the pre-built one?
  • Also, there is a misaligned items for Variant and the Quantity, since they are not in the same container, its hard to adjust them. Any help for this would appreciate! I have added a link to the secure note as well.

Thanks

#2

Hello @pnstaff,

Thanks for writing in! It seems that we cannot view the link in the secure note. Your server may be down at the moment. Please double-check it.

Best Regards.

#3

I have the IP restricted for specific countries. Would you let me know what country are in so I can unblock it?
You can put your country under secure note or you can VPN to Canada if possible

#4

Hey @pnstaff,

I was able to check the URL.

Screenshot 2023-02-18 at 3.43.41 PM
Screenshot 2023-02-18 at 3.43.41 PM1782×1294 163 KB

Please be advised that the Product Gallery is actually a default WooCommerce Gallery. We only styled it a bit to give a Themeco touch. You can also see what it looks like with the WooCommerece demos:

Regretfully what you are trying to achieve is already considered custom development and beyond the scope of our support under our Support Policy. It will require custom coding to be able to add next/previous arrows.

And if you want to display something with this kind of alignment:

Screenshot 2023-02-18 at 3.56.51 PM
Screenshot 2023-02-18 at 3.56.51 PM960×674 27.2 KB

You can add this little CSS to override the template default styling:

.woocommerce-variation-add-to-cart span.qty {
    margin-right: 55px;
}

.woocommerce-variation-add-to-cart .quantity input[type=number] {
    min-width: 179px;
}

a.reset_variations {
    margin: 0 15px;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

How you can get started with the styling?
Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:

If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

#5

sorry to butt in here, it’s definitely possible. i do it this way:
Install ACF (bundled plugin)
Create ACF field gallery and display it in the preoducts.
then upload the appropriate photos in the product.
then you can use this turorial:

hope i could help :slight_smile:

#6

Hey @deranaloge,

Thanks for sharing how you have created your own Product Gallery using the ACF Pro plugin.

Cheers.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.