• Resolved timothyp

    (@timothyp)


    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

Viewing 13 replies - 1 through 13 (of 13 total)
  • Theme Author Ben Ritner – Kadence WP

    (@britner)

    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

    L.Cini

    (@lcini)

    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?

    L.Cini

    (@lcini)

    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

    Thread Starter timothyp

    (@timothyp)

    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?

    Thread Starter timothyp

    (@timothyp)

    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

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    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

    Thread Starter timothyp

    (@timothyp)

    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

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    Add this:

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

    Kadence Themes

    Thread Starter timothyp

    (@timothyp)

    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;
    }
    Thread Starter timothyp

    (@timothyp)

    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

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    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

    Thread Starter timothyp

    (@timothyp)

    Marvellous, thank you very much!

    L.Cini

    (@lcini)

    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?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Price Slider & other widgets CSS’ is closed to new replies.