CODEWITHSUNDEEP
phparrayswordpresswoocommerce
Ashish Pariyani
Ashish Pariyani

Reputation: 13

How to add Id or class to last meta in wc_display_order_meta

I want to add id or class to only the last item meta in the array in wc_display_item_meta.

Example:

<ul class="wc_item_meta">'
<li> <Strong class="wc_item_meta_label">Weight</strong> </li>
<li> <p> 24kg </p></li>
<li> <Strong class="wc_item_meta_label">Height</strong> </li>
<li> <p> 6 feet </p></li>
<li> <Strong class="wc_item_meta_label">Length</strong> </li>
<li> <p> 5 Meter </p></li>
</ul>

Here in this example i want the last item in array ie length in this example in bigger font than the other items in array.

Please Help!!

Upvotes: 0

Views: 66

Answers (2)

blacksheep_trident
blacksheep_trident

Reputation: 312

You can select the last item i.e. 5 meter in the ul by using :last-child selector and increase it's font or to select the second last child i.e. Length label you can use :nth-last-child(2) selector. Below IS the sample snippet.

.wc_item_meta li:last-child {
  font-size:25px;
}
<ul class="wc_item_meta">'
<li> <Strong class="wc_item_meta_label">Weight</strong> </li>
<li> <p> 24kg </p></li>
<li> <Strong class="wc_item_meta_label">Height</strong> </li>
<li> <p> 6 feet </p></li>
<li> <Strong class="wc_item_meta_label strong">Length</strong> </li>
<li> <p> 5 Meter </p></li>
</ul>

Upvotes: 1

Yotam Dahan
Yotam Dahan

Reputation: 699

You can just add to it another class with !important inside to override the previous class.

Also change the location of class, strong tag wont allow you to use width like li tag.

.wc_item_meta_label{
  width: 100px;
  height: 20px;
  background-color: blue;
}

.longer{
  width: 200px !important;
  height: 20px;
  background-color: red;
}
<ul class="wc_item_meta">'
<li class="wc_item_meta_label"> <Strong>Weight</strong> </li>
<li> <p> 24kg </p></li>
<li class="wc_item_meta_label"> <Strong>Height</strong> </li>
<li> <p> 6 feet </p></li>
<li class="wc_item_meta_label longer"> <Strong>Length</strong> </li>
<li> <p> 5 Meter </p></li>
</ul>

Upvotes: 1

Related Questions