WordPress.org

Ready to get started?Download WordPress

Forums

Virtue
[resolved] Price Slider & other widgets CSS (14 posts)

  1. timothyp
    Member
    Posted 3 months ago #

    Hi there

    I'd like to adjust the text-size for the various woocommerce widgets that are in my shop page - particularly the Price slider and featured product widgets.

    For the price slider I'd like:
    A smaller "filter" button
    The price range text, on my site it says "Price: £6-£26", I'd like to be on one line, not two.

    For the featured products widgets I'd like:
    The product title (i.e. "Red Heart Mug"), Price and ratings stars (if possible) to be made smaller.

    Also...

    It seems that the dropdown menu in the shop (for "default sorting") uses the H1 settings. I'd like to have my page title in another font but keep the dropdown menu in the font that it is currently in.

    Many thanks in advance for any and all help you can give me.
    My site:

    http://hand.handmadecrafthouse.co.uk/?product_cat=kitchen_dining

  2. Kadence Themes
    Member
    Theme Author

    Posted 3 months ago #

    Add this css to your custom css box in the theme options > advanced settings:

    .widget_price_filter .price_slider_amount .button {
    margin-right: 10px;
    font-size: 12px;
    padding: 6px 8px;
    line-height: 20px;
    }
    .widget_price_filter  .price_label {
    font-size: 12px;
    }
    .customSelect {
    font-family: lato;
    }
    .woocommerce ul.product_list_widget li a, .woocommerce-page ul.product_list_widget li a, .woocommerce ul.product_list_widget li .amount, .woocommerce-page ul.product_list_widget li .amount {
    font-size: 12px;
    }
    .woocommerce ul.product_list_widget li .star-rating, .woocommerce-page ul.product_list_widget li .star-rating {
    font-size: 10px;
    }

    Kadence Themes

  3. L.Cini
    Member
    Posted 3 months ago #

    TimothyP - what price filter are you using? I cannot get the woocommerceprice filter to work on any of my pages. are you using a plugin?

  4. L.Cini
    Member
    Posted 3 months ago #

    also, is there a way to change the color on the widgets (the ones with the hover over)on the home page?
    http://www.artmutts.com

  5. timothyp
    Member
    Posted 3 months ago #

    Kadence - absolutely fantastic! Thanks so much for all your help over the last week or so, it is very very very much appreciated!

    Thanks!

    L.Cini - I'm just using the woocommerce one... it's in the "Primary Sidebar" area. Mine didn't work at first - didn't even show up, but then I realised that all the products in my shop were the same price! lol

    As to the other question, I'm not sure if this is what you mean but I asked a similar question the other day: http://wordpress.org/support/topic/blue-buttons-as-on-theme-demo?replies=5

    Hope that helps?

  6. timothyp
    Member
    Posted 3 months ago #

    Actually - it's not quite resolved! Ooops!

    Just checked the headers - the page title is perfect, and the dropdown looks fine, but when you extend it, all the contents are in the page title font, which I don't want.

    Other things too - I'd like the "add to cart" buttons, the prices and the "back to shop" links on the product pages to be back to how they were before, with the simple "lato" font. The only thing I want to be the new font (Pacifico) is to be the page titles.

    Also, is there a way to reduce the size of the dropdown box's fonts to a similar size as the now-fixed widgets?

    Thanks

  7. Kadence Themes
    Member
    Theme Author

    Posted 3 months ago #

    If you only want the page title to use pacifico then add this to your custom css:

    .headerfont {
    font-family: lato !important;
    }

    Which dropdown box are you talking about?

    Kadence Themes

  8. timothyp
    Member
    Posted 3 months ago #

    Hi Kadence,

    Thanks for that!

    The dropdown box is on the same level as the "Kitchen & Dining" header in the link in the original post. It sorts the shop by rating, newness, price, etc etc.

    I twiddled with the css earlier and I've got the fonts right now - is there any way to make that box slightly smaller?

    Thanks

  9. Kadence Themes
    Member
    Theme Author

    Posted 3 months ago #

    Add this:

    .woocommerce-ordering select {
    width: 180px;
    }

    Kadence Themes

  10. timothyp
    Member
    Posted 3 months ago #

    Hi Kadence, that did the trick length-ways, but I'd like it narrower (not as high) too. I tried changing the depth to 30px but it didn't appear to do anything...

    .woocommerce-ordering select {
    width: 180px;
    height: 30px;
    }
  11. timothyp
    Member
    Posted 3 months ago #

    Also, I don't know wether to start a new thread or not, (goodness knows I've started enough the last couple of weeks!) but on the shop catalogue page, the products with difference price options (the variable products) are causing the shop page as a whole to look untidy -

    Is there any way to force the thumbnails to justify to one level and not jumble around as they are currently?

    http://hand.handmadecrafthouse.co.uk/?post_type=product

    Many thanks

  12. Kadence Themes
    Member
    Theme Author

    Posted 3 months ago #

    1.

    .woocommerce-ordering .customSelect, .woocommerce-ordering .customSelect .customSelectInner:before {
    height: 30px;
    line-height: 30px;
    }

    2. add this to your custom css to make the add to cart buttons the same size.

    .product_item .kad_add_to_cart {
    font-size: 14px;
    }

    Kadence Themes

  13. timothyp
    Member
    Posted 3 months ago #

    Marvellous, thank you very much!

  14. L.Cini
    Member
    Posted 3 months ago #

    I have a bit of the same problem, if I don't put a price on the product, then there is an alignment issue with the products that do have a price. I cannot type in a $$ dollar sign as it only accepts numeric entries. I added the codes above but it did not change. I don't really need the 2nd code as my add to cart buttons are all the same size. It's the adding in of the price that affects it.

    http://www.artmutts.com/shop/

    also how do i change the font color on the add to cart buttons?

Reply

You must log in to post.

About this Theme

About this Topic