Home › Forums › WoodMart support forum › How to create or edit hover templates…

How to create or edit hover templates…

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • March 26, 2018 at 8:35 am #48821

    wzd24
    Participant

    Hi,

    first of all: you done on of the best WooCommerce themes. Clean, stylish and well coded. Congratulation for that.

    My questions are: 1. I rename folder woodmart to wzd and woodmart-child to wzd-child. Frontend is working, but the child functions.php have no effect on it. Child-Theme is not shown in backend.

    Question: Is the foldername woodmart hardcoeded in your theme code?! What i have to do to change the theme folder name?

    2. Where i can find the hover templates for products in search and category view? I wanna ad some product attribute in the hover template.

    3. Is it possible to add the new hover template to backend dropdown?

    4. Product Tax “inkl. 19% MwSt. zzgl. Versandkosten” is shown on productpage. How to this text on category/search page in hover template?

    5. Deal countdown is working fine, since the deal is live. After the dead is finished, the counter is

    6. You countdown timer for products shows the time till the sale price for this product is over. But when the time is over, the deal counter is still displayed: 00-00-00. How to hide the counter after the sale/deal time is finished?

    7. In mobile view the header menu order is: 1. “MENU”, 2. CATEGORIES. How to change it to 1. CATEGORIES, 2. MENU?

    Thank you!

    March 26, 2018 at 10:34 am #48852

    wzd24
    Participant

    8. How to get same hover style in product carousel like the hover style in categories product grid?

    I insert a product carousel on my startpage. In WPBakery i try all hover styles, but not all have a effect to element. And no one is the same like the hover style in categories page.

    See list overview for element here:
    https://picload.org/view/daioagaw/screenshot.jpg.html

    In this case we can not get the same category hover style in product carousel on frontpage like the hover style in category page.

    March 26, 2018 at 1:30 pm #48914

    wzd24
    Participant

    9. In other templates you can change lightbox style or deactivate the build in lightbox to install a 3rd party lightbox plugin.

    How to do this in woodmart backend? I see PhotoSwipe lightbox is hardcoded. 🙁 Here you see an example of a prefered style: https://www.jqueryscript.net/images/Fullscreen-Lightbox-Style-Gallery-Plugin-For-jQuery-jBox.jpg

    March 26, 2018 at 1:47 pm #48926

    Artem Temos
    Keymaster

    Hello,

    Thank you for choosing our theme and contacting us.

    1. The child theme requires parent theme folder name to be specified in the style.css file to make it work. So you need to edit that file and specify your parent theme folder name.

    2. You can find all hover templates in the folder woodmart/woocommerce/.

    3. Yes, you can do this in the file woodmart/inc/configs/product-hovers.php.

    4. It is a part of the WooCommerce plugin functionality and we don’t have a code for that.

    5. Please, send us a link where we can see this issue on your website.

    7. Just rename both tabs. You can do this using Loco Translate plugin. Here is a video tutorial that should help you https://www.youtube.com/watch?v=D3NsDdMzsls

    8. Our carousel should have the same list of hover styles. The only exception is our base hover that can’t be used in the carousel due to technical limitations.

    9. Unfortunately, our theme depends on this library it can’t be disabled.

    Kind Regards
    XTemos Studio

    March 27, 2018 at 7:02 am #49062

    wzd24
    Participant

    1. We are using “Show summary on hover” as our template.
    This template is nice, but we are missing some information, like “inkl. 19% MwSt., zzgl. Versandkosten.”
    This information are shown in template “Full info on hover”.

    But in template file for “Full info on hover” we can not find the code for showing tax and shipping information and to copy it to “Show summary on hover” template.

    2. We try to add ” Product Tax and shipping info link under the price in category and search page. But your theme is overriding it. How to solve this?

    Depending on point 5.:
    “5. Please, send us a link where we can see this issue on your website.”
    http://dev.werkzeugdiscount24.de/themenwelten/fuer-ihren-garten/guede-gartenfraese-gf-300-e/

    This deal started on 2018-03-01 and ended on 2018-03-20
    When sale countown is running out to 0 the countdown are still shown.
    After deal is finished, the deal counter must be hidden. otherwise you will have many 1000 products with 00-00-00 countdown that deals are finished. That’s not looking nice! 😉

    7. Just rename both tabs. You can do this using Loco Translate plugin. Here is a video tutorial that should help you https://www.youtube.com/watch?v=D3NsDdMzsls

    It’s not a translation problem, we need to change the sort-order. Because the main menu have just “about us” and “contact us” button” and the category menu are the second menu. We need to change category menu to first menu and the main menu to second menu, because also in mobile view are the category menu more important as “about us” and “contact us”.

    In header builder in mobile view i add a “mobile menu” in main header.
    “Configure Mobile menu settings” are: “Show categories menu : yes
    Choose menu: main menu is selected…

    But template showing first the main menu and second menu is categories menu. How to change this order in your mobile theme?

    8. Our carousel should have the same list of hover styles. The only exception is our base hover that can’t be used in the carousel due to technical limitations.

    This is not correct. I install a absolut clean wordpress and select a demo in demo installer.
    Then go to start page and select theme hover template for carousel like the hover template in product categories.

    For example:
    Products hover setting in carousel slider is: Show summary on hover.
    The same hover style i chose in theme settings panel for categories.

    You can check the correct “Show summary on hover” style first here in categorie:
    http://dev.werkzeugdiscount24.de/gartengeraete/

    Now check the same product carousel style on our startpage under headline “GARTENZEIT”:
    http://dev.werkzeugdiscount24.de/
    you see, we have to diffrent styles. 🙁 Same for many other styles… 🙁

    March 27, 2018 at 7:26 am #49068

    Artem Temos
    Keymaster

    1. You are using some extra plugin for that it hooks this information to the button, not to the price. So it should use woocommerce_after_shop_loop_item_title instead of woocommerce_after_shop_loop_item to make it work well with that style.

    2. Could you please attach some screenshots how it works with default WordPress theme for better understanding?

    5. It seems to be a small issue in our theme after the WooCommerce update. We will fix it in our next theme update. As for now, you just need to clear the sale price date to remove this countdown.

    7. Yes, we understand. But it is much easier to change their names and change their sorting in such way then to customize our theme PHP files.

    8. But as we mentioned, this style can work for products grid only. It is not possible to use it for carousels.

    March 27, 2018 at 7:37 am #49070

    wzd24
    Participant

    Sticky header is shown, but sticky Header in theme settings are deactivated.
    Also in header builder in top-bar, main-header and header-bottom. cache cleaned, browser restarted

    March 27, 2018 at 8:00 am #49076

    wzd24
    Participant

    1. You are using some extra plugin for that it hooks this information to the button, not to the price.

    I already test it with a blank woodmart setup / only your packed plugins. Same result: no tax and shipping information. But in one hover template this part are placed: Full info on hover

    I can not find the line in your theme where this tax and shipping info are placed, to copy it to “Show summary on hover” template.

    2. Could you please attach some screenshots how it works with default WordPress theme for better understanding?

    We also try to solve it. You write your theme is germanized ready. In germanized we setup “show MwSt. on category view” and “show shipping price list” on category to solve this problem, but on dev.werkzeugdiscount24.de view but nothing works.

    See attached image with standard theme. How to add this tax and shipping text in category view, search view and product slider/carousel like standard theme? Same for base price.

    7. Yes, we understand. But it is much easier to change their names and change their sorting in such way then to customize our theme PHP files.

    But this will not solve our problem. Please check the attached image “menu.jpg”
    You will see: we add a “mobile menu” in menu header.
    In mobile view frontpage you see 1. MENU and 2. CATEGORIES.
    Your solution will not help to solve this problem. Because when i rename menu to categories and categories to menu then the content in the menus will not be correct.

    Attachments:
    You must be logged in to view attached files.
    March 27, 2018 at 8:01 am #49078

    wzd24
    Participant

    image for 7.

    Attachments:
    You must be logged in to view attached files.
    March 27, 2018 at 8:39 am #49090

    wzd24
    Participant

    7. is up to 50% solved.

    template-tags.php in folder woodmart\inc\
    from

    <li class="mobile-tab-title mobile-pages-title active" data-menu="pages"><span><?php esc_html_e('Menu', 'woodmart'); ?></span></li>
