Site logo

[Support request] Wondering how to create WC/product-category/xxx/ image with floating caption…

Home Forums Support [Support request] Wondering how to create WC/product-category/xxx/ image with floating caption…

Home Forums Support Wondering how to create WC/product-category/xxx/ image with floating caption…

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #639297
    robchanoi

    Just wondering how to create an image like this where a caption of the name of the product category floats up when you scroll over it and it lists number of products within the category –
    https://ld-wp.template-help.com/woocommerce_59189/

    Under “browse our categories” there are 4 categories.
    I’ve tried dropping in various elements from elementor including the WC ones or GP shortcodes but not seeing it.

    Many thanks if you’re able to shed some light.

    🙂

    #639339
    David
    Staff
    Customer Support

    OK that would take quite a bit of Custom CSS. If you can provide a Site URL with the Category shortcode in place and make sure it includes the title and number of products we can see what we can do 🙂

    #641535
    robchanoi

    Many thanks again David and my apologies for taking so long to reply.
    Should I disclose my site here or through a a private email?
    Thank you.

    #641547
    David
    Staff
    Customer Support

    Hi there,

    you can edit your original topic and add your like to the Site URL, this remains private.
    And we can see if its do-able 🙂

    #643905
    robchanoi

    Hi, topic edited and here is the code for this specific category as it appears on the home page:

    [products limit=”8″ columns=”4″ category= ”Men’s Pleasure Toys”]

    Kind regards.

    #644353
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Maybe something like this would work?:

    .elementor-image .wp-caption {
        position: relative;
    }
    
    .elementor-image .wp-caption .wp-caption-text {
        background:  #000;
        color: #fff !important;
        position:  absolute;
        width: 100%;
        bottom: 0;
        transition: bottom 500ms ease, opacity 500ms ease;
        opacity: 0;
    }
    
    .elementor-image .wp-caption:hover .wp-caption-text {
        bottom: 50%;
        opacity: 1;
    }
    #644704
    robchanoi

    Thanks Tom,

    Where exactly should I paste this piece of code if you don’t mind advising?

    Many thanks.

    #644873
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.