improve the filter logic of goods

Hello! The logic of the filter of goods in the filter area (at the top of the page) is terrible. If many parameters are not very convenient. When you select an attribute, the filter is minimized every time and you have to open it again ….
Can you fix the filter logic to select multiple parameters?

Hi,

How exactly do you want us to fix filter? If you want, we can always display it.

Regards

You do not always need to display!
1. Press the filter button. 2. I chose the necessary parameters for all attributes, and only then I closed the filter myself.

1. Can you help me with the filter?
2. Can I choose the delivery method to align to the left?

Attachments:

You must be logged in to view attached files.

Hi,

1. Our theme filters area use WooCommerce default filters widgets – WooCommerce Layered Nav. And they work in the way you see it now. Each time you click on the link it reloads the page. In case of our theme, it reloads only the shop area with AJAX. We are not able to change this functionality to that you are proposing.

2. Try to use the following CSS snippet

.woocommerce-page #shipping_method {
	text-align: left;
}

.woocommerce-page #shipping_method input.shipping_method {
	float: left;
	margin-left: 0;
	margin-right: 7px;
}

Regards

1. Is it possible to simply not automatically collapse the area of the filter after selecting an attribute and not scroll up?

In shipping cart page. In mobile uncorrect.

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

.woocommerce-page #shipping_method:before {
	content: "";
	display: block;
	clear: both;
}

@media (max-width: 767px) {
	.woocommerce-page #shipping_method li:first-child {
		margin-top: 15px;
	}
}

Regards

Thank. How can I add a search widget without selecting a category in the sticky header for computers. Change the file code? How very useful it will be.

Attachments:

You must be logged in to view attached files.

Sorry, but we can’t move it there with a CSS code. It may require additional code customization of the sticky header structure in our theme JS file.

Help me please! Very necessary! This is a very convenient feature.

Try to change the code in the file js/functions.js

                var logo = header.find(".site-logo").clone().html(),
                    navigation = header.find(".main-nav").clone().html(),
                    rightColumn = ( header.find(".right-column").length ) ? header.find(".right-column").clone().html() : '',
                    leftSide = header.find(".header-left-side").clone().html(),
                    extraClass = header.data('sticky-class');

                var headerClone = [
                    '<div class="sticky-header header-clone ' + extraClass + '">',
                        '<div class="container">',
                            '<div class="wrapp-header">',
                                '<div class="header-left-side">' + leftSide + '</div>',
                                '<div class="site-logo">' + logo + '</div>',
                                '<div class="main-nav site-navigation woodmart-navigation">' + navigation + '</div>',
                                '<div class="right-column">' + rightColumn + '</div>',
                            '</div>',
                        '</div>',
                    '</div>',
                ].join('');

to this one

                var logo = header.find(".site-logo").clone().html(),
                    navigation = header.find(".main-nav").clone().html(),
                    rightColumn = ( header.find(".right-column").length ) ? header.find(".right-column").clone().html() : '',
                    widgetArea = ( header.find(".widgetarea-head").length ) ? header.find(".widgetarea-head").clone().html() : '',
                    leftSide = header.find(".header-left-side").clone().html(),
                    extraClass = header.data('sticky-class');

                var headerClone = [
                    '<div class="sticky-header header-clone ' + extraClass + '">',
                        '<div class="container">',
                            '<div class="wrapp-header">',
                                '<div class="header-left-side">' + leftSide + '</div>',
                                '<div class="site-logo">' + logo + '</div>',
                                '<div class="main-nav site-navigation woodmart-navigation">' + navigation + '</div>',
                                '<div class="widgetarea-head">' + widgetArea + '</div>',
                                '<div class="right-column">' + rightColumn + '</div>',
                            '</div>',
                        '</div>',
                    '</div>',
                ].join('');

You will need to disable JS minification in Theme Settings -> Performance and clear your browser cache.

Incorrectly displayed. In addition, it has a choice of category that is not needed for a sticky logo. Also there is no page on the main page (another header type)

Attachments:

You must be logged in to view attached files.

But we don’t see this on your website at the moment.

Because I did everything on my own html and css

So, do you still need some help with this request?

No. How can I hide navigations not at 1200px but at 1302px?

Here is a code snippet for you

@media (max-width: 1302px) {

div.header-left-side, 
div.mobile-nav-icon {
	display: flex;
}

.site-navigation {
	display: none;
}

.header-mobile-center .header-left-side, 
.header-mobile-center .left-side, 
.header-mobile-center .right-column,
.main-header div.right-column {
		-webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;	
	}
	
	.document-ready .mobile-nav {
    display: block;
	}
	
	.widgetarea-head,
	.navigation-wrap{
		display: none;
	}
	
}

Bug! If I use the links “my account” in the top bar. The menu link of the mobile version of “registration / login” does not work!

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

