Woocommerce price size on shop index page

Support
#1

In another support thread, I found the CSS to adjust the size of the product title on the shop index page…but I can’t figure out how to reduce the size of the price.

#2

By the way, here is the CSS I’m using to adjust the product font size on the product index page:

/* Shop Index Page */
.woocommerce li.product .entry-header h3 {
font-size:18px !important;
}

#3

On more related font size / placement question: On the product item page, is it possible to have the selected variant price replace the price under the title? It’s kind of confusion to have multiple prices listed when selecting different sizes:

For example:

Default State shows “From $30”:

Selected variant:

An a last text clean-up item. Is it possible to remove the “SKU: N/A” to the left of the Category text?

Thanks!

#4

Hello @dbrinda,

Thanks for writing in! :slight_smile:

Please add the code below to X > Theme Options > CSS:

/* You can change the font-size to any size of your needs. E.g. font-size: 16px; */
.woocommerce li.product .entry-header .price>.amount {
    font-size: 18px;
}
/* This hides SKU: N/A text */
.sku_wrapper {
    display: none;
}

Usage on how to use each line of code can be seen between /**/.

It might be because your product variant settings wasn’t configured properly. You can refer to the documentation below as to how add variation attributes: https://docs.woocommerce.com/document/variable-product/

Hope that helps.

1 Like
#5

Thanks, the font size is fixed and the sku is hidden, but I’m not sure how to fix the other item on the product detail page.

Is there a way to remove the “From: $30.00” completely from just the product detail page? I’d like it to stay on the shop index page, but it’s redundant on the product detail page. Would rather have the price show once the size option is selected.

I took a look at the link you sent, but didn’t see an option to turn off that ‘from:’ pricing.

#6

Please add this custom CSS also:

.single-product.woocommerce div.product .summary > .price {
    display: none;
}

Let us know how it goes!

1 Like
#7

Perfect! Is there a way to make the selected item price bold?

#8

Hello @dbrinda,

Thanks for updating thread. :slight_smile:

Yes, you can add following CSS under X > Theme Options > CSS:

.woocommerce div.product .summary .price>.amount {
    font-weight: bold;
}

Thanks.

1 Like
#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.