Support » Theme: Storefront » Product Pagination

  • Resolved battlebridgelane

    (@battlebridgelane)


    Hi

    I’d like to change the previous/next images shown on a n individual product page. I’d like to replace the thumbnail image of the product with a left or right arrow as appropriate.

    Any ideas. Happy to turn off the woo commerce default option if there is a plugin available to help.

    Thanks

    Gerry

Viewing 5 replies - 1 through 5 (of 5 total)
  • Kaushik S. a11n

    (@kaushiksomaiya)

    Hi Gerry!

    Thanks for contacting us!

    I understand you’d like to replace the Next / Prev product thumbnails on single product pages in Storefront with left or right arrows.

    To turn off the thumbnail navigation completely, you could go to Appearance > Customize > WooCommerce > Product Page and uncheck the Product Pagination option.

    To turn the Pagination into left/right arrows, you could try pasting the CSS below under Appearance > Customize > Additional CSS:

    
    .storefront-product-pagination a[rel="prev"] {
      left: 0;
      width: 50px;
      height: 50px;
    }
    
    .storefront-product-pagination a[rel="next"] {
      right: 0;
      width: 50px;
      height: 50px;
    }
    
    .single-product .storefront-product-pagination a img, .storefront-product-pagination .storefront-product-pagination__title{
    	display:none;
    }
    

    I hope this helps! 🙂

    nuswaibah

    (@nuswaibah)

    Hello @kaushiksomaiya
    Is this possible to make this work on mobile view also? I can’t find it on mobile

    Hi there,

    Thanks for getting back to us.

    Can you please add the following CSS code, in **Apperance > Customize > Additional CSS:**

    
    @media(max-width:768px){
    nav.storefront-product-pagination {
      display: block !important;
    }
    
    .storefront-product-pagination a[rel=prev] {transition: left .3s ease-out;
        flex-direction: row-reverse;
        padding-left: 1em;position: fixed;
        top: 50%;
        
        box-shadow: 0 0 5px rgb(0 0 0 / 20%);
        z-index: 1499;
        display: flex;
        align-items: center;}
    
    .storefront-product-pagination a[rel=next] {
        transition: right .3s ease-in;
        padding-right: 1em;flex-direction: row-reverse;
        padding-left: 1em;
        position: fixed;
        top: 50%;
        box-shadow: 0 0 5px rgb(0 0 0 / 20%);
        z-index: 1499;
        display: flex;
        align-items: center;
    }
    }
    

    Let me know how it goes!

    Best,

    nuswaibah

    (@nuswaibah)

    Thanks @daniyalahmedk it worked nicely. I can say, there is no best free theme like Storefront, there is no fast response team from any theme except a storefront team. You guys are amazing, you should receive the international rewards for that.
    Cheers,

    Hi there,

    I am glad this has been sorted out. I’ll go ahead and mark this thread as solved now. If you have any questions, please open a new support request at

    https://wordpress.org/support/plugin/woocommerce/

    Have a wonderful day.

    Best,

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