Attribute terms are not showing border. While color not at all visible.
- This topic has 27 replies, 2 voices, and was last updated 2 years, 10 months ago by
.
-
Posts
-
Hello Luke,
1.
please navigate to Products -> Attributes -> Colors -> edit the “White” swatch and set the color via the HEX color code #ffffff
Surprisingly, the Hex Value worked, and shows a Border. But just wondering, as this worked on White colored swatch, but when I try to add the Hex value for other colors, those did not shows up the Border. Any suggestions.
1. a). In either case, Your this Code worked perfectly 🙂
And displaying border (with some gap), for All attributer terms. This is what I was looking for.
Much thanksCan you please forward this to team, so that this can be implemented within the Theme, in upcoming update. Probably, as a Show – Hide option. So that those who do not want borders, can stay with current format. While those who want like this, can enable or Show it.
2.b. Really thanks for clarifying.
2.c. Yes, Glad to see the complete one. Thanks for revising it.3.a.
it has in the settings the “Make it overlap”
Yes, this was something I did not noticed and really driving me crazy. Most importantly, that happened due to color scheme of White BG.
Thanks for noticing and pointing it out in right direction.3.b.
The “Main navigation” menu is set by default
Yes, like a Hidden Gem. So, this is where it is coming from
Your screenshot helped. Thank you 🙂3.c. But still one thing is not cleared related to Main Menu.
There are 2 locations where we can Set or Define the Main Menu
First –
Header Builder -> Header type -> Main Menu settings -> Choose Menu
https://i2.paste.pics/F6V01.pngSecond –
Appearance – > Menus -> Manage locations
https://i2.paste.pics/F6V0X.pngPoint is, which one will take the precedence on which of the other one (if we Set or Define Main Menu only at one of the location, out of above two)
Or if we Define different Main Menus at above locations. Then what will happen.
Which one will work.4.a. I can see that there is No option to show the “Colorful” swatch for Multicolor (for attribute name “Color” with its Term named “Multicolor”)
Is there a way to show that, within Theme itself
https://i2.paste.pics/F7E0C.png4.b. If we use Image (instead of color value, as shown below), for any attribute term, then what size is recommended. So that it matches the size with the size of other Color swatches
https://i2.paste.pics/F7D4O.png
We need to show something like below for Multicolor swatch.
https://i2.paste.pics/F7E0C.png (This also has got option to defines the size)That is, it will display the swatch in same size (with respect to Hex or RGB value swatches) for all the locations wherever swatches are displaying (On Single product page, Grid like Shop, Category pages, Sidebar filters, widgets, Woodmart elements..)
5. I cannot find these options while editing “Page Title options” on any individual page. The options that are available from Theme Settings -> Page title, as below –
What if we want to set different options (other than what we set from Theme settings -> Page title) for any specific Individual page.
Like Background size, Repeat, Position..Then how can one achieve that, through each specific page.
5.b. Where the display Height of the Page Title (when using background image) defined. I mean, currently, a banner of height 734 px is used (In Shop and other pages, as default) . However, it is Not showing In-Full, and some height is cropped (from Top and Bottom), when we view on Shop page (as below)
So where that height is defined, so that it is cropping extra height of the Background banner (from top and bottom).
https://i2.paste.pics/F7DT7.pngRegards
Hello Luke,
1.a.
The code you shared on your response post number here 336661 worked perfectly for all locations, except for below shown area –Hence, similarly, what additional code will show Border around Attribute terms that are displayed in Sidebar Filters on Shop and Category pages. The CSS that you shared earlier, is working in all other areas, except this below one –
https://i2.paste.pics/F7OSB.png
URL – https://www.vasangini.com/shop/3.c. Got it. Much thanks for clarifying.
4.b.
You should use an image with equal proportions e.g 50×50 or 45×45 pixels.
Can we use even a bit higher size dimension, and by similarly having equal ratio of height and width too, that is say, 100×100 or 150×150 px
Will it still reflect the same size, so as to match the size with other existing colored swatches in Single product page, Grid and other areas.5.
In order to set different Page title’s options for any individual page, try to use our theme presets
Although I will try, but this way it will be bit cumbersome, time-consuming and complicated too.
If these 3-4 options (shown below) could be provided in the Edit section of each Single Product page.
https://paste.pics/edit/F7DNQThere is another downside, say, if we have already created Pre-set rules for Title of few of the pages. Then when we start creating 10-15 New pages, we again have to switch to this area (from Theme settings), and then again have to Set (or Add) rules for these Newly created pages, in order to define the rules just for various available options for Title of the pages.
Rather that that, if such options could have been additionally be provided on Edit of each Single product page, then it would avoid such hassles. And we can have more control on one area alone. Rather than going through 2 or multiple areas, for such options.
I hope, I am able to explain the necessity and reason behind the request for this.
5.b.
The page title size you can define by means of the “Page title size” option in Theme Settings -> Page title -https://prnt.sc/21z8av9
Yes, I have seen that option. But does that mean, that the cropping that is occurring for the below banner, that is already 734px high, is due to the option choosen as “Small”
https://i2.paste.pics/F7DT7.png
Say, if we use a banner with the height 1050px, then also, it will crop exactly in the same height (just like it cropped for existing banner’s height), when we use “Small” option.5.c. Can you please suggest – the Title banner is being constrained upto what actual height, each separately for “Small”, Large and Default respectively.
Regards
Hello Luke,
1. Yes, this worked. Thank you 🙂
If you activate this custom and for some attributes, it doesn’t apply..
Yes, I will “Enable Swatch” for attributes.
5. A request, if atleast the team can think on this –
..this way it will be bit cumbersome, time-consuming and complicated too.
If these 3-4 options (shown below) could be provided in the Edit section of each Single Product page, then it would avoid such hassles.
https://paste.pics/edit/F7DNQ
And we can have more control on one area alone. Rather than going through 2 or multiple areas, for such options.6. How to show different Background color behind the Category names, each separately for different category name.
Just like the BG color is showing up on for Labels. Say Red colored BG for HOT label.
Please refer below image-
https://i2.paste.pics/F8JLY.pngPlease suggest how can we do that.
7. I want to Set Transparency for Header Background color, only while it is showing during Sticky position (and Not during Fixed position, when it is very top of the page)
So that, if visitor scrolls down (whereby we had already enabled the Sticky header – Always ON, during scroll down also), then, the content of page (behind header bar) can be partly visible from behind the background color (due to having transparency)
PS: We tried below one, and do not want this. As this did not resolve our purpose completely.
https://i2.paste.pics/F8JTI.png
This also makes it transparent even when it is at very top. (fixed).Please suggest how to achieve that.
Regards
Hello Luke,
I think you might have misunderstood my query. Can you please read it again-
6. How to show Background color behind each of the Category names. Each separately for different category name. (BG color, Just behind the category names itself)
Just like the BG color is showing up on for Labels. Say Red colored BG for HOT label.
Please refer below image-
https://i2.paste.pics/F8JLY.pngPlease suggest how can we do that.
7. Yes, the CSS worked. Thank you 🙂
8. A kind request and a suggestion –
Can the colors and font size of this support forum (Globally) be improved, a bit.
Currently, I found that Grey color font is being used and that is showing even on the Greyish BG color (for Team response), and Off-white BG (our response). Hence, lacking contrast and visibility.
And the font size is smaller. Due to which it becomes very hard to read our own message and reading other’s for solutions.
Specially on mobile or small screen devices, this is becoming almost impossible to read.You can see here, what I want to refer with my point-
https://bit.ly/3dEVpj3Here, they are using Pure White Background with complete Black colored text and comparatively bigger font size.
(And infact, very light-blue BG, thereon, for follow-up replies or from Support member). That way, it is way much easier to read it. Even in mobiles.I think there might be options, to make such adjustments and update these small things.
This will be helpful for all others visitors as well as customers of Woodmart.Regards
Hello,
6. Unfortunately, we can’t change the background color for each of the category names because we don’t have such an option.
8. We are currently developing an updated version of the support forum. We will consider your suggestions.
Kind Regards
Hello Luke,
6. I managed to find one Custom CSS (as below in Private Content) to show BG color block behind each Category name in Title of Shop page.
Is this the correct code, or do I need some refinement here, in the Class or code.
b. I now only want to have Different BG color for each Category name. Can we now adjust or modify that shared Custom CSS or have additional CSS to achieve just that.
Say, By mentioning Category ID, name or some other way.8. Thank you 🙂
Will look forward for a favorable change, with new ones to come.Regards
Hello,
6. This code is only suitable if you want to change the background for all items.
6b. If you want to set the background of each category separately then you need to use the ID of the category.
The code below adds the border radius and padding for all items.
.wd-nav-product-cat .nav-link-text { padding: 5px 7px !important; border-radius: 4px; }This code uses the ID of each category to provide a background color for each category separately.
.wd-nav-product-cat .cat-item-43 .nav-link-text { background-color: #fff; color: #333; } .wd-nav-product-cat .cat-item-44 .nav-link-text { background-color: red; } .wd-nav-product-cat .cat-item-156 .nav-link-text { background-color: yellow; color: #333; }You can change only the ID of the category after the
.cat-item-and set your color.https://gyazo.com/4b46c0837263747179f4c3c6cb605ca3
Kind Regards
Hello,
6. Yes, that is why I asked for one you shared in 6.b
6.b. That worked. Much thanks !!7. You suggested earlier, as below –
You can set color only for the sticky header by means of the custom CSS code. Enter the code in the “Global Custom CSS” area.
.whb-sticked .whb-row { background-color: rgba(0, 0, 0, 0.5); }This worked on the header, but affecting all other headers also, which have some other color scheme and layout. And hence, those are not visible properly. Please refer here- https://paste.pics/edit/FC1QM
Hence, How can I have this CSS (transparency for Sticky header), to be applied, as to header-specific only. I want it to be applied only for the Header named as “Default Header Layout”, as shown below-
https://i2.paste.pics/FC1RI.pngThe reason behind–
Because, we are using another Header on few other pages, as Header Overlap, and whose color scheme is set to light (with Dark BG automatically, in sticky position), and with this above CSS, it makes the light BG for that header also. Making that Non-readable, almost invisible.You can find here on the Checkout page – https://paste.pics/edit/FC1QM
https://www.vasangini.com/checkout/Regards
Hello Luke,
7. Yes, this worked. Thank you 🙂
9. How to show swatches (color) in square shape, just like it is displaying for Size. As with round shape, it gets cuts from all 4 corners, and hence, showing smaller comparatively.
9.a. How to show slightly bigger swatch icons in shop page (showing below product image)
https://i2.paste.pics/FCWEK.png9.b. I used below CSS to make the BG color of Quick icons, bit transparent for Wishlist, Quick View, Compare. So that product image be partly visible from behind these icons. And not obstruct it completely.
.wd-buttons.wd-pos-r-t { background-color: rgba(255, 255, 255, 0.6); }Is this the correct one. Will it work everywhere, wherever product grid is showing with these icons, on top on.
10. Quick View is not showing up the “Below or After Cart” html code or data. How to make it appear, in Quick View also.
10.b. Quick view is not showing up Video icon, on Main image (for a product having video). Just like it is showing up Single product page. How to enable the video icon on Main image, in Quick View.10.c. In mobile, the Quick view icon itself, is not showing up at all, for this Demo. How to make this enable, for this demo and product style itself.
Regards
Hello Luke,
9.
Here is a code for changing the swatch’s shape.
Yes, this worked. Now this really looks much visible and better.
However, this worked only on the Shop Grid area. But not on Sidebars Widgets and Filters area.
9a.
To be able to show slightly bigger swatch icons.
Yes, this worked and makes it even more visible and better. Thank you 🙂
9b.
This code will be better…
Thank you for looking into it and sharing the Refine code. Will use this instead.
10, 10b.
I’m very sorry but at the moment we don’t have any custom code for that.
Can you please forward the request to team. Atleast for 10.b) So that visitors come to know about that, and we can retain their engagement for such products. Thereby, may result in conversion of Sales.
Until then, atleast, if there could be some way, for below-
10.b. How to enable the video icon on Main image, in Quick View box, just like it is showing up on Single product page.10.c.
Please, enter this code to the “Custom CSS for mobile” area for displaying the “Quick view” icon.
Unfortunately, this is not working. I tried by clearing Cache too. Above ones(from point 9), worked, but this is not showing any icon of Quick View. Neither in mobile view nor in mobile device itself.
PS: I had kept CSS enabled, please try to replicate at your end.1.a. Earlier, you suggested CSS to display border around swatch and text terms of Attributes in one of your response 337817.
That works for color value swatches. However, that does not apply, if we use Image for any term, as can be seen here-
https://i2.paste.pics/FESLP.png
To enable border, the same way, should I use below code. Or some other one-.wc-layered-nav-term.with-swatch-image .filter-swatch { border: 2px solid #FFF; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); border-radius: 50%; margin-left: 1px; }If some other refine code, then please suggest.
1.b. Currently, the custom image (say for Multi color) that I am using for attribute terms,
looks slightly smaller as compared to other Colored Value terms of the same Attribute. [In Sidebar filters, widgets]. And, as can be seem from same above screenshot, in 1.a)I am using 50x50px custom image for attribute term as swatch
Does that mean, I need to prepare a bigger one, say about 64×64 px size. Or the bigger size can be achieved using custom CSS only. If so, can you please suggest the one.
Also, wanted to know, what px size is currently set for the color values, showing for “Color” Attribute terms.11. There is a glitch–
We changed the Primary color of site (from Styles and colors) . It reflects most of the places, but not reflecting at one place, where also, it actually intends to work and should reflect too.Currently, Pink (set as Primary) color reflects on “Add to Cart” (or Select options) button in Shop Grid.
However, when we click “Select options” button for Variable product (on Shop page), it then shows some other color (I thin, the one which was originally set as Primary color for Demo – Decor).
Means, this area is Not updating, when we change the Primary color. And this should work to maintain Uniformity too. Otherwise, it looks very ODD. Please see here-
https://bit.ly/3FjDJpqCurrently, we had set it to Pinkish tone, but moment someone clicks on “Select option” (for variable product), it then shows, Blueish-Green colored button for “Add to Cart” on same product. Thereby Not consistent and is kind of an Odd looking.
So, two things-
11.a. Please ask the team to update the code for Primary color, in order to maintain Uniformity across. Atleast in same relevant areas.
11.b. Until then, please suggest, how to resolve this, as of now.
Do we need to achieve using custom CSS or some other way from Theme settings.PS: We cannot use the Buttons > Shop button Color option, as this will then change the colors even for the Checkout buttons on Mini-Cart, on Main Cart page, and Place Order button on checkout page. Which ofcourse, we do not want. And want them to have separate colors.
And these areas (Checkout buttons) are not relevant to the Buttons on the Shop Grid page (Add to Cart).
But the buttons that are showing on the Shop Grid itself, for “Select options” and then for “Add to Cart” for variable product are relevant to each other. And should maintain consistency across.Regards
Hello,
10, 10b, 11. Okay, I will forward your suggestions to the team.
10c. Please, add custom code to the “Custom CSS for mobile” and “Custom CSS for tablet” fields and then check it.
I have tested a custom code on my demo and it works well (see below video).
https://monosnap.com/file/gSChRhUixhKNkUS7GtRvEbK5oasHJq
1a. Please, replace the early suggested custom CSS (https://prnt.sc/24b74tu, https://prnt.sc/24b720j) on this:
.wc-layered-nav-term.with-swatch-color .filter-swatch, .wc-layered-nav-term.with-swatch-image .filter-swatch { border: 2px solid #FFF; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); margin-left: 1px; }9. Here is a code for changing the swatch’s shape on the Sidebars Widgets and Filters area.
.woodmart-woocommerce-layered-nav .filter-swatch>span, .woodmart-woocommerce-layered-nav .filter-swatch>span:after { border-radius: 0; }1b. Try to upload a bigger image. As for the color attributes there shows a colored background with the square 25×25.
11. When you click “Select options” button for Variable products (on the Shop page), it then shows a button from the single product page. To be able to change color there, please try to use the below custom CSS code.
.single_add_to_cart_button { background-color: blue; } .single_add_to_cart_button:hover { background-color: red; }https://monosnap.com/file/79BdXvmIcmI8IVm04oKpSL7YB2udrZ
Kind Regards
Hello Luke,
10, 10b, 11. OK, thank you. Wish, team will surely take these into consideration.
10c. Right. I did the mistaken. I now replaced with correct location, and then It worked.
Thanks you.1.a. Yes, this now worked. Thanks for sharing Refine code (2-in-1). However, you might have missed Border-Radius, due to which it shows square border for Round swatches.
https://i2.paste.pics/FG4S6.png
So, I added this border-radius: 50%; again and it then worked, like previously (for Round shaped swatches)
https://i2.paste.pics/FG4YM.png1.b.
Try to upload a bigger image. As for the color attributes there shows a colored background with the square 25×25.
I found that I have already uploaded 100×100 sized image for swatches (sorry, not 50×50, as I wrote earlier). And this is still bigger than 25×25 BG color, as you suggested.
So, what could be the reason, that image-swatch is displaying slightly smaller than color-swatch, at frontend.PS: I checked at backend, Products > Attributes > configure terms, and found that, there the size is displaying in exactly same for color-swatch as well as image-swatch. It is only at frontend, that changes somewhat.
Can you please try to replicate at your end too. How can we resolve this.9. Thanks for sharing. I will replace it.
11.
When you click “Select options” button for Variable products (on the Shop page), it then shows a button from the single product page.
Yes, this is what I was referring. The button color is partially getting reflected and updated from Styles Colors > Buttons > Shop buttons options. Which ofcourse, we do not want.
As we have already set that for Single product page, Checkout buttons..And On the Shop page (buttons on Product Grid), are coming from Primary color option.
The buttons that are showing on the Shop Grid itself, for “Select options” and then for “Add to Cart” for variable product are relevant to each other. And should maintain consistency across. And Partial colors of buttons should not get updated from within these areas (Single product page, Checkout buttons..)
Also, when we have updated the Primary Color of Site (shop, from Settings), then the color of Add to Cart as well as Select options button (initial position) gets reflected (for both Simple and Variable products) on Shop and archive pages.
So in order to maintain uniformity, the further Add to Cart button should also reflect the same color and in same way in the Shop and Archive pages. And should show the same color, that was set from Primary Color option. Isn’t it.
11.b. Hence, I may not be able to use below CSS, as this will also change the button color on Single Product page as well.
.single_add_to_cart_button { background-color: blue; } .single_add_to_cart_button:hover { background-color: red; }So, can you please provide the CSS, just to change the color of buttons on Shop and Archive pages on Product Grid. (so as not to change the colors for buttons on Single product page)
So as to match with the color, that we set as Primary Color from Theme Settings > Style and Colors > Primary color.
11.a. Please ask the team to update the code for Primary color, in order to maintain Uniformity across. Atleast in same relevant areas. So that button color for Variable products, also reflects same color as it is showing for Simple products, for product grids on the Shop and Archive pages.
2 Different colors, exactly on Same-Area, same-purpose, does not looks good at all.In short, this is the Only ODD-One out. Please check below-
https://i2.paste.pics/FG5OW.png10.c.
I have tested a custom code on my demo and it works well (see below video).
https://monosnap.com/file/gSChRhUixhKNkUS7GtRvEbK5oasHJqThank you for taking this to another level. And by showing it for Tablet also, in the video.
Much appreciableRegards
Hello Luke,
1.a. Yes, you are right. I earlier expected, that this could be the reason.
1.b. This is amazing. This really worked, and make the image-swatches of similar size to that of color-swatches. And looks really much better now.
Glad, you identified the cause. Much thanks 🙂11. This worked too. And glad to find that you shared CSS keeping for “Primary color” itself as, “
var(--wd-primary-color);"
As, that way, whenever I change the Primary color in future also, this CSS will retain the color of Add to Cart button with chosen Primary color, and will match with it too.Just wanted to know–
11. If we use “Export” button from Theme settings, then will it Export only the Settings (from General Tab to all the way down to Others tab). Or else, it will also Export the settings for-
a. Existing “Pre-Set Filters” with their defined Rules
b. Custom CSS
c. Custom JS
d. All Selectors and their Values from existing Custom Selectors (under Adv Typography)12. What this option is all about in Theme Settings > Other > Viewport tag > Scalable
Does that mean, user will be able to Pinch-Zoom In and Zoom Out on Mobile devices and even on Touch sensitive Laptops too..
Does that mean, this much only, or some thing more.Or it means, completely something else.
Regards
Hello,
11. Team will surely take these into consideration.
11c. In this case, it can’t be recovered.
11a. Also, you can read our detailed documentation about presets.
https://xtemos.com/docs/woodmart/theme-settings-presets/
If you have any questions please feel free to contact us.
Kind Regards