<li class="mobile-tab-title mobile-categories-title" data-menu="categories"><span><?php esc_html_e('Categories', 'woodmart'); ?></span></li>

    to

    <li class="mobile-tab-title mobile-categories-title" data-menu="categories"><span><?php esc_html_e('Categories', 'woodmart'); ?></span></li>
<li class="mobile-tab-title mobile-pages-title active" data-menu="pages"><span><?php esc_html_e('Menu', 'woodmart'); ?></span></li>

    Very easy…

    Question to this point now:
    the sort order is changed. But how to set “CATEGORIES” to active? check it on mobile view:
    Now categories is the first menu, but not active.

    March 27, 2018 at 10:07 am #49128

    Artem Temos
    Keymaster

    As we can understand, the first and second points are the same, right? Could you please provide us your admin and FTP access so we can check it?

    7. But it would be much easier to swap their names and location. But if you want, of course, you can do this customizing our theme files. To change the active point, you need to move active CSS class from the second <li> tag to the first one.

    March 27, 2018 at 10:58 am #49150

    wzd24
    Participant

    7. But it would be much easier to swap their names and location. But if you want, of course, you can do this customizing our theme files. To change the active point, you need to move active CSS class from the second

  • tag to the first one.

    • But with your solution i will also change the desktop view. Only in desktop view i can change position. in “mobile menu” in header builder you can not change position of the 2 parts of menu. Create a “mobile menü” element in header builder and check it. 🙂
    See also here: https://xtemos.nyc3.digitaloceanspaces.com/wp-content/uploads/2018/03/menu.jpg

    i only will change the menu sort order in mobile view. i change it. Now i will set active with css. Thank you.

    1 + 2 are the same. correct.
    find attached our ftp details

    Please create a backup because we are also working on it!!

    March 27, 2018 at 11:15 am #49154

    wzd24
    Participant

    you need to move active CSS class from the second

  • tag to the first one.

    • We change 

    <li class="mobile-tab-title mobile-categories-title" data-menu="categories"><span><?php esc_html_e('Categories', 'woodmart'); ?></span></li>
