!IMPORTANT. Change product image size

  • I want to change the product price for the product on the shop page and all other pages except the single product pages. It’s size especially when it’s a variable product makes other product images larger as it has a relatable design. How do I achieve this, please?

    • This topic was modified 4 years, 4 months ago by hunchopreneur.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)

  • Hello,

    Please check the below document
    https://docs.woocommerce.com/document/image-sizes-theme-developers/

    Thanks

    Thread Starter hunchopreneur

    (@hunchopreneur)

    @aimsinfosofts Sorry, I wanted to change the product price size on the shop page except for the single product page. Is there a way to do this?

    Plugin Support Senff – a11n

    (@senff)

    Hey @hunchopreneur

    First of all, it’s best to upload larger images for your products to begin with. That way, your theme and WooCommerce will then size them properly on all relevant pages.

    Right now, it looks like you’ve uploaded fairly small images (148×148), which is why they look smaller on the Shop page, and blurry on the product pages.

    I’d recommend to upload images of at least 1000×1000 for your products (so that your customers will be able to zoom in properly), and if you then want to change the size of the product images on a particular page after that, we can help you with some custom CSS code.

    Thread Starter hunchopreneur

    (@hunchopreneur)

    @senff My images are ok, thanks for the quick reply. I wanted to change the font size of the product price.

    Plugin Support Senff – a11n

    (@senff)

    Hey @hunchopreneur

    Sorry, I was under the impression this was about image sizes (as the topic of this thread indicates).

    To change the product price, go into your site’s admin Dashboard and select Appearance → Customize →?Additional CSS. In the CSS textbox on the left, add the following code:

    .post-type-archive-product div.product span.price {
  font-size: 30px !important;
}

    You should see the changes right away, but this is just a preview for you, so you can experiment a little if you like.
    Once you’re happy with it, select “Save Changes” from the top, and your changes will be applied to your site.

    Thread Starter hunchopreneur

    (@hunchopreneur)

    @senff Thanks very much, the CSS worked for the price. What about the discounted price? It still is the same, You can check this page onemarketc.com/one-shop, the prices which have slashes on the prices. Please help me with the CSS for that

    Plugin Support Senff – a11n

    (@senff)

    In that case, you can replace the code I gave you earlier with this instead:

    .post-type-archive-product div.product span.price,
.post-type-archive-product div.product span.price bdi {
  font-size: 9px !important;
}
    • This reply was modified 4 years, 4 months ago by Senff - a11n.
    Thread Starter hunchopreneur

    (@hunchopreneur)

    @senff This worked perfectly. One last request, please. This page still hasn’t changed its price size onemarketc.com/categories-2 and also all the product category pages are still same.

    Plugin Support Senff – a11n

    (@senff)

    You will then need to replace the previous code with this:

    body:not(.single-product) div.product span.price,
body:not(.single-product) div.product span.price bdi {
  font-size: 9px !important;
}

    Looking for the same solution.

    Thread Starter hunchopreneur

    (@hunchopreneur)

    @jeanetteblondlot TO what problem?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘!IMPORTANT. Change product image size’ is closed to new replies.

Tags