[Resolved] Adding arrows to Woocommerce product gallery in Generatepress

[Michał]

Hi!
I cannot find any tips on how to add arrows to Woocommerce product gallery in Generatepress based website. Does Generatepress use standard Woo slider? Is it Slick Slider? Is there any filter to add some options to slider’s script?

Thanks in advance in helping me to add arrows to product gallery 😉

[David]

Hi there,

the Carousel is 100% woocommerce – they use slick slider which does have those options.
This article explains how to display them:

https://wpbeaches.com/add-navigation-arrows-in-woocommerce-product-gallery-slider/

[Michał]

Thank you, David!

[David]

You’re welcome

[Christine]

Is there a way to do this without adding FontAwesome to our site just to get the two arrows? Looking for this same functionality.

[David]

Hi there,

the CSS provided in the article i linked to uses this CSS to add the icons:

a.flex-next::after {
    visibility: visible;
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    margin-right: 10px;
    font-size: 20px;
    font-weight: bold;
}

a.flex-prev::before {
    visibility: visible;
    content: '\f053';
    font-family: 'Font Awesome 5 Free';
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
}

Instead you could output an image by using this code instead:

a.flex-next::after {
    visibility: visible;
    content: url('full_url_to_your_image/image.png');
    margin-right: 10px;
}

a.flex-prev::before {
    visibility: visible;
    content: url('full_url_to_your_image/image.png');
    margin-left: 10px;
}

You will need to make sure the image is the exact size you want it displayed, as it cannot be altered with CSS using this method.

[Author]

Posts