<li class="mobile-tab-title mobile-pages-title active" data-menu="pages"><span><?php esc_html_e('Menu', 'woodmart'); ?></span></li>

    to

    <li class="mobile-tab-title mobile-categories-title active" data-menu="categories"><span><?php esc_html_e('Categories', 'woodmart'); ?></span></li>
<li class="mobile-tab-title mobile-pages-title" data-menu="pages"><span><?php esc_html_e('Menu', 'woodmart'); ?></span></li>

    but its not working. The menu is set to active (design) but the content is not shown.
    check online in mobile view.

    March 27, 2018 at 12:13 pm #49179

    Artem Temos
    Keymaster

    Try to add the following PHP code snippet to the child theme functions.php file to do this

    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_gzd_template_single_legal_info', 20 );

    And this part of the custom CSS

    .woodmart-hover-base.has-stars.purchasable.product .product-rating-price{
	height: inherit;
	line-height: inherit;
	overflow: visible;
}

.woodmart-hover-base.has-stars.purchasable.product .wrapp-product-price{
	height: inherit;
	transform: translateY(0px) translateZ(0) !important;
  -webkit-transform: translateY(0px) translateZ(0) !important;
	display: block;
}

.products .wc-gzd-additional-info{
	margin: 0;
}
    March 27, 2018 at 1:16 pm #49207

    wzd24
    Participant

    Thank you, this works.
    But the sort order / position of the text is not correct.
    Correct is:
    1. Price
    2. inkl. 19% MwSt. zzgl. Versandkosten

    But right now we see:
    1. inkl. 19% MwSt. zzgl. Versandkosten
    2. Price

    see also attached image.

    Attachments:
    You must be logged in to view attached files.
    March 27, 2018 at 1:19 pm #49210

    Artem Temos
    Keymaster

    Try to add this CSS code as well

    .woodmart-hover-base.product .wrapp-product-price{
    display: block;
}
    March 27, 2018 at 1:25 pm #49213

    wzd24
    Participant

    Thats it! Thank you!

    Do you have a solution for #49154 in this thread?
    the menu is set to active, but the content is wrong/not shown.
    you have to click on second menu and then again on first menu to see the content. how to set the first menu as active?

    And in case of wrong deal counter:
    “5. It seems to be a small issue in our theme after the WooCommerce update. We will fix it in our next theme update. As for now, you just need to clear the sale price date to remove this countdown.”

    When do you plan the next update with deal counter?

    March 27, 2018 at 2:22 pm #49236

    Artem Temos
    Keymaster

    You need to move “active” class to another menu section as well as you did with <li> https://gyazo.com/e270361afb0b4f737925e8ddcfded39d

    We will release an update in next few weeks.

    March 27, 2018 at 2:39 pm #49238

    wzd24
    Participant

    I already do this. but after this we have the next problem:
    1. click on CATEGORIES in mobile menu.
    Content/categories are shown.
    2. Now click on MENU and back to CATEGORIES…
    Now the menu content of CATEGORIES is hidden.

    March 27, 2018 at 2:40 pm #49239

    Artem Temos
    Keymaster

    But why you just can’t swap menus and their names? As we said, it is much easier way then customizing theme files.

    March 28, 2018 at 6:13 am #49393

    wzd24
    Participant

    because with burger icon / mobile menu you can not change the sort order and their names.
    The menu for categories are defined by your theme/code.
    You just select “mobile menu” in header builder and the element “mobile menu” automaticly include booth menus.

    I see no option in this “mobile menu” element to change the sort order
    You only can select the menu for normal menu and the categories are predefined.
    https://xtemos.nyc3.digitaloceanspaces.com/wp-content/uploads/2018/03/menu.jpg

    Where to change positions only in mobile menu by header builder?

    see attached our login details

    March 28, 2018 at 6:55 am #49411

    Artem Temos
    Keymaster

    Here you need to select your mobile menu instead of categories https://gyazo.com/b47a0e3b22473072111eb921354d23e7
    And then, go to Appearance -> Menus -> Manage locations and set your “Categories” menu to be your Mobile menu.
    After this, the menus will be swapped. All you will still need to do is to change “tabs” name using Loco Translate plugin.

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)