@media (max-width: 1302px) {
	
.topbar-content .topbar-menu li.menu-item-register {
	position: absolute;
		top: -900px;
}
	
.topbar-content	.topbar-menu .menu {
	border-right: none;
}

div.header-left-side, 
div.mobile-nav-icon {
	display: flex;
}

.site-navigation {
	display: none;
}

.header-mobile-center .header-left-side, 
.header-mobile-center .left-side, 
.header-mobile-center .right-column,
.main-header div.right-column {
		-webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;	
	}
	
	.document-ready .mobile-nav {
    display: block;
	}
	
	.widgetarea-head,
	.navigation-wrap{
		display: none;
	}
	
	.login-form-popup .menu-item-register .sub-menu-dropdown {
    position: fixed;
    top: 0!important;
    bottom: 0!important;
    left: 0!important;
    right: 0!important;
    opacity: 1!important;
    visibility: visible!important;
    -webkit-animation: none!important;
    animation: none!important;
    margin-top: 0!important;
    pointer-events: visible;
    pointer-events: unset;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: transform 0s ease,opacity 0s ease,visibility 0s ease;
    -webkit-transition: opacity 0s ease,visibility 0s ease,-webkit-transform 0s ease;
    transition: opacity 0s ease,visibility 0s ease,-webkit-transform 0s ease;
    transition: transform 0s ease,opacity 0s ease,visibility 0s ease;
    transition: transform 0s ease,opacity 0s ease,visibility 0s ease,-webkit-transform 0s ease;
	}
	
	.login-form-popup .menu-item-register .login-dropdown-inner {
	padding-top: 50px;
    padding-bottom: 50px;
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;	
	}
	
	.login-form-popup .menu-item-register .close-login-form {
		display: block;
	}
}

@media (max-width: 1024px) {
  body .top-bar-left,
	body .topbar-left-text {
	display: none;
	}

body .top-bar-right {
	overflow:hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}
}

Regards

The size of the logo in the sticky header on the main page and on the shop page is not the same. How to fix?

Here is a code snippet with fix

div.sticky-header .site-logo img {
	padding-top: 5px;
	padding-bottom: 5px;
}

Regards

Bug! If I use the links “my account” in the top bar. The menu link of the mobile version of “registration / login” does not work! FOR STANDART 1024px version?

I wanted to remove the menu by 1302 pixels. because if you narrow the browser window to 1025 pixels. the menu is not displayed correctly. Can eat a better option? Remove for example the logo, at a time when the menu does not fit. It seems to me to remove the menu on 1302 incorrectly, since there are laptops with a resolution of 1200 pixels.
What do you advise?
Thank!

Attachments:

You must be logged in to view attached files.

If I use this code

@media (max-width: 1024px) {
.topbar-content .topbar-menu li.menu-item-register {
	position: absolute;
		top: -900px;
}
	
.topbar-content	.topbar-menu .menu {
	border-right: none;
}

	.login-form-popup .menu-item-register .sub-menu-dropdown {
    position: fixed;
    top: 0!important;
    bottom: 0!important;
    left: 0!important;
    right: 0!important;
    opacity: 1!important;
    visibility: visible!important;
    -webkit-animation: none!important;
    animation: none!important;
    margin-top: 0!important;
    pointer-events: visible;
    pointer-events: unset;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: transform 0s ease,opacity 0s ease,visibility 0s ease;
    -webkit-transition: opacity 0s ease,visibility 0s ease,-webkit-transform 0s ease;
    transition: opacity 0s ease,visibility 0s ease,-webkit-transform 0s ease;
    transition: transform 0s ease,opacity 0s ease,visibility 0s ease;
    transition: transform 0s ease,opacity 0s ease,visibility 0s ease,-webkit-transform 0s ease;
	}
	
	.login-form-popup .menu-item-register .login-dropdown-inner {
	padding-top: 50px;
    padding-bottom: 50px;
    max-width: 400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;	
	}
	
	.login-form-popup .menu-item-register .close-login-form {
		display: block;
	}
  body .top-bar-left,
	body .topbar-left-text {
	display: none;
	}

body .top-bar-right {
	overflow:hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}
}

Attachments:

You must be logged in to view attached files.

A bug in the mobile version. The first category is displayed with a larger font.

Attachments:

You must be logged in to view attached files.

We are help me?

If you are asking for our advice, we recommend you do not force users of the laptops to use the design of a mobile version, since it is designed for finger touch control.

To avoid menu items dropping on non-standard resolutions, you can reduce the font-size and padding for the menu items themselves. This can be done by adding code snippet located below to the Global Custom CSS area in Theme Settings.

@media (max-width: 1199px) and (min-width: 1024px) {
	div.main-nav .item-level-0.callto-btn {
		margin-right: 0px;
	}
	
	div.main-nav .menu > .item-level-0.callto-btn > a {
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 8px;
		padding-bottom: 8px;
		font-size: 12px;
	}
	
	div.main-nav .menu > .menu-item > a {
		font-size: 12px;
	}
	
	div.main-nav .menu > .menu-item:last-child > a {
		padding-right: 0px;
		padding-left: 0px;
	}
}

Add this code to mobile custom CSS area to make first category title font smaller.

div.categories-style-masonry-first .category-grid-item:first-child .category-title {
	font-size: 16px;
}

Regards

OK! THANK YOU!

If I use the links “my account” in the top bar. The menu link of the mobile version of “registration / login” does not work! FOR STANDART 1024px version?

I still have not solved this problem. Since I do not know the code for the standard 1024 pix. version.

It was a part of the previous code snippet which you currently do not use. Please, add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.

@media (max-width: 1024px) {
  body .top-bar-left,
	body .topbar-left-text {
	display: none;
	}

body .top-bar-right {
	overflow:hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}
}
}

Regards

[Author]

Posts