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

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,

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,

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.

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/

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,

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,