improve the filter logic of goods

This topic has 45 replies, 3 voices, and was last updated 6 years, 11 months ago by Artem Temos.

Viewing 30 posts - 1 through 30 (of 46 total)

Author

Posts

December 2, 2017 at 6:52 pm #26795

Participant

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?

December 2, 2017 at 9:33 pm #26804

Keymaster

Hi,

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

Regards

December 3, 2017 at 9:57 am #26848

Participant

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.

December 3, 2017 at 3:43 pm #26878

Participant

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.

December 3, 2017 at 5:37 pm #26899

Keymaster

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

December 4, 2017 at 4:10 am #26965

Participant

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

December 4, 2017 at 4:22 am #26966

Participant

In shipping cart page. In mobile uncorrect.

Attachments:

You must be logged in to view attached files.

December 4, 2017 at 7:27 am #26976

Keymaster

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

December 4, 2017 at 4:37 pm #27110

Participant

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.

December 4, 2017 at 5:08 pm #27118

Keymaster

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.

December 4, 2017 at 5:13 pm #27121

Participant

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

December 4, 2017 at 5:16 pm #27123

Keymaster

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.

December 4, 2017 at 5:40 pm #27130

Participant

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.

December 4, 2017 at 7:49 pm #27137

Keymaster

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

December 5, 2017 at 9:37 am #27188

Participant

Because I did everything on my own html and css

December 5, 2017 at 9:49 am #27193

Keymaster

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

December 5, 2017 at 11:30 am #27210

Participant

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

December 5, 2017 at 1:49 pm #27237

Keymaster

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;
	}
	
}

December 5, 2017 at 7:41 pm #27302

Participant

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!

December 6, 2017 at 8:13 am #27380

Keymaster

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

December 6, 2017 at 10:00 am #27420

Participant

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?

December 6, 2017 at 10:22 am #27425

Keymaster

Here is a code snippet with fix

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

Regards

December 6, 2017 at 10:57 am #27434

Participant

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?

December 6, 2017 at 11:11 am #27439

Participant

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.

December 6, 2017 at 11:25 am #27444

Participant

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.

December 6, 2017 at 11:56 am #27448

Participant

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.

December 6, 2017 at 1:04 pm #27468

Participant

We are help me?

December 6, 2017 at 1:13 pm #27470

Keymaster

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

December 6, 2017 at 1:31 pm #27481

Participant

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.

December 6, 2017 at 2:02 pm #27494

Keymaster

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

Viewing 30 posts - 1 through 30 (of 46 total)

Sign in

No account yet?

Create an Account