li element as the default bullet point

Hello,

I have several <li> usages on product description section.
But this theme show <li> as > symbol not the normal bullet point.
I think this is due to <li> elements used for the Megamenu arrows.
The css affecting this behavior is

.woodmart-text-block>ul>li:before, .wpb_text_column .wpb_wrapper>ol ul>li:before, .wpb_text_column .wpb_wrapper>ul ul>li:before, .wpb_text_column .wpb_wrapper>ul>li:before {
    content: "\f110";
    font-family: woodmart-font;
    position: absolute;
    top: 6px;
    left: -20px;
    font-size: 8px;
}

How can I override this behavior and use other fonts rather than woodmart-font on the content section of the page without affecting the Megamenu arrows?

Thank you!

Mike

Hi,

You can use this code snippet to place default browser bullet point to the list element on single product page description:

.single-product-page .woocommerce-Tabs-panel--description li {
	list-style: disc;
}

.single-product-page .woocommerce-Tabs-panel--description li:before {
	display: none;
}

Or if you want to use another font icon, add this code by specifying the font-family name and Unicode of the desired icon. Fontawesome like an example.

body .comments-area .comment-body ul>li:before, body .entry-content>ol ul>li:before, body .entry-content>ul ul>li:before, body .entry-content>ul>li:before, body .header-banner-container>ol ul>li:before, body .header-banner-container>ul ul>li:before, body .header-banner-container>ul>li:before, body .hover-content-inner>ol ul>li:before, body .hover-content-inner>ul ul>li:before,body .hover-content-inner>ul>li:before, body .order-list ul>li:before, body .portfolio-single-content>ol ul>li:before, body .portfolio-single-content>ul ul>li:before, body .portfolio-single-content>ul>li:before, body .textwidget>ol:not(.menu) ul>li:before, body .textwidget>ul:not(.menu) ul>li:before, body .textwidget>ul:not(.menu)>li:before, body .unordered-list ul>li:before, body .unordered-list>li:before, body .wc-tab-inner>div>ol ul>li:before, body .wc-tab-inner>div>ul ul>li:before, body .wc-tab-inner>div>ul>li:before, body .woocommerce-product-details__short-description>ol ul>li:before, body .woocommerce-product-details__short-description>ul ul>li:before, body .woocommerce-product-details__short-description>ul>li:before, body .woocommerce-terms-and-conditions>ol ul>li:before, body .woocommerce-terms-and-conditions>ul ul>li:before, body .woocommerce-terms-and-conditions>ul>li:before, body .woodmart-entry-content>ol ul>li:before, body .woodmart-entry-content>ul ul>li:before, body .woodmart-entry-content>ul>li:before, body .woodmart-text-block>ol ul>li:before, body .woodmart-text-block>ul ul>li:before,body .woodmart-text-block>ul>li:before, body .wpb_text_column .wpb_wrapper>ol ul>li:before, body .wpb_text_column .wpb_wrapper>ul ul>li:before, body .wpb_text_column .wpb_wrapper>ul>li:before {
    content: "\f0da";
    font-family: fontawesome;
}

Regards

That worked perfectly,

Thank you!

You are welcome!

I’ve tried using the code posted in both of the threads about bullets and they won’t show as anything other than the > symbol.

That is fine in the navigation, but I would like regular bullet points in the rest of the content. If I could get custom colored bullets to work, even better!

Hello,

Please use this code now:

body .comments-area .comment-body ul>li:before, body .entry-content>ol ul>li:before, body .entry-content>ul ul>li:before, body .entry-content>ul>li:before, body .header-banner-container>ol ul>li:before, body .header-banner-container>ul ul>li:before, body .header-banner-container>ul>li:before, body .hover-content-inner>ol ul>li:before, body .hover-content-inner>ul ul>li:before,body .hover-content-inner>ul>li:before, body .order-list ul>li:before, body .portfolio-single-content>ol ul>li:before, body .portfolio-single-content>ul ul>li:before, body .portfolio-single-content>ul>li:before, body .textwidget>ol:not(.menu) ul>li:before, body .textwidget>ul:not(.menu) ul>li:before, body .textwidget>ul:not(.menu)>li:before, body .unordered-list ul>li:before, body .unordered-list>li:before, body .wc-tab-inner>div>ol ul>li:before, body .wc-tab-inner>div>ul ul>li:before, body .wc-tab-inner>div>ul>li:before, body .woocommerce-product-details__short-description>ol ul>li:before, body .woocommerce-product-details__short-description>ul ul>li:before, body .woocommerce-product-details__short-description>ul>li:before, body .woocommerce-terms-and-conditions>ol ul>li:before, body .woocommerce-terms-and-conditions>ul ul>li:before, body .woocommerce-terms-and-conditions>ul>li:before, body .woodmart-entry-content>ol ul>li:before, body .woodmart-entry-content>ul ul>li:before, body .woodmart-entry-content>ul>li:before, body .woodmart-text-block>ol ul>li:before, body .woodmart-text-block>ul ul>li:before,body .woodmart-text-block>ul>li:before, body .wpb_text_column .wpb_wrapper>ol ul>li:before, body .wpb_text_column .wpb_wrapper>ul ul>li:before, body .wpb_text_column .wpb_wrapper>ul>li:before {
    content: "\f111";
		font-size:5px;
		color:rgba(0, 146, 188, 1);
                font-family: "fontawesome";
}

Best Regards

Thank you! That worked.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts