Support Center Visit Demo License manager Buy @ envato

WooCommerce Shop Page Modifications

hillarygbartonhillarygbarton
in Updates & Changelog

I have a few questions pertaining to this WooCommerce Catalogue 'shop' view.

https://floatingptstg.wpenginepowered.com/filter-view/

Can you help me turn off the the product cards rollover zoom-in effect? I tweaked a setting somewhere (either in the Theme options or somewhere on the template itself), and I can't figure out how to turn it off. You can see this scale effect behaving properly on the Cherry, Black Currant, and Hops cards. (On the other two cards, I created my own preferred rollover effect for, but you can see how the zoom is ruining that effect.)

Is it possible for the widgets to be above the shop content (product cards) instead of on the left sidebar? Like this example. I created that example using a category archive template, but it only allows you to filter by two variables (Category & Tag) so I prefer the Woo-Commerce shop format. I don't see any way to create a widget block aside from on a sidebar.

Can you tell me how to remove or tighten up the big blank space between the widgets, on the sidebar? (Category, Health Solutions, Product Form, Brand) They used to be closer when all attributes were on the same widget - but I wasn't able to put the attributes in the desired order, so I inserted them as 3 separate widgets. I appreciate any insights you can provide.

Lastly, is it possible for the megamenu to have an animated entrance? I would love for it to fade in down, or zoom in down.

I have sent my updated login credentials through the message portal. I really appreciate your help!

Thanks,

Hillary

Comments

  • PhilPhil

    Hi,

    1) Please go to Betheme -> Theme options -> Shop -> Products list, and change Images to Default.

    image.png

    2) Edit the shop template and put the sidebar element above your products.

    image.png

    3) Please use the following CSS code:

    .woocommerce .column_sidebar_widget .widget{
 margin-bottom: 10px!important;
 margin-top: 10px!important;
 padding-bottom: 10px!important;
}

    Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

    4) You can set up animation in the header template by changing the Submenu Animation in the Menu settings.

    image.png

    Best regards

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

    Hi,

    Thanks so much for your help! I have a few follow-up questions pertaining to this same page:

    https://floatingptstg.wpenginepowered.com/filter-view/

    1.) When you hover over the filter 'pills' there is a grey box that appears above it with the same text. Can I remove this?

    2.) How do I change the fonts for the filter widgets?

    3.) Can I add small icons to the filter pills?

    4.) Can I make the megamenu appear below the header bar? Right now it is above, and I would prefer it below. I have the "Bring to front" switch enabled for the header section, and disabled for the megamenu section - but this does not appear to help.


    -

    Just for the record, in case someone else finds it helpful:

    Your answer to #1 didn't solve my problem - because I did want secondary images on hover - but I found it here:

    Global>Image frame>switched from "zoom without icons" back to modern.

    However, the created another problem because I didn't want the icons. I was able to resolve this by changing all icon swatches to 'rgba(0,0,0,0)'.

    Thanks again,

    Hillary

  • AlbertAlbert

    1) Yes, you can remove this with custom css:

    .tooltip.tooltip-img .tooltip-content, .tooltip::after, .tooltip::before {
 display: none;
}

    2) This can be done with the following custom css:

    .mfn_woo_attributes .mfn_attr_filters .mfn-vr ul.mfn-vr-options:not(.mfn-vr-select) li .label {
 font-size: 15px;
}

    3) Sorry but we don't have such feature at this moment.

    4) From what I can see, mega menu is already in front.

    image.png


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

    Thanks so much for all your help! I have a few more questions, and follow-ups related to this page:

    4) Yes, the mega menu is currently in the front, and I would prefer it to be behind the Header Menu. Can you advise on how to do that?

    5) on a related note - is it possible to slow down the megamenu animation, as you can with other intro animations?

    6) Can I change the color of the filter widget pills?

  • PhilPhil

    4) Sorry, but I quite cannot imagine what you want to achieve. Do you have any examples explaining that?

    5) You can slow it down with the following CSS code:

    .mfn-menu-submenu-show-fade-up.mfn-menu-submenu-on-hover .mfn-menu-item-has-megamenu:hover .mfn-menu-item-megamenu{
 animation-duration: 2s!important;
}

    6) To prevent misunderstanding. Do you mean this part?:

    image.png

    Best regards

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

    Hi, thanks for your responses. I figured everything out except for question #6.

    Yes, I am referring to that part. Where the text is inside of a grey box (which I am referring to as a 'pill' I would like to make the background a color, and the text white. Is that possible?

    Thanks!

  • PhilPhil

    Please use the following CSS:

    .mfn_woo_attributes .mfn-vr li span{
 background-color: #b4217d;
 color: #fff!important;
}

    Best regards

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