evillevi

I think I misunderstood your 3rd suggestion.
If you were referring to a custom css plugin, I already have my css loaded in my theme’s additional css.
I thought you were talking about a dedicated plugin for sticky content.

Hey Kris, oddly enough, now it’s working, the code! Problem seems fixed!!
There is still a tiny difference in layout that I can still see, but it’s hardly noticeable.
So THANK YOU for fixing this for me!!!!

• This reply was modified 1 year, 11 months ago by evillevi.

Oh, tried again and this time I didn’t get an error message when activating the plugin!

Well, I still couldn’t figure out how to have all the widgets in a horizontal line. The reason for that is perhaps that I can’t find the container holding them in Devtools.

What I did manage to do is to customize most of the layout of the widgets.
But…

1) There is no hover colour (red) anymore for the selected filter in the menu. Both in the sorting filter and select products filter. It stays black (the background color I chose.) The rest of the menu looks fine.
So I guess my coding is incomplete, a little unorthodox, or I’m forgetting something…


2) In mobile view, the layout of the menus is a bit weird.

I know you can’t provide custom styles, but I you could point me in the right direction?

For what it’s worth, here are my lines of css I’ve added to achieve this layout.

I really hope I can get there. I’ve been putting hours into finding the solution to this mystery and I don’t want to start all over by looking for some other plugin. : )

/* no search field in product filter expanded menu - shop page*/
.select2-search__field {
display: none;
}


/* search products filter layout on shop page */
.wpc-search-field {
   
	background-color: black;
	color: #fff;
    border-style: solid;
	  border-color: #444444;
	font-size: 14px;
	

}


/* products filter expanded menu on shop page */
.select2-container--default .wpc-filter-everything-dropdown .select2-results__option[aria-disabled=true], .select2-container--default .wpc-filter-everything-dropdown .select2-results__option[aria-selected=true], .select2-container--default .wpc-filter-everything-dropdown, .select2-container--default .wpc-filter-everything-dropdown .select2-search--dropdown .select2-search__field:focus {
   
	background-color: black;

	
}

/* products filter expanded menu on shop page */
.select2-selection__rendered {
	background-color: black;
	
	
}

/* products filters expanded menu border layout on shop page */
.select2-dropdown.wpc-filter-everything-dropdown  { 
border-bottom-color:#444444 !important;
	border-left-color: #444444 !important;
border-right-color: #444444 !important;
	
}


/* select products border color layout on shop page */

.wpc-filter-layout-dropdown .select2-container--default .select2-selection--single 
{
	border-color: #444444;
	}

/* select products filer arrow */

.wpc-filter-layout-dropdown .select2-container--default .select2-selection--single .select2-selection__arrow {
	background-color: black;
	
	
}

/* search products filter display layout on shop page */

.wpc-filter-search-form {
	display: flex;
	flex-direction: row;
	}


/* sort filter collapsed menu layout on shop page */
.wpc-sorting-form .select2-container--default .select2-selection--single {
    border-style: solid;
	  border-color: #444444;
    
}
	
/* sort filter arrow*/
.wpc-sorting-form .select2-container--default .select2-selection--single .select2-selection__arrow  {
	background-color: black;
	
	
}

Hello Victor

I’m not sure if I understand what you are saying.

“Placing two shortcodes one by one … and make them row”

=> You mean like this? Two shortcodes in one line, one block of shortcode?

[fe_sort id="2" horizontal="yes"] [fe_widget horizontal="yes"]

“and in the second one with filters make the row as well with align styles”
What do you mean by “the second one”?

The first widget is the sorting widget, the second is the filter widget (with extra search function).

I thought I could get these widgets in a horizontal position by just adding horizontal=”yes” to the shortcode… 🙁

• This reply was modified 1 year, 12 months ago by evillevi.
• This reply was modified 1 year, 12 months ago by evillevi.

Hi Victor, appreciate it that you help me out.

2) worked
4) worked – but since I haven’t got the layout of the menus in order, this ‘left: 205px’ code places the search icon outside the search box

1) I can’t seem to wrap my head around this. I read the information, but as soon as I add horizontal=”yes” to the shortcodes, the lay-out gets messed up => screenshot
Does this have to to with the width of each widget? Do I have to set a specific size for each of the menus then?

• This reply was modified 1 year, 12 months ago by evillevi.

I’ve edited the HTML in Devtools in my Chrome browser, and the menus did not switch places in desktop view. They did in mobile view, but now one menu (products per page) has lost its layout, and I cannot seem to undo this. Even the layout of my products (product archives) in mobile view is lost now.

• This reply was modified 2 years ago by evillevi.