Customize product title and price on shop page

Hi Stefan ??

Regarding your first question, I’ve generated a custom CSS code to fix that. Here is it:

/* Set product font title to bold */
h2.woocommerce-loop-product__title {
    font-weight: bold !important;
}

/* Remove the bold weight for product price */
.woocommerce ul.products li.product span.price {
    font-weight: normal !important;
}

?

Also, I found a code somewhere to change the product price color. But how do I make sure the word ‘from’ gets that same color?

For this, here is another custom CSS code that will help you to change the color of it:

/* Change price font color */
span.woocommerce-Price-amount.amount {
    color: red !important;
}

Oh and finally, I’ve noticed that the navigation menu items are bold on the shop page (Shop All in menu). As far as I know, this only happens on that specific page. How can I change this?

I couldn’t notice this issue. Could you please provide us with a full-screen uncropped screenshot in order to understand where the issue is located and provide you with guidance? I recommend https://snipboard.io for easily sharing screenshots – please follow the instructions on the page, then paste the URL here. It works with Chrome, Firefox, Safari, and Edge.

Cheers! ??

Thanks Gabriel! The first CSS code works perfectly, but the second code only changes the color of the price itself. Do you know how to change the whole line, including ‘from’?

As for the last issue, I don’t know where it is located. All I see is that the menu items are bold on the shop page (Shop All) and on every other page they appear normally.

Glad to know that it worked!

Ok, so to change the color for the whole line, please use the following code instead:

/*Change product Price and amount color*/
.products span.price, span.woocommerce-Price-amount.amount {
    color: red !important;
}

As for the last issue, I don’t know where it is located. All I see is that the menu items are bold on the shop page (Shop All), and on every other page they appear normally.

That’s odd. They are looking good to me ?? Here is a screenshot:

https://www.screencast.com/t/orLKiWIy6VeO

I hope that helps!

Hello Gabriel, that code worked for me, thanks a lot!

The menu links on the shop page were in bold, so they were slightly different from the menu on every other page. I think it had something to do with WooLentor widgets I used on the shop page, because I redesigned that page and now the menu links are in normal characters again.

By the way, last question for now: is there a way to change the color of the thin line underneath the widget titles in my footer?

Great! To change the color of that line, please add the following code:

/*Change footer widget underline color*/
.site-footer .widget-title {
    border-bottom: 1px dotted red !important;
}

Cheers ??

Since it’s been a while since we last heard back from you, I’m going to mark this thread resolved.

If you have further questions, please feel free to open a new topic.

Cheers! ??

• This reply was modified 3 years, 10 months ago by Gabriel - a11n.

Thanks Gabriel, that last code worked as well!

That’s wonderful. Happy to help!! ??