Support » Plugin: WooCommerce » Customize Woocommerce Box Product

  • Hello,

    I need to change or customize the woocommerce product box design/display for my shop: https://drwhite.ro/shop/

    Is there a plugin that make this changes? I am not familiar with CSS

    Kindly help.

    Regards,
    Feli

    • This topic was modified 1 year, 10 months ago by  feli2009.
Viewing 6 replies - 1 through 6 (of 6 total)
  • I don’t think there is a plugin for this. In what way would you like to change the product box?

    the background color from the title its to big

    Here is some custom css you can try. You can alter the values to suit your preference.

    /* product blocks */
    /* change background colour */
    .woocommerce ul.products li.product .product-details,
    .woocommerce-page ul.products li.product .product-details {
      background-color:#2cabe2;
    }
    /* put regular price and sale price on same line */
    .woocommerce ul.products li.product .price del,
    .woocommerce-page ul.products li.product .price del,
    .woocommerce ul.products li.product .price ins,
    .woocommerce-page ul.products li.product .price ins {
      display:inline-block;
    }
    /* make regular price smaller */
    .woocommerce ul.products li.product .price del,
    .woocommerce-page ul.products li.product .price del {
      font-size:16px;
    }
    /* make sale price smaller */
    .woocommerce ul.products li.product .price ins,
    .woocommerce-page ul.products li.product .price ins {
      font-size:22px;
    }
    /* reduce top padding */
    .woocommerce ul.products li.product .product-details,
    .woocommerce-page ul.products li.product .product-details {
      padding-top:2px;
    }
    /* reduce bottom padding */
    .woocommerce ul.products li.product .price,
    .woocommerce-page ul.products li.product .price {
      margin-bottom:2px;
    }
    /* reduce heading bottom padding */
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    .woocommerce-page ul.products li.product h2.woocommerce-loop-product__title {
      padding-bottom:0px;
    }
    

    Custom css can be entered at:
    Dashboard > Appearance > Customise > Additional CSS

    Thanks,I’ll try the code and let you know….but where do insert the css code? I have an option on my main folder theme or in the editor?

    and this paragraph :”}
    /* make sale price smaller */
    .woocommerce ul.products li.product .price ins,
    .woocommerce-page ul.products li.product .price ins {
    font-size:22px;
    }”

    Make my price smaller? I dont wan’t that ? :)))))))

    Custom css can be entered at:
    Dashboard > Appearance > Customise > Additional CSS

    Just leave out the bits you don’t want. Some experimentation will be needed to get it to your preference.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Customize Woocommerce Box Product’ is closed to new replies.