Edit Woocommerce Shop Page

melissa_232 · September 26, 2018, 11:31am

Really stuck! I’ve come close to launching and the “shop” page looks awful, I have limited CSS knowledge however really want to know how to edit/change the font size under each category and remove the number of products (which appears next to the product title in a bracket AND highlighted yellow??!) I also want to change the size of the product category thumbnail (make bigger).

Any help would be great!

Prasant · September 26, 2018, 4:57pm

Hello @melissa_232,

Thanks for asking.

To adjust font size, please add following CSS under X > Theme Options > CSS:

.archive.woocommerce li.product .entry-header h3 {
    font-size: 120%;
}

To remove product count kindly follow this. You will need to add the code mentioned in the article to the functions.php file of your Child Theme.

To adjust image size, please take a look at following article:

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

melissa_232 · September 27, 2018, 1:51pm

Thank you! All fixed

I’ve got another request for help, still with the headings of product titles across all shop/product pages. I have site wide uppercase “on” which I want, but want to change the titles of products from all uppercase to normal (first letter caps and then lowercase). Without changing the entire site.

I’ve looked in another thread and found the following:

.product h1, .product h2, .product h3, .product h4, .product h5, .product h6, .product .h1, .product .h2, .product .h3, .product .h4, .product .h5, .product .h6 {
_ text-transform: lowercase;_
}

And it does change all the titles to lowercase, but I want the titles to have a capital letter. Hope this makes sense!

melissa_232 · September 27, 2018, 1:54pm

Also - not sure if I need to open a new thread but I need some help in adding opacity of around 70-80% over the product thumbnails in the shop/category pages when they are hovered over. I also want to remove the “add to cart” and “select options” button that appears on them now.

Link to page: https://www.paperhalo.com.au/product-category/baby-milestone-cards/

mldarshana · September 27, 2018, 3:43pm

Hi There @melissa_232

For the product pages, try adding the following CSS rule.

.woocommerce.single-product .product_title.entry-title {
    text-transform: capitalize;
}

For the other query, try adding the following CSS rules.

.woocommerce.tax-product_cat .entry-featured {
    opacity: 0.8;
}
.woocommerce.tax-product_cat li.product:hover .entry-header .button {
    opacity: 0;
}

Hope that helps.

melissa_232 · September 27, 2018, 11:19pm

Thanks for your quick reply!

The CSS changed only the Product Titles on Product pages to have a capital for each word (rest lowercase). I want to leave the product titles on product pages to be all CAPS and the titles in the Shop and Category pages to have the first as a capital and rest lowercase. How can I do this??

Also the opacity didn’t work, it changed the image to a slight opacity but nothing happened when I hovered over. So I would love for the image to be normal and when I hover over each thumbnail in the Shop AND category pages it changes to a lower opacity. Any ideas?

melissa_232 · September 27, 2018, 11:21pm

i also want to remove the add to cart buttons that appear when you hover on products in their categories.

ruenel · September 28, 2018, 2:44am

Hello There,

I want to leave the product titles on product pages to be all CAPS and the titles in the Shop and Category pages to have the first as a capital and rest lowercase. How can I do this??

Please make use of this code:

.woocommerce li.product .entry-header h3, 
.woocommerce li.product .entry-header h3 a {
    text-transform: capitalize;
}

.woocommerce.single-product .product_title.entry-title {
    text-transform: uppercase;
}

For the image opacity of the featured image upon hover, you can make use of this code:

.woocommerce li.product .entry-featured:hover img {
    opacity: 0.30;
}

The opacity values would only range between 0.0 to 1.0.

i also want to remove the add to cart buttons that appear when you hover on products in their categories.
Please make use of this code:

.woocommerce li.product .entry-header .button {
    display: none;
}

We would loved to know if this has work for you. Thank you.

melissa_232 · September 28, 2018, 3:38am

Thank you!

The code for the product titles on the category pages worked beautifully, it didn’t change the titles in the shop though?? Is there a seperate code for this?

Also is there a way I can decrease the spacing between the letters for these ones (and not touch the way I’ve got it set out for the rest of my site)? Because I have increased the spacing in the typography settings, it looks silly when it’s not in caps.

melissa_232 · September 28, 2018, 3:44am

The other codes worked perfectly - THANK YOU! Although there is no opacity on the hover on the actual “Shop” page - how can I add this same effect with code?

Also is there a setting to be able to let the category pages load more than 4 products? Currently it only displays 4 and then has the option to go to the next page. Would like it to display all the products.

ruenel · September 28, 2018, 3:56am

Hello There,

Is this, http://prntscr.com/kzn1df, your shop page?

For image opacity, please update this code:

.woocommerce li.product .entry-featured:hover img {
    opacity: 0.30;
}

And make use of this code instead:

.woocommerce li.product .entry-featured:hover img,
.woocommerce li.product-category.product:hover img {
    opacity: 0.30;
}

For the titles, please replace this:

.woocommerce li.product .entry-header h3, 
.woocommerce li.product .entry-header h3 a {
    text-transform: capitalize;
}

.woocommerce.single-product .product_title.entry-title {
    text-transform: uppercase;
}

By using this code instead:

.woocommerce li.product .entry-header h3, 
.woocommerce li.product .entry-header h3 a,
.woocommerce .woocommerce-loop-category__title {
    text-transform: capitalize;
    letter-spacing: 0px;
}

.woocommerce.single-product .product_title.entry-title {
    text-transform: uppercase;
    letter-spacing: 0px;
}

Also is there a setting to be able to let the category pages load more than 4 products? Currently it only displays 4 and then has the option to go to the next page. Would like it to display all the products.

Please go to X > Theme Options > WooCommerce > Shop and set the “Posts per page” to 12 or more.

We would loved to know if this has work for you. Thank you.

melissa_232 · September 28, 2018, 11:37am

Perfect - thank you so much. All of it worked and is looking so much better.

The only thing I’ve noticed since playing around changing the font is that the titles on “related products/upsell” at the end of a product page has the title aligned in the centre but the price is aligned to the left making it look silly. Any fix for this? It’s only on the up sell products on all product pages.

Also when on Mobile, it all looks perfect except for that the product images (main product image) on the Shop page is left aligned - when the title is centred. Again it looks out of place. The images on the shop (only on mobile) all sit to the left of the screen. Can this be fixed also?

melissa_232 · September 28, 2018, 11:58am

Is there code I can add to this to change the font size? To something smaller?

paul.r · September 28, 2018, 1:55pm

Hi,

To fix the alignment, you can add the code below in Theme Options > CSS

.woocommerce .price {
   text-align:center;
}

ul.products.play li {
    text-align: center;
}

For the font size, you can add font size to the code provided by my colleague

.woocommerce li.product .entry-header h3, 
.woocommerce li.product .entry-header h3 a,
.woocommerce .woocommerce-loop-category__title {
    text-transform: capitalize;
    letter-spacing: 0px;
    font-size:18px;
}

.woocommerce.single-product .product_title.entry-title {
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size:18px;
}

Change 18px to adjust font size.

Hope that helps

melissa_232 · September 28, 2018, 3:35pm

Indeed it did - thank you! Although it has also centred the price on the main product page, when everything else (title, price, add to cart, amount) is aligned left. Any way I can centre the price on everything EXCEPT on the product page/main title?

Also - how do I change the font size of the price to match the customisation in the last code? I have used;

.woocommerce li.product .entry-header h3,
.woocommerce li.product .entry-header h3 a,
.woocommerce .woocommerce-loop-category__title {
text-transform: capitalize;
letter-spacing: 1px;
font-size:10px;
}

.woocommerce.single-product .product_title.entry-title {
text-transform: uppercase;
letter-spacing: 1px;
font-size:10px;
}

And now this doesn’t match the price (price is bigger). Again I only want to change this on everything except the product title price.

Prasant · September 28, 2018, 6:18pm

Hello @melissa_232,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

.single-product .price {
    text-align: left;
    font-size: 18px !important;
}

.single-product div.product .summary .price>.amount {
    font-size: 18px !important;
}

Thanks.

melissa_232 · September 28, 2018, 11:54pm

Thank you! It worked and left aligned the price under the product title on the main page, however changed the positioning of the “related products” back to left align as well. These were centred - how do I get them back centre BUT leaving the price under the product title to be left aligned.

The only price I want left aligned is the one under the main product title on the single product page. All other prices to be centred.

ruenel · September 29, 2018, 1:10am

Hello There,

Please have the code updated and use this instead:

.single-product .entry-summary .price {
    text-align: left;
    font-size: 18px !important;
}

.single-product div.product .summary .price>.amount {
    font-size: 18px !important;
}

Please let us know how it goes.

melissa_232 · September 29, 2018, 3:03am

Worked!!!

Sorry for the tonne of questions - I’m so close to being happy with the styling Last one I think, how do I increase the line spacing on product titles on product pages only? If you look above I’ve already got some styling for the titles.

ruenel · September 29, 2018, 3:38am

Hello There,

I think you are referring to the line height. Please have this code removed:

.woocommerce.single-product .product_title.entry-title {
    text-transform: uppercase;
    letter-spacing: 0px;
    font-size:18px;
}

And replace it with this:

.woocommerce.single-product .product_title.entry-title {
    text-transform: uppercase;
    letter-spacing: 0px;
    line-height: 24px;
    font-size:18px;
}

The line height should be at least several pixels than the font size. Feel free to increase the values if needed.