[allcalParticipant]

I want to change all the bullet points to a colored > arrow. I created:

.arrowtab ul li { list-style-type: none; padding-left:0; margin-top:-8px } .arrowtab ul li:before { content: “>”; padding-right: 5px;font-weight: bold; color:#008cda; font-size:20px }
}

to call a class of “arrowtab” for specific uses, but would like it applied to all bullet points on the shop/category woocomerce page and single product page. How would I change the css for that?

I tried

.single-product ul li { list-style-type: none; padding-left:0; margin-top:-8px } .single-product ul li:before { content: “>”; padding-right: 5px;font-weight: bold; color:#008cda; font-size:20px }
}

….it worked, but it added arrows above the woocommerce tabs in addition to changing the bullet points on a single product page.

Example product url: http://printmorespendless.com/allcal/product/tze-111/

[ZeshanMember]

Hi there

Thanks for writing in!

To target the UL items inside the product description tab only, add following CSS under Custom > CSS in the Customizer:

.single-product #tab-description ul li {
  list-style-type: none;
  padding-left: 0;
  margin-top: -8px
}

.single-product #tab-description li:before {
  content: ">";
  padding-right: 5px;
  font-weight: bold;
  color: #008cda;
  font-size: 20px
}

Thank you!

[Author]

Posts