I want to display only 10 attribute values at a time on my website.

Hi,

Can you send a screenshot/link to the current output you are seeing, and we can let you know potential options for this?

Thank you,

Hi,

We haven’t heard back from you in a while, so we’ll mark this topic as resolved. If you need any further assistance in future please create a new topic.

Thank you,

I run a website selling phone cases. I’m using your plugin to list phone models as attributes, which helps customers find cases for their specific phones. However, I’m facing an issue:

Current situation:

• There are many phone models listed as attributes
• When I display Phone models, the list becomes very long

What I need:

• A way to structure the attribute list into sections
• For example, display 10 phone models per section or column

Is it possible to organize the attribute list this way? This would make it easier for customers to browse through the phone models.

https://tinyurl.com/2623s5go

i want list like this phone models like this

https://www.awesomescreenshot.com/image/50562582?key=5ba4187571c59e49dae65aa14635f2e4

Hi,

Potentially yes, it would just need some custom CSS to put them into columns.

If you can share the URL to the page which outputs the shortcode, we can provide some code example to help you.

Thank you,

https://qeizy.com/phone-brand/

Okay, so you could use some custom CSS like this:

.wcpas-product-attributes {
	display: flex;
	flex-wrap: wrap;
}

.wcpas-product-attributes li {
	width: 25%;
}

This will put them in columns, with each column being 25% width.

You’d most likely want to add some additional responsive CSS to make them 50% or 100% width at certain breakpoints for tablet/mobile.

You can see what it looks like in this fiddle.

Thank you It’s Working Great ,

i have one more requirment can i add Label to an Specific attribute like adding “new” lable to an new Released phone models, is that possible?

Like This

https://www.awesomescreenshot.com/image/50576135?key=d0e82719a207089259592634c8f11dc7

Yes, each product attribute has a unique ID you can target to add additional content after, e.g.

#wcpas-product-attribute-pa_samsung-samsung-z-fold-5::after {
  background-color: #ff0000;
  color: #ffffff;
  content: "NEW";
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  margin-left: 10px;
  padding: 2px 5px;
  vertical-align: top;
}

https://jsfiddle.net/p0j8yv7r/

It’s Working Perfectly in desktop (https://qeizy.com/)

screenshot : https://www.awesomescreenshot.com/image/50589836?key=73264f15baf5c6fc5ee96a5c1c24b465

but in there is small issue in mobile on Label

screenshot : https://www.awesomescreenshot.com/image/50589835?key=419f6e61937015bd4dab2e35206314cb .the label showing bottom of the model

Custom Code Settings

https://www.awesomescreenshot.com/image/50589814?key=94778a0b69b1af5a250115799efdee77

https://www.awesomescreenshot.com/image/50589812?key=cc1e850f982b10cd1a087836e69a4534

Hi @sahalshazz,

That is because in the mobile menu there is additional wrapping div (wd-mob-nav-html-block) and specific rules have been written relating to that menu making it display that way.

You can override those rules by using something like the below:

.wd-mob-nav-html-block .wcpas-product-attributes .wcpas-product-attribute::after {
	vertical-align: middle !important;
}

.wd-mob-nav-html-block .wcpas-product-attributes .wcpas-product-attribute a {
	display: inline-block !important;
}

Try the above and let us know.

Thank you,

Thank you for Your help It’s Working great

Hi @sahalshazz,

Glad to hear these custom CSS tweaks made this extension more usable for your store.

If you get time, please consider leaving a quick review here, and/or buying us a coffee.

Thank you,