[Resolved] Adding arrows to Woocommerce product gallery in Generatepress

Home Forums Support [Resolved] Adding arrows to Woocommerce product gallery in Generatepress

Home Forums Support Adding arrows to Woocommerce product gallery in Generatepress

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1495368
    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 😉

    #1495474
    David
    Staff
    Customer Support

    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/

    #1495803
    Michał

    Thank you, David!

    #1496535
    David
    Staff
    Customer Support
    #1529501
    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.

    #1529699
    David
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.