How to hide Price in "Featured Products Widget" via Sidebar with CSS?

[abfchgirlx]

Hi There!

Can someone tell me the CSS code on how to hide the price from our "featured products" widget via the sidebar on our blog?

Many thanks in advance!

https://www.fallfordesign.com/blog/

[carasmo]

You can use Chrome Dev or FireFox Dev tools to easily find the class used on the price and use CSS specificity to hide the price in the .sidebar

.sidebar .woocommerce-Price-amount {
	display: none;
}

---

Genesis Theme Customization and Help

[abfchgirlx]

Thanks for the tip about the Developer tools! I was using firebug originally.

But that CSS removes the whole entire sidebar pricing (I only want the pricing under the section "Featured Products" removed but keep pricing for "Our Favorites.").

I've been grabbing all that CSS code via firebug /firefox dev tools but none of it hiding the pricing in that particular section;

#woocommerce_products-3 .sidebar .woocommerce-Price-amount {
	display: none;
}

Help?

I'm having to manually type everything out - is there an easy way I can copy/paste the CSS classes from Dev Tool?

[carasmo]

.sidebar comes before the id woocommerce_products-3 in the dom.

Use

.sidebar #woocommerce_products-3 .woocommerce-Price-amount {
	display: none;
}

I use FireFox's dev tools and it will copy out the CSS to a specific element and add a bunch specificity you don't need and some you do need depending on the original CSS specificity. Learn CSS and actually type it out.

---

Genesis Theme Customization and Help

[abfchgirlx]

Thanks! I'll contact Firefox Dev team and see if they can educate me on how I can copy the classes out of their program. The regular copy from the Edit Tools and hot keys aren't allowing me to select the code, and copy it.

Back to the removing the pricing through - the updated CSS code removed the pricing, and I was able to figure out the removal of the title that was hoovering over the product images. What about that pesky little "-" (dash) that was between the prices. How do we get that to go away? I don't see any CSS code around it.

Thanks in advance!

[carasmo]

Use z-index to cover it with the linked image since it has no class around that area:

.sidebar #woocommerce_products-3 a {
    display: block;
    position: relative;
    z-index: 1;
}

---

Genesis Theme Customization and Help

[abfchgirlx]

That worked perfect. Many thanks!

[Author]

Posts