How to change woocommerce no price products style

Hello @vekelectronic!

Can you please try the following CSS code and see if it works? (I added .single-product at the beginning of your CSS only.)
If that doesn’t work then please share your site URL with us so we can check the issue better.

.single-product .hide-larger-price .price :not(.price) {
padding: 5px;
background-color: #1975ff;
color: white;
border-radius: 6px;
font-size: 17px;}

Hope it helps.

Hello. Thank you
But not working this .single-product
I have tried this before
Even if it works, it still remains a problem on the single product page.
problem for similar products price in single product page.
website url writed in my profile page. can see this.

Hi there!

Could you try the CSS code below?

.hide-larger-price.single-product .entry-summary .price :not(.price) {
padding: 5px;
background-color: #1975ff;
color: white;
border-radius: 6px;
font-size: 17px;
}

I hope this works! ??

Thank you Kaushik S. a11n
your code work fine but there is a problem.
problem is code work also for product with price in single product page. but i don’t need for product with price. i need for only product without price or no price products in single product page.
can write this code for me and Exception product with price.
The code you sent seems to include everything and works fine. I only want to exclude them for products with prices so that this code does not work for products with prices.

Hi @vekelectronic.

At this time, please provide us with a link to your site where we can see the products without price, so we can take a closer look at that and do some further tests to see which CSS might work best.

Cheers!

Please see this link
a product in my site without price

Hi @vekelectronic

Thanks.

OK, so the CSS provided by @kaushiksomaiya is indeed correct. It doesn’t look like there’s a more suitable way to apply it across all “non-priced” products only.

Another workaround here would be to target and copy each one of the selector paths for each individual product that has no price. For the product you linked me to, that would be:

#product-4163 > div:nth-child(1) > div.row.product-image-summary-wrap > div > div > div.col-lg-8.col-12.col-md-6.text-right.summary.entry-summary > div > p > strong {
    padding: 5px;
background-color: #1975ff;
color: white;
border-radius: 6px;
font-size: 17px;
}

You would however, need to do that for each individual product so it only changes for those products.

Cheers!

thank you @rynald0s.a11n
but not a good solution for more products for each product and increase css lines and make site to slow and It is time consuming to define the code for each product separately.

thank you @kaushiksomaiya
Can you change this code for us?

Hi there @vekelectronic!

As the “no price” products have only one element <strong> within it, you could try targeting the direct child as follows:

.hide-larger-price.single-product .entry-summary .price > strong{
padding: 5px;
background-color: #1975ff;
color: white;
border-radius: 6px;
font-size: 17px;
}

Does this help?

Yes @kaushiksomaiya work fine like a charm. god bless you.

Hey @vekelectronic

That’s great to hear the provided solution worked for you. We’ll set this forum topic o resolved and if you require any assistance in the future please feel free to open a new forum topic.