improve the filter logic of goods

Category grid if long text is displayed incorrectly …

Attachments:

You must be logged in to view attached files.

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

It does not work the way I use this code in the style file

  .top-bar-right,
  .topbar-right-text {
    display: none; }

  .top-bar-left {
    overflow: hidden; }

  .topbar-left-text {
    height: 38px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }

To display the left part in the mobile version

@media (max-width: 1024px) {
body .top-bar-right {
    position:fixed;
    top:-9999;
    z-index:600;
	overflow:hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}
}
}

Is this the correct code? Working.

You can use this code snippet to fix register functionality on a mobile resolution, but initially, mobile registration does not work, because of the style.min.css file has been manually changed.

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

Please do not change the main style files (style.css, style.min.css) directly, as this may disrupt the function of the theme and will be overwritten by subsequent themes updates. If you want to apply our code snippets or make any changes by yourself, use the Custom CSS fields in Theme Settings.

If you want to make any changes in the top bar, please describe your issue in more detail with screenshots and we prepare CSS code snippet for you.

Also, use this code to align the last category in masonry design.

@media (max-width: 767px) {
	
.categories-style-masonry-first	.category-grid-item:nth-last-child(2)  {
		margin-top: 24px;
	}
}

Regards

OK. I’ll tell you what and why I changed it.
1. ADD Vkontakte link and share. I also changed the script of the theme. Theme files and so on. Can you add vkontakte to the next update?
ADDED:
.woodmart-social-icons.icons-design-colored .woodmart-social-icon.social-vkontakte a{background-color:#507299;}
2. CONFIGURING CATEGORIES
It replaced
.category-grid-item .category-title{text-transform:uppercase;line-height:1.5;font-size:20px;font-weight:600;color:#333;margin-bottom:0}
this
.category-grid-item .category-title{text-transform:uppercase;line-height:1.5;font-size:18px;font-weight:600;color:#333;margin-bottom:0}
It replaced
.categories-style-masonry-first .category-grid-item:first-child .category-title{font-size:28px}
this
.categories-style-masonry-first .category-grid-item:first-child .category-title{font-size:26px}
It replaced
.categories-style-masonry-first .category-grid-item:first-child .category-title{font-size:20px}
this
.categories-style-masonry-first .category-grid-item:first-child .category-title{font-size:18px}

It replaced
.cat-design-default .category-title{position:absolute;left:0;bottom:100%}
this
.cat-design-default .category-title{color:white!important;background:#0054ac;padding:3px 7px;position:absolute;left:0;bottom:100%}

3. Shipping options
ADDED
#billing_country_field{display:none;}#shipping_method{text-align:left;}

It replaced
#shipping_method input.shipping_method{position:relative;top:4px;float:right;margin-right:0;margin-left:7px}
this
#shipping_method input.shipping_method{position:relative;top:4px;float:left;margin-right:3px;margin-left:0}

4. OTHER
ADDED
.callto-btn>a,.callto-btn>i{color:white!important;}

ADDED FOR PC
.header-base .search-button{display:none;}

It replaced
.search-by-category .input-dropdown-inner>a{display:block;font-size:13px;text-transform:uppercase;padding-left:15px;padding-right:15px;text-align:center;color:#777}
this
.search-by-category .input-dropdown-inner>a{display:block;max-width:190px;font-size:13px;text-transform:uppercase;padding-left:15px;padding-right:15px;text-align:center;color:#777}

6. TOP BAR I need left-text for mobile devices
It replaced
.top-bar-left,.topbar-left-text{display:none}.top-bar-right{overflow:hidden}.topbar-right-text{height:38px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
this
.topbar-right-text{display:none;}.top-bar-right{position:fixed;top:-9999;z-index:600;}.top-bar-left{overflow:hidden}.topbar-left-text{height:38px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

MY global custom css

div.sticky-header .site-logo img {
	padding-top: 5px;
	padding-bottom: 5px;
}
@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;
	}
}
td.product-stock-status {
min-width: 130px; }
td.product-price {
min-width: 85px; }
td.product-subtotal {
min-width: 95px; }

Customm css for PC

div.sticky-header .main-nav {
	-webkit-box-ordinal-group:2;
	    -ms-flex-order:1;
	        order:1;
	-webkit-box-flex:1;
	    -ms-flex:1 0 0px;
	        flex:1 0 0;
}

div.sticky-header .site-logo {
	-webkit-box-ordinal-group:3;
	    -ms-flex-order:2;
	        order:2;
}

div.sticky-header .right-column {
	-webkit-box-ordinal-group:4;
	    -ms-flex-order:3;
	        order:3;
	-webkit-box-flex:1;
	    -ms-flex:1 0 0px;
	        flex:1 0 0;
}

div.sticky-header .main-nav .menu {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
}

In this code, you still need to add this

@media (max-width: 767px) {
	
.categories-style-masonry-first	.category-grid-item:nth-last-child(2)  {
		margin-top: 24px;
	}
}

PS
The browser does not cache custom thrme code. So I changed theme files. Or is it bad. When updating the theme, does the link to the style files change? If the browser has saved the cache and the client logs in after the theme is updated, will it be displayed incorrectly ?!

When updating the theme, you eliminate, add ….. How do I know what you updated in the subject, so that I deleted from the custom style?

Can I collect all the css edits I need for video? Or so normal? The theme is beautiful but you need a lot of settings. Do you speak Russian?
It is very hard for me to explain in English.

1,2,3,4. You can freely move all of your CSS changes to the Custom CSS fields which located in Dashboard->Theme Settings->Custom CSS. Also, you can use Child Theme (https://xtemos.com/docs/woodmart/child-theme/, https://youtu.be/q4tU5TAZtIk?list=PLMw6W4rAaOgKKv0oexGHzpWBg1imvrval&t=23) which helps you to overwrite theme code functions and CSS without editing actual theme files. This makes all of your custom functions and styles work after the future theme updates.

Both Custom CSS and Child Theme is cache-friendly. just make sure that you have correctly pointed out the priority of your styles to make it work. For example, to change the style of this element

#shipping_method input.shipping_method{position:relative;top:4px;float:left;margin-right:3px;margin-left:0}

you need to add to it another class of its parent.

body #shipping_method input.shipping_method{position:relative;top:4px;float:right;margin-right:0;margin-left:7px}

6. In the default settings, without any additions, the left column of the topbar and mobile registration popup should be visible on the mobile phone. This can be seen in our demo (https://gyazo.com/1e4a38ec5f56b41255fe7eca9c422022). We checked your site and the left column is also visible on it (https://gyazo.com/cc3c12cdc4e2a810fc2196fa119ca1eb).

This code needs to be added to the next two fields https://gyazo.com/bff759ccf04400d23a5507e1ba92a65c

.categories-style-masonry-first .category-grid-item:nth-last-child(2)  {
	margin-top: 24px;
}

It is natural that you need to do so many settings on the theme since you have a lot of special requirements to your website design and need to apply additional customizations since not of all these options exist in our theme by default. And obviously, you got so much CSS code.

Regards

by default, the mobile version displays the right part !!!!!!!! I changed this code!

I tried to use a child theme. But it does not work! I added files, but they were not applied.

OK. I’m using a child theme for styles. How to use it for Java scripts (adding buttons VKontakte). Give me the correct code to display in the mobile version of the left text. By default, the right one is displayed. My code does not work in the child theme.

How do I rename your theme and child theme? If I rename via FTP the child theme does not work.

Hi,

Here is a code you are asking for

@media (max-width: 1024px) {
	.topbar-content .topbar-right-text {
		display: none;
	}

	.topbar-content .top-bar-right {
		position: absolute;
		top: -900px;
		overflow: hidden;
	}

	.topbar-content .top-bar-left, 
	.topbar-content .topbar-left-text {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

After renaming theme folder you need to reactivate it in Appearance -> Themes. Also note that after this step, some widgets or menu configurations may be lost. So you will need to correct this in Appearance -> Menus and Appearance -> Widgets.

Regards

OK thanks. Close it.

1. Can I add a SKU to the card?
2. And if you use the display of the color attribute, then the size of the variational products will be larger. Is it possible to evaporate?

Attachments:

You must be logged in to view attached files.

1. Sorry, but there is no such option for products in our theme.

2. What do you mean? Could you please show some screenshot?

[Author]

Posts