Woocommerce Question posted in
The official Woocommerce documentation can be found here.

How to add Id or class to last meta in wc_display_order_meta – Woocommerce

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!!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search