Support Center Visit Demo License manager Buy @ envato

Does Betheme have a quickview tray for products/portfolio items?

DanielNolanDanielNolan
in Portfolio

Is there a way to create a tray similar to 'Woocommerce QuickTray' within the portfolio feature that is a part of betheme? Its basically a way to show details of the product/portfolio item in a tray on the shop/portfolio page instead of clicking through to a single product/portfolio page.


Thanks in advance for your time.

Comments

  • PhilPhil

    Hello,

    There is no option to achieve that for the Portfolio pages.

    At the moment it works only for the products.

    If you would like to see this feature in the future updates, please, let us know on the following topic:

    https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest


    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan

    Hello Phil. That’s perfectly ok. Could you please tell me how I would achieve that effect for products using betheme?

    thanks so much

  • DanielNolanDanielNolan
    edited April 2022

    Hey Phil? Could you please explain to me how I achieve the tray effect underneath products using betheme features?

    or even a similar tray effect that I can create somehow? Maybe a dynamic section under a hover image?

    I guess what I am asking is, is there any way to achieve the desired effect on any kind of element or post using betheme?


    Thanks so much!!!

  • PhilPhil

    Please, go to Betheme -> Theme options -> Shop -> Product list, and enable the Quick view option.

    image.png

    Notice that you need to have an Image Frame style that has icons, so it will be any other than Zoom and Disabled.

    image.png
    image.png

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan

    Hi Phil. Thanks so much. Is there any way to make the sliding tray full width of the browser?

  • PhilPhil

    Unfortunately, there is no setting to make it full width.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan

    Could I perhaps use CSS? Sorry for all the questions.

  • PhilPhil

    No problem, I am here to help you. ?

    If you attach a link to your website, I will look to see if there is something I can do with custom CSS.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan
    edited April 2022

    Hey know problem. Thanks for all your help so far Phil.

    I just implemented the steps you mention above but I just get a pop up. As opposed to an on-page tray effect under the product row. You can see my shop page here.

    Products Archive ⋆ St Edmunds (stedmundsadvertising.com)


    Also I've noticed this method only works on the actual shop page and does not work for the shop muffin builder widget that I have on the homepage, is there any way to make it work?

  • PhilPhil

    That is how our Quick view for products works.

    To enlarge the popup, you can use the following CSS code:

    @media only screen and (min-width:767px){
.mfn-popup-quickview .mfn-popup-content,
.mfn-popup-quickview .mfn-popup-content .mfn-popup-content-wrapper{
   width: 100%!important;
   height: 100%!important;
}
.mfn-popup-quickview .mfn-popup-content .mfn-popup-content-wrapper .mfn-popup-content-text{
   height: 100%!important;
}
}

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan

    Thanks Phil you have been an absolute star. My last question is can I disable the link so the product doesn't go through to the product page and simply displays the pop up?

  • PhilPhil

    Please, try this CSS code:

    .woocommerce .products .image_links .link{
   display: none!important;
}

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan

    lastly, is there any way to change the link and quickview icons to icons of my choice?

  • PhilPhil

    This would require theme file modification, but we do not provide help with such customization.

    In that case, you should contact your web developer instead.


    Thank

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan
    edited May 2022

    No that's fine, this is almost perfect. The only thing I need is to have the product gallery images below the product image in the pop up is this possible?


    Also the code you gave me above worked to hide the single product page link in the product overlay but when you click on the image the link still is active. Can the link of the image be removed using CSS?

  • PhilPhil

    The images in the QuickView show only as Slider, and there is no option to place a gallery below the main image.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan

    Thank you so much Phil, how about the other querstion? Is there any way to disable the link to single product page using CSS so all I have is the quick view?

  • PhilPhil

    Sorry, I opened your message before you edited it, and I did not notice the second part.

    To remove everything but the quick view button, please, use this code:

    .woocommerce .products .image_links a:not(.mfn-quick-view){
 display: none!important;
}

    Thanks

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • DanielNolanDanielNolan

    It's no problem Phil. You have been very very helpful. I did use code earlier in the day similar to this but the issue I had was that even with the button gone. The overlay behind it, or the product image itself, was still linked and clickable to the single product page. So people could still get to the single product page that way

  • PhilPhil

    Such change would also require the theme file modification, so, unfortunately, I cannot help with that.


    Best regards

    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.