Padding around image in shop

  • Resolved rr2017

    (@rr2017)


    5 years, 3 months ago

    Hello,

    I am trying to make the padding bigger around the image in the product box. I only want to change the padding for the image, not the title and price. Is there a way to do this?

    Also, I want to put the price on the line under the title but nothing I have tried has worked. I tried:
    .woocommerce ul.products li.product .price {
    font-size: 14px !important;
    display: block !important;
    }

    I tried that on its own and then added order:0 but nothing worked. Any ideas?

    Thank you for your help!

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

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

  • Here is the solution

    /* Image Padding + Image Width Will decrease the size of image */
ul.products > .product .qodef-pl-inner .qodef-pl-image {
    width: 85%;
    padding: 20px;
}
/* To get price under the title */
.woocommerce ul.products li.product .price {
	font-size: 14px !important;
	display: block !important;
	position: absolute;
}
/* To fix white background height as price is coming under title we need space */
.woocommerce .products li {
    min-height: 300px;
}
    Plugin Support Ryan Ray, a11n

    (@ryanr14)

    Hi @rr2017,

    Let us know if what @princebhalani143 provided helps fix your issues. Otherwise I’d take your request over to the theme developer as they might be able to help make those tweaks.

    Thread Starter rr2017

    (@rr2017)

    Sorry it took a few days but @princebhalani143’s solution worked! Thank you so much!

    Thread Starter rr2017

    (@rr2017)

    Actually, I have one more request. @princebhalani143 Would you happen to know the css I would use to do the same sort of padding around the image in the single product page?

    @rr2017 Sorry, no idea about old code, if provided code is conflicting with some changes then you can comment that temporarily and get old code back in the same way, please check below CSS reference might be you were using some of that.

    As you’ve mentioned earlier solution work after a few days, You can do hard refresh, clear cache/cookies or use private browser/incognito to see the changes immediately. If you’re using any kind of cache plugin you should clear cache to see the changes in action.

    .qodef-woo-single-page .qodef-single-product-content .images
.qodef-woo-single-page .qodef-single-product-content .images figure a
.qodef-woo-single-page .qodef-single-product-content .images figure a img
.qodef-woo-single-page .qodef-single-product-content .images .woocommerce-product-gallery__image:first-child
.qodef-woo-single-page .qodef-single-product-content .images.woocommerce-product-gallery--columns-3 .woocommerce-product-gallery__image:not(:first-child)
.qodef-woo-single-page .qodef-single-product-content .images.woocommerce-product-gallery--with-images .woocommerce-product-gallery__image:not(:first-child)
    Thread Starter rr2017

    (@rr2017)

    Thank you. Your previous solution did not conflict with anything, I am just having a different problem with my images in the single product page appearing too big and was hoping to find out what the CSS code would be to add padding around those images as well.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Padding around image in shop’ is closed to new replies.